https://github.com/debski-patrick/where-in-the-world
A website that allows people to search information about countries.
https://github.com/debski-patrick/where-in-the-world
autoprefixer frontend-mentor javascript reactjs restcountries-api tailwindcss vite
Last synced: 7 months ago
JSON representation
A website that allows people to search information about countries.
- Host: GitHub
- URL: https://github.com/debski-patrick/where-in-the-world
- Owner: debski-patrick
- Created: 2024-03-26T11:10:26.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-26T11:12:32.000Z (over 1 year ago)
- Last Synced: 2025-01-31T04:26:02.982Z (9 months ago)
- Topics: autoprefixer, frontend-mentor, javascript, reactjs, restcountries-api, tailwindcss, vite
- Language: JavaScript
- Homepage: https://where-world.vercel.app
- Size: 313 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Where in the World?
A website that allows you to search information about countries. 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). Made with the [Rest Countries API](https://restcountries.com)
[Live Page][live-page]
Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [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
- Toggle the color scheme between light and dark mode
Additional features:
- URL path handling
- Back to top button
- Dark mode detection and saving themes to localStorage
### Screenshots
### Links
- [Live Page][live-page]
## My process
### Built with
- Flexbox
- CSS Grid
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev)
- [TailwindCSS](https://tailwindcss.com)
- [Rest Countries API](https://restcountries.com)
### What I learned
This challenge was a great learning opportunity. I worked on different topics that helped me improve my knowledge of technologies such as React, Tailwind, Fetch and of course JS.
I also added some new features like the theme switch button or the path handling, for the latter I initially thought to use React Router but due to some changes of ideas React Router was no longer necessary so I decided to do the path handling with vanilla JS.
[live-page]: https://where-world.vercel.app