Skip to content

README.md

Latest commit

 

History

History
95 lines (65 loc) · 4.01 KB

README.md

File metadata and controls

95 lines (65 loc) · 4.01 KB
Raw

Around the Globe

A React and TypeScript country explorer for searching and filtering 250 country and territory records, opening detailed profiles, and navigating between bordering countries.

Live Demo React TypeScript

The current public deployment reflects the latest published commit. The routing and accessibility repairs in this working branch will be deployed only after review.

Features

  • 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

Data

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.

Built With

  • 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

Getting Started

Prerequisites

Install a current Node.js LTS release and npm.

Installation

git clone https://github.com/GlitchingghosT/around-the-globe.git
cd around-the-globe
npm install
npm run dev

Open the local URL printed by Vite.

Available Scripts

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

Routing and Deployment

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.

Accessibility

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.

Known Limitations

  • 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.

Attribution

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.

Author

BishopDGreat — Emmanuel Nwachinemere