Interactive Visited Countries Map app made with React.js and TypeScript for self learning.
Check out the demo!
- Clone this repo to your local machine using
https://github.com/tomi5/visited-countries-map.git - Use yarn to install all dependencies for a project.
$ yarn install
$ yarn start- Open http://localhost:3000 to view it in the browser.
- React v16.13.1
- TypeScript
- React Hooks
- Styled Components
- Local Storage
- Rest API
- Material-UI
Users are be able to:
- Check out how many countries have been visited (with details of the continents as well) and what percetage of the world it is
- Display the visited countries on the map and in the table below.
- Search for a country using an search field typing country's name (in English or in native language)
- Choose between light and dark mode
- Maintain selected both the cisited countries and the theme as well after refreshing the browser
- View the optimal layout depending on their device's screen size
- Country data: REST Countries API
- Icons: styled-icons
- SVG Map: Simplemaps.com
- App features to be added in the future:
- zoom & pan for map,
- the ability to add notes to the visited country (e.g. date of visit, sample photo)
- This is a refactored version of my first project made with Vanilla JavaScript.