An app to render a photo gallery for a website's item listing page. It includes a seed script to generate example data.
To deploy this service, run a copy of the docker-compose.yml included in the root directory (updating the port mapping as needed). This will pull the image for this app (built from the Dockerfile in the root directory) from Docker Hub, and create a container that runs the server. Once the service is running, open <URL>/:id
in the browser, changing the id (0-99) to access a variety of examples (for now, URL is hardcoded to http://3.133.19.147
).
- Node 8.15.1
- Mongo 4.2.0
From within the root directory:
npm install -g webpack
npm install
Features include:
- A preview of the first few photos in the set
- arranged in a grid
- with an on-hover effect that zooms into the photo, and darkens all other photos
- clicking on a photo brings the user to that point in the carousel
- clicking on the 'View Photos' button brings the user to the first photo in the carousel
- clicking the 'Share' button renders a modal that covers the rest of the page, clicking on the 'X' closes it
- clicking the 'Save' button toggles between a saved (filled heart) and unsaved (empty heart) state
- A carousel to navigate through the photos
- clicking on either side of the photo, or the arrow buttons, navigates the user in a loop forwards/backwards through the set
- clicking the 'X' button closes the carousel and re-renders the preview
- a description and order number are displayed at the bottom of the photo
- a 'scrollbar' shows thumbnails (that highlight on hover) of photos in the set, and the user can click on one to navigate directly to that photo
Screenshots of deployed service:
Save button when clicked
Photos in this project are from the following Airbnb listings:
- https://www.airbnb.com/rooms/10201545
- https://www.airbnb.com/rooms/3993887
- https://www.airbnb.com/rooms/32694
- https://www.airbnb.com/rooms/1083329
- https://www.airbnb.com/rooms/1415908
- https://github.com/O2znz/checkout
- https://github.com/O2znz/reviews
- https://github.com/O2znz/recommendations
- https://github.com/O2znz/experiences
- https://github.com/O2znz/angelique-proxy (proxy server that renders this service and the services listed above)