https://github.com/aggarwal-muskaan/restcountriesapi
🛩React web application using REST countries API💕
https://github.com/aggarwal-muskaan/restcountriesapi
debounce-search lazy-loading prop-types react-hooks rest-api styled-components
Last synced: about 2 months ago
JSON representation
🛩React web application using REST countries API💕
- Host: GitHub
- URL: https://github.com/aggarwal-muskaan/restcountriesapi
- Owner: aggarwal-muskaan
- Created: 2021-06-04T08:09:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-16T12:09:02.000Z (about 4 years ago)
- Last Synced: 2025-01-24T10:46:53.321Z (over 1 year ago)
- Topics: debounce-search, lazy-loading, prop-types, react-hooks, rest-api, styled-components
- Language: JavaScript
- Homepage: https://explorecountries.netlify.app/
- Size: 216 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rest Countries ✈
The project is build using [REST API](https://restcountries.eu/ "rest-countries-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```.
```bash
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](https://explorecountries.netlify.app/ "Demo") 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](https://www.npmjs.com/package/prop-types) : for typechecking
2. [Styled Components](https://styled-components.com/docs) : for styling (you will definitely fall in love)
3. [Debouncing](https://www.npmjs.com/package/use-lodash-debounce) : hits API after a gap of given time & not call API after every change made by user
4. [Lazy Loading](https://reactjs.org/docs/code-splitting.html) : code-splitting with dynamic imports (improve performance of apps using large third-party libraries)
5. [Unit Testing](https://jestjs.io/docs/getting-started) : 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🙌