Submitted over 1 year ago

REST Countries API (TypeScript, React, Context API, SWR, Playwright)

accessibility, emotion, fetch, react, typescript

Aman Singh Bhogal•1,010

@asbhogal

A solution to the REST Countries API with color theme switcher challenge

Preview Code

Solution retrospective

A refactored version of an initial challenge which pulls data about countries from around the world and lists their information, with an option to filter by region, search for a country, view more details about a country (dynamic routing) and a switch between light and dark mode. Created using TypeScript with React, styled using Material UI with skeleton loading states, SWR for client-side data fetching and Playwright for E2E and a11y testing.

Features

TypeScript for type safety
SWR for client-side data fetching from REST API endpoint
Dynamic routing for individual countries
Material UI for style and theming
Skeletons for UI component loading states
Playwright for E2E and a11y testing
Husky for running linting and a11y tests prior to git commit

Refactors

Full migration to TypeScript
Replaced useEffect and axios with SWR
Implemented skeleton loading for UI components on Dashboard
Improvements to accessibility and semantic markup on pages
Further organisation of dirs
E2E and a11y testing using Playwright (replaces Cypress)
Image fit changes (cover to contain)

Stacks

TypeScript
React
SWR
Material UI
ES Lint
Playwright
Husky
Vite

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Aman Singh Bhogal's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord