Skip to content
A collage of screenshots highlighting the desktop version of the REST Countries API web application, featuring multiple cards of information about each country and a search bar

REST Countries API

A TypeScript based single-page application built in React using Hooks, React Router, React Testing Library and Jest. I used Styled Components for the styling, as well as Axios to fetch the data from a RESTful 3rd party API.

Visit website Code

Project Background

This project was a front-end challenge from Frontend Mentor, and required me to interact with a live external API by fetching data and dealing with Promises, regardless of their returned state. It was great practice at controlling their asynchronous behaviour, which I primarily achieved through conditionally rendering JSX. Styled Components made creating the theme toggle much more intuitive when working within React, alongside a custom hook to determine whether the user prefers dark mode before setting the active theme. Finally, I used React Router to direct users to the details page instead of conditionally rendering components based on a change in state. React Testing Library and Jest was further implemented to unit test components in isolation and ensure they functioned correctly.

Static Previews

Screenshot of the desktop version of the Countries App, a web application that allows users to search for countries and learn more about them A collage of screenshots highlighting the mobile version of the homepage.

Interested in doing a project together?

Contact me