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

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