Build front-end for image gallery with cards list on the left
Budget: $30 – $250 USD
A simple website composed with 2 sides, see attached file for illustration. The website will be built with type-script framework - React or Angular
Left side:
Card list
* the exact cards and their presets is predefined an cannot be changed by the user (the cards parameters will be changeable, as described herein.
* Each card will be extended to card view on click. While extended, card image and card parameters will be available.
*The parameters inputs could include double or single range slider, check box, and choice between list.
* Each card will have check box for activation, always available (card extended or not).
* Checked cards will be highlighted.
* Likewise, an info icon will be always available (card extended or not), hovering above it will show a documentation text about this card.
* The checked cards and their parameters will be sent to the back-end via rest-API.
* Only one card with full set of the parameters types will be created by you and replicated for testing.
* The whole set of cards and their available parameters, image and info will be configurable and read from a json file or equivalent.
augmentation toggle:
* above the card list, there would be a toggle button for augmentation status.
* In each change, the image gallery will change the images source (with or without augmentation) presented.
* Rest API call will be sent while the toggle status is ON
Right side:
Image gallery
* Dynamically updated from aws database (database already exists, only get images list is needed).
* The gallery will show the current image page and will load more pages in infinite scroll manner (until the end of the database).
* Pre loading next page for smooth scroll will be made.
* while clicking on image, the full image will be read from the database and presented, could be in a horizontally slide show.
* In gallery, only tiles is displayed (as received from database).
* The gallery will update on rest-API call.
* The front-end will keep two sets of image pages loaded, one for augmented version and one for non augmented, and will present one of them (in instant switch) in accordance with the toggle status button on the left side of the webpage.
* The image gallery could be made from ready components, even with a small licence cost (please write the cost in the proposal).
Export button
* On the right top corner, an export button will be available.
* while pressed, a text file, contains the checked cards and their current parameters will be downloaded.
of course, delivering source code is needed.
Bug fixes for 2 months after the delivery is required.
Left side:
Card list
* the exact cards and their presets is predefined an cannot be changed by the user (the cards parameters will be changeable, as described herein.
* Each card will be extended to card view on click. While extended, card image and card parameters will be available.
*The parameters inputs could include double or single range slider, check box, and choice between list.
* Each card will have check box for activation, always available (card extended or not).
* Checked cards will be highlighted.
* Likewise, an info icon will be always available (card extended or not), hovering above it will show a documentation text about this card.
* The checked cards and their parameters will be sent to the back-end via rest-API.
* Only one card with full set of the parameters types will be created by you and replicated for testing.
* The whole set of cards and their available parameters, image and info will be configurable and read from a json file or equivalent.
augmentation toggle:
* above the card list, there would be a toggle button for augmentation status.
* In each change, the image gallery will change the images source (with or without augmentation) presented.
* Rest API call will be sent while the toggle status is ON
Right side:
Image gallery
* Dynamically updated from aws database (database already exists, only get images list is needed).
* The gallery will show the current image page and will load more pages in infinite scroll manner (until the end of the database).
* Pre loading next page for smooth scroll will be made.
* while clicking on image, the full image will be read from the database and presented, could be in a horizontally slide show.
* In gallery, only tiles is displayed (as received from database).
* The gallery will update on rest-API call.
* The front-end will keep two sets of image pages loaded, one for augmented version and one for non augmented, and will present one of them (in instant switch) in accordance with the toggle status button on the left side of the webpage.
* The image gallery could be made from ready components, even with a small licence cost (please write the cost in the proposal).
Export button
* On the right top corner, an export button will be available.
* while pressed, a text file, contains the checked cards and their current parameters will be downloaded.
of course, delivering source code is needed.
Bug fixes for 2 months after the delivery is required.