Countries of the World

This application uses the REST Countries API to get info about countries on planet earth.

Table of contents

• Countries of the World
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • Project Development
    • Running the App
    • Deploying the App
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

This is a Next.js project bootstrapped with create-next-app.

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

Links

Press . on the keyboard to view this project's code in the github.dev code editor just like in Visual Studio Code

• Code: Github Repository
• Live Site: REST Countries of the World

Project Development

Running the App

• Clone the repo by running the command:

git clone https://github.com/princemuel/rest-countries.git

• Enter into the project folder:

cd rest-countries

• Install the project's dependencies:

# NOTE: This project uses pnpm as package manager but that's optional. You may delete the lockfile and install the deps using your choice of package manager

npm install
# or
yarn install
# or
pnpm install

• Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view it in the browser.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Deploying the App

Your app is ready to be deployed! The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Tailwind CSS - For composing component styles using utility classes

What I learned

<h1>Some HTML code I'm proud of</h1>

.proud-of-this-css {
  color: papayawhip;
}

const proudOfThisFunc = () => {
  console.log('🎉');
};

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Useful resources

• Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.

Author

• Website (In Development) - Prince Muel
• LinkedIn - @princemuel
• Twitter - @iamprincemuel

Acknowledgments