https://github.com/waldohidalgo/restcountry-app

REST Countries API with color theme switcher project. Front End Mentor Challenge solución
https://github.com/waldohidalgo/restcountry-app

frontendmentor frontendmentor-challenge restcountries-api

Last synced: about 2 months ago
JSON representation

REST Countries API with color theme switcher project. Front End Mentor Challenge solución

• Host: GitHub
• URL: https://github.com/waldohidalgo/restcountry-app
• Owner: waldohidalgo
• Created: 2024-05-11T23:36:08.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-12T18:54:50.000Z (about 2 years ago)
• Last Synced: 2025-01-26T10:11:51.811Z (over 1 year ago)
• Topics: frontendmentor, frontendmentor-challenge, restcountries-api
• Language: JavaScript
• Homepage: https://waldo-restcountry-app.vercel.app
• Size: 1000 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

Repositorio con el código solución al proyecto [REST Countries API with color theme switcher](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca)

El challenge consiste en realizar todo lo siguiente:

## 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 _(optional)_

He realizado todo lo anterior. Muestro todos los países en la homepage pero he utilizado un **paginator** creado usando React y Styled Components el cual muestra 8 países por hoja.

A continuación muestro screenshots del proyecto.

## Screenshots

#### 1.Dark Theme

##### 1.1. Home Page

###### 1.1.1. Desktop

![Home Page Dark Theme Desktop](./screenshots/home_dark_mode.webp)

###### 1.1.2. Mobile

![Home Page Dark Theme Mobile](./screenshots/home_dark_mobile.webp)

##### 1.2. Country Page

###### 1.2.1. Desktop

![Country Page Dark Theme Desktop](./screenshots/country_page_dark.webp)

###### 1.2.2. Mobile

![Country Page Dark Theme Mobile](./screenshots/country_page_dark_mobile.webp)

#### 2.Light Theme

##### 2.1. Home Page

###### 2.1.1. Desktop

![Home Page Light Theme Desktop](./screenshots/home_light_mode.webp)

###### 2.1.2. Mobile

![Home Page Light Theme Mobile](./screenshots/home_light_mobile.webp)

##### 2.2. Country Page

###### 2.2.1. Desktop

![Country Page Light Theme Desktop](./screenshots/country_page_light.webp)

###### 2.2.2. Mobile

![Country Page Light Theme Mobile](./screenshots/country_page_light_mobile.webp)