This little project started out as a homework assignment during my time at the CodeClan professional software development bootcamp. I was struggling with my understanding of React and so I kept building upon this fun little project over subsequent weekends.
Table of Contents
With this app you can select a continent, then a country, view some information about it and add it to a 'visited countries list' which is stored locally. Once added to this list, it'll be coloured in blue on a world map. If you've made a mistake, you can remove the country from your 'visited' list.
I initially designed this app to only have a continent dropdown and a countries dropdown to cement understanding of APIs and the useState and useEffect hooks. Once I got the hang of that, I added in a Leaflet map to show the capital city of the selected country. Once that was working, I added the React-Simple-Maps to colour in a country if it's entered into the 'I've been here' list. Finally, I added in some routing as we covered this in class while I was still working on this project. There are a couple of bugs, and I'll keep building on this to further my understanding over time. For a first React project after learning about it for 2-3 weeks, I'm quite pleased.
- React
- Javascript
- HTML
- CSS
- Router
To run this app, you must have:
-
Leaflet Maps
npm install react react-dom leaflet npm install react-leaflet npm install -D @types/leaflet
-
React-Simple-Maps
npm install --save react-simple-maps
-
React ToolTip
npm install react-tooltip
-
Router
npm install react-router-dom
- Create a folder on your laptop and navigate to it via Terminal
- Clone the git
git clone [email protected]:HelenLangers/CC_Week7_weekendhw_countriesapp.git
- Install NPM packages
npm install
- Launch VSCode
code . - Start the server
npm start
- A new window should automatically open (Chrome is ideal), but if not visit http://localhost:3000/
- To stop the server enter ctrl + c in your Terminal
- Currently, you can add one country multiple times to your 'visited' list. I'd like to make this so you can only add one country once.
- In it's current version, the Leaflet map (which is designed to appear when selecting a country) does not recenter when the selected country changes. I've hidden that component for now. If you want to make use of it, simply uncomment the Mapping element under CountryItem.js
- Whilst the Leaflet map is hidden, I made an attempt at using the MapChart to show the selected country and it's info. I'd like this to work more than the Leaflet map in the long term.
- The Map Chart is clickable and will change the selected country BUT only if the clicked country is in the same continent as the previously selected country. This needs fixing and will likely require the removal of the continent dropdown and only hit the API via their 'view-all' JSON.
- Once these main features are working, I want to make this a much more responsive app to work better on mobile. I also need to improve my understanding and execution of accessibility in React and implement it here.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Helen Langridge - Twitter - LinkedIn
Project Link: https://github.com/HelenLangers/CC_Week7_weekendhw_countriesapp