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.
Note: Delete this note and update the table of contents based on what sections you keep.
The challenge is to build out this QR code component and get it looking as close to the design as possible.
Light Mode:
Dark Mode:
- Solution URL: Git Repository
- Live Site URL: Live Preview
I started out by bootstrapping the project with create-react-app and then I created the necessary components and styles for the project. I then imlemented the logic for the theme switcher and the search functionality. I then added the data from the API and styled the components to match the design.
- React
- CSS
- Grid
- Tailwind CSS
Note: These are just examples. Delete this note and replace the list above with your own choices
I got to learn how to use the fetch API to get data from an external API and how to use the useState hook to manage state in a functional component. I also got to learn how to use the useEffect hook to perform side effects in a functional component.
I plan to continue learning more about React and how to use it to build more complex applications. I also plan to write unit tests and integration tests for this very soon.
React- This is a UI library for building user interfaces. It is very easy to learn and use.React Router- This is a routing library for React. It is very easy to use and has a lot of features.Tailwind- This is a utility-first CSS framework. It is very easy to use and has a lot of features. It helped me in styling my components and making my styling time much faster.
- Website - sadly no personal website yet, but you can check out my linked in profile here
- Frontend Mentor - @murytarlah
- Twitter - @murytarlah