https://github.com/semmyk/countries-finder

https://github.com/semmyk/countries-finder

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/semmyk/countries-finder
• Owner: SemmyK
• Created: 2023-11-02T22:31:51.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-03T13:38:28.000Z (about 1 year ago)
• Last Synced: 2024-11-23T12:13:30.021Z (2 months ago)
• Language: JavaScript
• Homepage: https://countries-finder-ten.vercel.app
• Size: 1.79 MB
• 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

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

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

- Click through to the border countries on the detail page

- Toggle the color scheme between light and dark mode _(optional)_

### Screenshot

![](./public/design//desktop-preview.jpg)

### Links

- Solution URL: [Vercel deployed Project](https://your-solution-url.com)

## My process

### Built with

- Mobile-first workflow

- [Next.js](https://nextjs.org/) - React framework

- [Tailwind CSS](https://tailwindcss.com/) - For styles

- [react-tailwindcss-select](https://www.npmjs.com/package/react-tailwindcss-select) - For filtering countries by region

### What I learned

This project was a great challenge to practice Next.js and TailwindCSS to build up the website.

I learned a little bit more about Images in Next.js and all the style possibilities with Tailwind.

### Continued development

I am planning to use this project to practice Jest and Docker also, since I started to learn testing and handling containers I believe this project will be perfect for practice.

### Useful resources

- My primary resources are always documentation websites, if that doesn't help then I turn to Google, YouTube, Stackoverflow, or ChatGPT.

### Useful resources

- [Tailwind dark/light mode](https://www.youtube.com/watch?v=RTAJ-enfums) - This helped me to resolve the hydration issue that adding dark/light theme with package next-themes [npm next-theme](https://www.npmjs.com/package/next-themes) was causing. I really liked this pattern and will use it going forward.

## Author

- Portfolio - [Portfolio](https://portfolio2023-git-master-semmyk.vercel.app/)

- Frontend Mentor - [@Semmy](https://www.frontendmentor.io/profile/JSdevS-coder)

- LinkedIn - [@semira](https://www.linkedin.com/in/semira-kubat-81724720a/)

## Acknowledgments

Big thank you to Hamed Bahram - [YouTube channel](https://www.youtube.com/@hamedbahram) for his Next.js 13 tutorials are just a gem in a sea of stones.