Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haquanq/fm-rest-country-api-with-theme
Solution for frontendmentor.io challenge: rest-country-api-with-theme
https://github.com/haquanq/fm-rest-country-api-with-theme
css frontendmentor frontendmentor-challenge frontendmentor-solution html javascript react tailwindcss typescript zustand
Last synced: 12 days ago
JSON representation
Solution for frontendmentor.io challenge: rest-country-api-with-theme
- Host: GitHub
- URL: https://github.com/haquanq/fm-rest-country-api-with-theme
- Owner: haquanq
- Created: 2024-09-09T00:02:21.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-10T08:50:38.000Z (5 months ago)
- Last Synced: 2024-12-06T07:42:12.785Z (2 months ago)
- Topics: css, frontendmentor, frontendmentor-challenge, frontendmentor-solution, html, javascript, react, tailwindcss, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 729 KB
- Stars: 0
- Watchers: 1
- 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
- [Project overview](#rocket-project-overview)
- [My workflow](#boat-my-workflow)
- [How to work in this repository](#astronaut-how-to-work-in-this-repository)
- [Licenses](#page_with_curl-license)
## :rocket: Project overview
### Requirements from 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)_
### Implemented features
Core features:
|Feature| State|
|---|---|
| Search for countries by name| [ ] |
| Filter countries by region| [ ] |
Accessibility features:
| Feature | State |
| ---------------- | ------------------ |
| Toggle dark/light mode | [ ] |
## :boat: My workflow
### Approach
Developed with mobile-first workflow.
### Built with
| Tool | Note |
| ------------------------------------ | -------------------- |
| `JavaScript + TypeScript` | Programming language |
| `React + Zustand (state management)` | Frontend libararies |
| `TailwindCSS` | CSS Framework |
## :astronaut: How to work in this repository
### Presequisites
Having these tools installed:
- Git (preferably the latest version)
- NodeJS (preferably the latest version)
### Clone this project to your machine
Open new terminal, run the following command:
```
git clone https://github.com/haquanq/fm-rest-country-api-with-theme.git
```
Then, run `npm install` to install all dependencies.
```
npm install
```
### Development workflow
In terminal, run `npm run dev` to start development server:
```
npm run dev
```
## :page_with_curl: License
You can do whatever you want except posting this project as your solution on [Frontend mentor](https://www.frontendmentor.io/solutions). The last person that have done this to one of my project had been banned.