Countries to Discover

Countries to discover is a web application which, through a photo gallery, let the user know up to twelve countries of great tourist, cultural, natural and gastronomic interest.

Features

• Show multiple selectable options (countries).
• Show information based on selected option.
• Show photos related to selected option (country).
• Allow to deselect option (go back).
• Load gallery photos only when they are going to be displayed (lazy load).
• Show modal when a photo is selected.
• Allow navigation inside modal.
• Select automatically the format of the photo that best fits in the available space (modal and gallery photos).
• Preload option images and display a loading page in the meantime.
• Load gallery photos using Unsplash API. It was discarded to maintain API KEY confidential, it is simulated loading photos from JSON files instead.

Technologies

• ES6 JavaScript
• React
• CSS Modules

Dependencies

• react
• react-dom
• react-scripts: create-react-app module.
• axios: promise based HTTP client.
• intersection-observer
• react-sizes: high-order component to get window sizes (width and height).
• react-transition-group: components for managing component animation.
• react-aria-modal: accessible and flexible React modal.
• classnames: utility for conditionally joining class names together.

Acknowledges

Photos from Unsplash
Icons by iconmonstr
Developed by Bycor Sánchez

Notes

It is not guaranteed that the photographs displayed on this web application are directly related to the listed countries.