Countries API Application

Welcome! 👋

Your challenge is to integrate with the REST Countries API to pull country data and display it like in the designs.

You should use React.

Goals for Version 1 of the project:

• Mobile responsive application build with React.js/Vite
• Code deployed to a URL through a Github repo
• As a user, I can see all countries from the API on the homepage, with data displayed about each country
• As a user, I can search for a country using an input field
• As a user, I can submit a form with my information

Stretch goals for the project (not required for assignment completion)

• As a user, I can filter countries by region
• As a user, I can toggle the color scheme between light and dark mode
• As a user, I can click on a country to see more detailed information on a separate page
• As a user, I can click through to the border countries on the detail page
• As a user, I can add a country to my Saved Countries list (note: we will work on this during a later version of the project)

⚠️ NOTE ⚠️: Sometimes the REST Countries API can go down. We've added a data.json file with all the country data. You should use this as a backup, if the API responds with an error.

Where to find everything

You will need to use this Figma file for the designs

There are no assets for this challenge, as the country flags will be pulled from the REST Countries API and you can use an icon font library for the icons.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

Building your project

1. Initialize your project as a public repository on GitHub. Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, have a read-through of this Try Git resource.
2. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles.
3. Write out the base styles for your project, including general content styles, such as font-family and font-size.
4. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
5. Feel free to use a UI library like Chakra to help create your components.

Deploying your project

As mentioned above, there are many ways to host your project for free. Our recommended hosts are:

• Netlify
• Vercel