https://github.com/adrianoescarabote/rest-countries-api-with-color-theme-switcher

REST Countries API with color theme switcher w/ Typescript, React and styled components.
https://github.com/adrianoescarabote/rest-countries-api-with-color-theme-switcher

axios react styled-components typescript

Last synced: 23 days ago
JSON representation

REST Countries API with color theme switcher w/ Typescript, React and styled components.

• Host: GitHub
• URL: https://github.com/adrianoescarabote/rest-countries-api-with-color-theme-switcher
• Owner: AdrianoEscarabote
• License: mit
• Created: 2023-02-07T16:52:24.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-19T15:21:40.000Z (about 2 months ago)
• Last Synced: 2024-12-19T16:28:57.487Z (about 2 months ago)
• Topics: axios, react, styled-components, typescript
• Language: TypeScript
• Homepage: https://rest-countries-api-with-color-theme-switcher-theta.vercel.app
• Size: 4.98 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
- Active project [click here](https://rest-countries-api-with-color-theme-switcher-adrianoescarabote.vercel.app/)

# VIDEO 

https://user-images.githubusercontent.com/101136987/219873887-21e80a78-b6dc-4639-beba-77acf0bdeb7f.mp4

# Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the [REST Countries API with color theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

  - [Continued development](#continued-development)

- [Author](#author)

## Overview

### The challenge

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

- See an error page if the text in the input does not match any country

## My process

### Built with

- Typescript

- [React](https://reactjs.org/) - JS library

- [Styled Components](https://styled-components.com/) - For styles

- [Axios](https://axios-http.com/docs/intro) - To make the request to the API

### Continued development

This was a very challenging project, but I really enjoyed doing it! It was a challenge I've wanted to do for a long time, because it has to deal directly with an API in three different ways.

It was very useful and worth it, I managed to practice Typescript a lot, I tested a new tool called Axios, it helped me a lot in the construction of the Custom Hook to be able to make the request to the API in different components without having to write the same code, several times.

This was a challenge that I knew the performance of the project might not be the best due to the fact that in the beginning it had a rendering of 254 components. However, I didn't have much to do, I could have also developed with a file with static data, but I wanted to test some new things, like the Custom Hook and the Axios.

## Author

- Linkedin - [AdrianoEscarabote](https://www.linkedin.com/in/adriano-escarabote-944b02233/)

- Frontend Mentor - [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)

- Instagram - [@ogdrian](https://www.instagram.com/ogdrian/)

- Twitter - [@drianEscarabote](https://twitter.com/drianEscarabote)