https://github.com/guto1657/rest-countries-react

React project that pulls data from an API of countries and displays it to the user
https://github.com/guto1657/rest-countries-react

countries-api countries-data country country-information css css3 html-css-javascript html5 javascript javascript-applications react react-components react-router react-router-dom reactjs router router-dom styled-components

Last synced: 7 days ago
JSON representation

React project that pulls data from an API of countries and displays it to the user

• Host: GitHub
• URL: https://github.com/guto1657/rest-countries-react
• Owner: guto1657
• Created: 2022-07-12T13:17:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-18T13:29:47.000Z (over 2 years ago)
• Last Synced: 2024-11-17T19:44:42.423Z (2 months ago)
• Topics: countries-api, countries-data, country, country-information, css, css3, html-css-javascript, html5, javascript, javascript-applications, react, react-components, react-router, react-router-dom, reactjs, router, router-dom, styled-components
• Language: JavaScript
• Homepage: https://rest-countries-react-app-snowy.vercel.app/home
• Size: 936 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# REST Countries API with color theme switcher

This project is a solution to the

[REST Countries API with color theme switcher coding challenge](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca).

## screenshot

![1653575524536](https://user-images.githubusercontent.com/70277574/178499624-cd9567c0-06a6-4a6d-b00c-f80b087e26fe.png)

## The challenge

the challenge is to integrates the

[REST Countries V2 API](https://restcountries.com/#api-endpoints-v2) to pull

country data and display it to the user like in the designs.

in this project users should be able to:

- See all countries from the API on the homepage ✅

- Search for a country using an `input` field ✅

- Filter countries by region ✅

- Click on a country to see more detailed information on a separate page ✅

- Click through to the border countries on the detail page ✅

- Toggle the color scheme between light and dark mode _(optional)_ ✅

## Deploying

- [Vercel](https://rest-countries-react-app-snowy.vercel.app/home)

## Tools and technologies used

- Visual Studio Code;

- HTML5;

- CSS3;

- JavaScript;

- React.js

- React Router v6

- Rest Countries API

- Styled Components

---