Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexbelloni/countrix

REST Countries API using React with color theme switcher from frontendmentor.io
https://github.com/alexbelloni/countrix

accessibility frontendmentor react react-query react-router-dom styled-components

Last synced: 4 days ago
JSON representation

REST Countries API using React with color theme switcher from frontendmentor.io

Host: GitHub
URL: https://github.com/alexbelloni/countrix
Owner: alexbelloni
Created: 2020-08-06T21:51:57.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-07-03T13:15:35.000Z (over 2 years ago)
Last Synced: 2024-11-09T20:15:41.829Z (2 months ago)
Topics: accessibility, frontendmentor, react, react-query, react-router-dom, styled-components
Language: JavaScript
Homepage: https://countrix.netlify.app/
Size: 948 KB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Countrix

[![Netlify Status](https://api.netlify.com/api/v1/badges/2fef420a-2635-4f81-891e-def65c1ea022/deploy-status)](https://app.netlify.com/sites/countrix/deploys)

## Introduction
Countrix is an educational platform, which presents information about all countries such as its flag, population, and capital city. There are two options of searching: by name or region. The click on a country brings more details about it.

[Website](https://countrix.netlify.app/)

## Challenge
This project is based on a FrontMentor [challenge](https://bit.ly/3ikC9I1), which allows the developer to improve your skills in a real-life workflow.
The challenge is to integrate with the [REST Countries API](https://restcountries.eu) to pull country data and display it like in the designs.

## Requeriments
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

## Main technologies
- Reactjs with routes
- Styled-Components
- Hooks - such as useQuery and useState

## Next Steps
It's a work in progress. When praticing or reviewing a tech subject, I'll apply here.
- Google Maps
- Acessibility

## Open Source
[Website](https://countrix.netlify.app/)
[GitHub](https://github.com/alexbelloni/countrix)

Cross Browser Testing tools:
browserstack
cypress com

componentes no storybook