If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API. The challenge is to integrate with the REST Countries V2 API to pull country data and display it like in the designs. You can use any JavaScript framework/library on the front end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.
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).
I do not have access to the Figma sketch so the design is not pixel-perfect.
- Semantic HTML5 markup
- CSS custom properties
- Flex
- Desktop-first workflow
- React
- TypeScript
- Rest Countries API
Another fun project to practice React along with API. I have worked with other APIs however mostly with static URLs. This one was a bit harder because I had to change the request depending on the input as well. I am currently working on filtering by region. I did make it work however I had to change some tags to make the options field editable, another new thing I found out recently. Instead of changing it via JS, I tried to change it to list tags but instead, the functionality stopped working. Another hard thing I did not manage yet, is changing country borders. The URL I am getting requests from is giving me country code names instead of full names and I am unsure how to change it back to full names. I also finally started to understand how to use states depending on whether it's a class or function component!
This project serves as a project to show off my personal skills. I do not accept any contributions like pull requests to this project however if you have any suggestions or ideas feel free to message me or submit an idea in the discussions. Otherwise, you are free to fork this project and change it for your own purposes.
- Figma - Paste your design image to check the size of containers, width, etc.
- Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.
- Rest Countries API - information about countries via a RESTful API
- Framer Motion - React library for animations
A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent