A React and TypeScript country explorer for searching and filtering 250 country and territory records, opening detailed profiles, and navigating between bordering countries.
The current public deployment reflects the latest published commit. The routing and accessibility repairs in this working branch will be deployed only after review.
- Search countries by name
- Filter countries by region with a labelled native select
- View population, capital, region, currencies, languages, and domain data
- Navigate directly to bordering-country profiles
- Switch between light and dark themes
- Display a clear empty state when filters return no results
- Display a country-not-found state for invalid detail routes
- Support direct SPA routes through a Vercel rewrite configuration
The application renders a bundled JSON snapshot containing 250 country records. It does not make a live API request at runtime, so the data should not be treated as real-time or authoritative. A future version should document the snapshot date and refresh process.
- React — component-based interface
- TypeScript — typed country data and component contracts
- React Router — country detail and border navigation
- Tailwind CSS — responsive layout and theme styling
- Vite — development and production builds
- Vitest — component regression tests
- Vercel — deployment
Install a current Node.js LTS release and npm.
git clone https://github.com/GlitchingghosT/around-the-globe.git
cd around-the-globe
npm install
npm run devOpen the local URL printed by Vite.
| Command | Purpose |
|---|---|
npm run dev |
Start the Vite development server |
npm test |
Run the Vitest suite |
npm run lint |
Run ESLint |
npm run build |
Type-check and build the production bundle |
npm run preview |
Preview the production build locally |
Country pages use routes in the form:
/country/Nigeria
vercel.json rewrites unknown requests to index.html so direct links and browser refreshes can be handled by React Router. This configuration must be verified against the deployed Vercel project after publication.
The project uses semantic links and buttons, a labelled native region selector, meaningful flag alternatives, visible empty/not-found states, and labelled theme controls. Additional automated accessibility coverage and theme contrast checks remain planned.
- The country dataset is a static snapshot with no documented refresh date.
- All 250 country records are bundled into the initial JavaScript payload.
- The production build currently reports a large-chunk warning.
- Theme choice is not yet persisted between visits.
- Broader route, filter, and accessibility tests are still needed.
This project is an implementation of the REST Countries API with color theme switcher challenge from Frontend Mentor. The design brief and supplied assets belong to their respective owners. This repository documents Emmanuel Nwachinemere's implementation and technical decisions.
BishopDGreat — Emmanuel Nwachinemere
- GitHub: @GlitchingghosT
- LinkedIn: Emmanuel Nwachinemere
- Email: nwachinemereemmanuel43@gmail.com