Skip to content

Latest commit

 

History

History
128 lines (91 loc) · 4.43 KB

README.md

File metadata and controls

128 lines (91 loc) · 4.43 KB
Raw

Here’s the README content formatted as a Markdown file:

Frontend Mentor - REST Countries API Challenge

This is a solution to the REST Countries API Challenge. This project demonstrates skills in building a responsive web application using React, including handling APIs, managing state, and implementing a theme switcher.

Table of contents

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 (I need to work on that)
  • Toggle the color scheme between light and dark mode

Screenshot

Screenshot Screenshot Screenshot

This screenshot shows the homepage with a list of countries, the search and filter options, and an example of the detail page for a selected country.

Links

My process

  • I show up on time.
  • I do my prayers.
  • I do the work.
  • One thing at a time.
  • Next day, I repeat.

The process is about showing up daily and doing the work, over and over again.

I also keep a .md file that I think the problem, keep to-dos organized. It's a VSCode extension that helps me to keep everything in it's place.

Notes - VSCode Extension:

Screenshot

Built with

What I'm really learning and training

The importance of sitting down and do my thing: study, code, repeat.

The programming thing? I got hands-on experience with handling API requests, setting up a React routing system, and solving bugs. I ended up writing some spaghetti code, but you know what? It works! The code isn't perfect, but today I'm better than yesterday.

Handling API calls and managing state:

useEffect(() => {
  async function fetchCountry() {
    try {
      const response = await fetch(
        `https://restcountries.com/v3.1/name/${countryName}`
      )
      const data = await response.json()
      setCountry(data[0])
    } catch (error) {
      console.log("Error fetching country data:", error)
    }
  }
  fetchCountry()
}, [countryName])

Implementing dark/light mode with Tailwind CSS:

<button onClick={toggleTheme} className="bg-white dark:bg-dark-blue">
  Toggle Theme
</button>

Continued development

Keep doing my thing. Keep beating resistence.

Useful resources

  • Tailwind CSS Documentation - The official Tailwind CSS documentation was essential in quickly setting up and customizing the app's design.
  • React Router Documentation - Helped me understand how to manage navigation and routing between the country list and detail pages.

Author

Acknowledgments

Huge thanks to Steven Pressfield for writing The War of Art, which inspired me to push through resistance and keep creating, and to Prof. Lúcia Helena for her philosophy teachings that continuously guide my thinking and approach to learning.