https://github.com/richardcyrus/fm-rest-countries-api-app
This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor
https://github.com/richardcyrus/fm-rest-countries-api-app
axios frontend-mentor headless-ui heroicons-react prop-types reach-ui react-query react-router-v5 reactjs
Last synced: 10 months ago
JSON representation
This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/richardcyrus/fm-rest-countries-api-app
- Owner: richardcyrus
- Created: 2021-07-27T19:55:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-16T23:56:53.000Z (over 3 years ago)
- Last Synced: 2025-01-22T09:49:43.411Z (12 months ago)
- Topics: axios, frontend-mentor, headless-ui, heroicons-react, prop-types, reach-ui, react-query, react-router-v5, reactjs
- Language: JavaScript
- Homepage: https://fm-rest-countries-api-app.vercel.app
- Size: 1.67 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
To integrate with the [REST Countries API](https://restcountries.com/) to pull country data and display it like in the reference designs.
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)_
### Screenshot
#### Project Screenshots
- [Desktop Home Light](./design/screenshots/desktop-screenshot-home-light.png)
- [Desktop Home Dark](./design/screenshots/desktop-screenshot-home-dark.png)
- [Desktop Detail Light](./design/screenshots/desktop-screenshot-detail-light.png)
- [Desktop Detail Dark](./design/screenshots/desktop-screenshot-detail-dark.png)
- [Mobile Home Light](./design/screenshots/mobile-screenshot-home-light.png)
- [Mobile Home Dark](./design/screenshots/mobile-screenshot-home-dark.png)
- [Mobile Detail Light](./design/screenshots/mobile-screenshot-detail-light.png)
- [Mobile Detail Dark](./design/screenshots/mobile-screenshot-detail-dark.png)
#### Reference images
- [Desktop Home Light](./design/reference/desktop-design-home-light.jpg)
- [Desktop Home Dark](./design/reference/desktop-design-home-dark.jpg)
- [Desktop Detail Light](./design/reference/desktop-design-detail-light.jpg)
- [Desktop Detail Dark](./design/reference/desktop-design-detail-dark.jpg)
- [Mobile Home Light](./design/reference/mobile-design-home-light.jpg)
- [Mobile Home Dark](./design/reference/mobile-design-home-dark.jpg)
- [Mobile Detail Light](./design/reference/mobile-design-detail-light.jpg)
- [Mobile Detail Dark](./design/reference/mobile-design-detail-dark.jpg)
### Links
- [Solution](https://www.frontendmentor.io/solutions/rest-countries-api-react-react-query-axios-onvnxlOSc)
- [Repository](https://github.com/richardcyrus/fm-rest-countries-api-app)
- [Live Site](https://fm-rest-countries-api-app.vercel.app/)
## My process
### Built with
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
- Semantic HTML5 markup
- [Axios](https://axios-http.com/)
- [cypress](https://www.cypress.io/)
- [Heroicons](https://heroicons.com)
- [Vite.js](https://vitejs.dev/) - a build tool that aims to provide a faster and leaner development experience for modern web projects
- [Reach UI](https://reach.tech/)
- [React Router](https://reactrouter.com/)
- [React Query](https://react-query.tanstack.com/)
- [React](https://reactjs.org/) - JS library
### Useful resources
- [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Set up Light and Dark Theme in React](https://milddev.com/react/set-up-light-and-dark-theme-in-react/)
- [A Dark Mode Toggle with React and ThemeProvider](https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/)
- [Guide to Advanced CSS Selectors - Part One](https://moderncss.dev/guide-to-advanced-css-selectors-part-one/#attribute-selector)
- [Test Your Web App in Dark Mode](https://www.cypress.io/blog/2019/12/13/test-your-web-app-in-dark-mode/)
- [Debouncing with React Hooks](https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci)
- [React Query Data Transformations](https://tkdodo.eu/blog/react-query-data-transformations)
- [Hints for Adding Data-cy Attributes for Cypress Testing](https://haase1020.medium.com/hints-for-adding-data-cy-attributes-for-cypress-testing-998e8f64f325)
- [Dynamically Importing Components with React.lazy](https://www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/)
- [Example setup for using msw with vitejs](https://github.com/msutkowski/msw-ts-vitejs)
## Author
- Website - [www.richardcyrus.com](https://www.richardcyrus.com)
- Frontend Mentor - [@richardcyrus](https://www.frontendmentor.io/profile/richardcyrus)