https://github.com/taiseen/country_info
Build for learning purpose
https://github.com/taiseen/country_info
api conditional-ui-rendering css html object-chaining pagination react reactjs ui-toggling
Last synced: 3 months ago
JSON representation
Build for learning purpose
- Host: GitHub
- URL: https://github.com/taiseen/country_info
- Owner: taiseen
- Created: 2021-05-11T21:41:25.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-02-16T21:48:49.000Z (over 4 years ago)
- Last Synced: 2025-01-12T18:51:25.700Z (over 1 year ago)
- Topics: api, conditional-ui-rendering, css, html, object-chaining, pagination, react, reactjs, ui-toggling
- Language: JavaScript
- Homepage: https://countriy-information.netlify.app
- Size: 534 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
07 Mar 2021 ==> 1st build
11 Feb 2022 ==> api change
# Country Info - React App <|> [Live Link](https://countriy-information.netlify.app)
## API Use
### Get all items
```
https://restcountries.com/v3.1/all
```
### Get only search item
```sh
https://restcountries.com/v3.1/name/${searchCountry}
```
## Concept Implementation
* Parent Child Component
* Sibling Component Data Passing
* Object `Chaining`
* Object Destructuring
* Object Destructuring with `alias naming`
* Object Destructuring with array value access inside JSX
* JSX ternary operation
* implement -> useState & useEffect with & without dependency
## Features & Usage
* Searching option
* After click `in` country, details info `show | toggle`
* After click `outside`, details info `hide | toggle`
* Bootstrap | linking at `index.html` page
* `Pagination`
# Run Locally
Clone the project
```sh
git clone https://github.com/taiseen/country_info.git
```
Go to the project directory
```sh
cd country_info
```
1st - Install dependencies
```sh
npm install
```
Then start the server
```sh
npm run start
```
To deploy this project run
```sh
npm run deploy
```