Rest Countries ✈

The project is build using REST API

How to Run the Web-App

This command clones the repo and installs all dependencies required to run the application.
Also, it will generate package-lock.json.

git clone https://github.com/aggarwal-muskaan/restCountriesAPI.git/
cd [foldername]
npm install && npm start

API endpoints

There are total 3 endpoints:

1. pulls data of all countries
2. pulls data matches with country name
3. pulls data based on Region.

The global state is initialized with the data of all countries when the app runs for the first time.
The country is searched in that instance if user searched from the URL.

✨Layout✨

desktop-design-home-light	desktop-design-detail-dark	mobile-design-detail-light

Click here to see app in action.

Features❤

• See all countries on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

Learnings

1. PropTypes : for typechecking
2. Styled Components : for styling (you will definitely fall in love)
3. Debouncing : hits API after a gap of given time & not call API after every change made by user
4. Lazy Loading : code-splitting with dynamic imports (improve performance of apps using large third-party libraries)
5. Unit Testing : makes debugging easy if we write more tests before code. (P.S- I've not used TDD)

Whats's next?

==> Learn Redux <==

🙌Built with styled-components & React.js🙌