Skip to content

Frontendmentor.io Challenge REST countries API with theme switcher

Notifications You must be signed in to change notification settings

LikeKugi/rest-countries

Repository files navigation

Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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
  • Toggle the color scheme between light and dark mode (optional)

Screenshot

light theme dark theme details

Links

My process

Built with

  • Semantic HTML5 markup
  • Sass
  • TypeScript
  • React - JS library
  • Redux - A Predictable State Container for JS Apps
  • Vite - Next Generation Frontend Tooling
  • Axios - Promise based HTTP client for the browser and node.js
  • ESLint - ESLint statically analyzes your code to quickly find problems
  • Prettier - An opinionated code formatter

What I learned

I learned variables in CSS with SCSS modules in React

// .eslintrc.cjs
module.exports = {
  "rules": {
    "react/react-in-jsx-scope": "off",
  }
};

Continued development

Next I want to learn about tests in React

Useful resources

Author

Acknowledgments

I've just completed a front-end coding challenge from @frontendmentor! 🎉

You can see my solution here: https://www.frontendmentor.io/solutions/rest-api-countries-with-typescript-react-redux-eslint-prettier-vite-fExd3OcuzA

Any suggestions on how I can improve are welcome!

About

Frontendmentor.io Challenge REST countries API with theme switcher

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published