Countries React App

Overview

An interactive app that lets users browse, search, and filter countries from the REST Countries API. Users can view country details, explore bordering nations, and switch between light and dark themes.

Live site · Source code

Background

This project started as an independent build after the first few chapters of The Joy of React. The goal was to apply recently learned fundamentals - composition, hooks, state, effects - to a real API-driven app, without step-by-step guidance.

I found Frontend Mentor’s REST Countries challenge and used it as a base to practise structuring a React app, organising state, and handling asynchronous data.

Features

• Browse and search countries from the REST Countries API
• Filter by region
• View country details, including border countries
• Toggle between light and dark mode
• Pagination for large result sets
• Local fallback data when the API fails

Tech Stack

• React (built with hooks, and custom hooks)
• Styled Components for styling and theming
• Manual project setup with Parcel (no CRA/Vite) to understand tooling basics
• Semantic HTML and accessibility best practices
• CSS Grid and Flexbox for layout

Key Learnings

• Project setup and structure: configuring a React app from scratch, organising helpers, constants, and component files.
• Component design: breaking down a large “main content” component into smaller, focused parts.
• React patterns: prop delegation, effects with cleanup, memoisation, and derived state.
• Styling: using ThemeProvider for consistent theming, experimenting with design tokens and reusable styled components.
• Accessibility: improving keyboard navigation and semantics using utilities like VisuallyHidden.
• Resilience: handling API timeouts and error states gracefully.

Code Highlight: Handling Fetch Timeouts

One of the most satisfying parts of the build was improving how the app handled unreliable API responses. I used an AbortController to cancel requests after 5 seconds and fall back to local data - making the UI feel more resilient.

async function fetchWithTimeout(endpoint) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);

  try {
    const res = await fetch(endpoint, { signal: controller.signal });
    clearTimeout(timeoutId);
    return res;
  } catch (err) {
    clearTimeout(timeoutId);
    throw err;
  }
}

This helped me understand cleanup functions, error handling, and how to think about failure states when fetching data in a React app.

Continued Development

• Improve accessibility (e.g. using prefers-reduced-motion and prefers-color-scheme).
• Add sorting (by country name or population).
• Improve the design system further (rework elevation and shadows for dark mode).
• Refine the CSS (fluid spacing, CSS variable organisation).
• Simplify state flow - possibly using context for the search form.

Reflection

Building this app was slow at first - starting from a single component and gradually shaping it into something structured. By the end, I'd like to think I not only improved my understanding of how React works, but improved my ability to think in React: how to build incrementally, abstract intentionally, and handle edge cases with care.

Links

• Live site: fabulous-dodol-b93b05.netlify.app
• Source code: GitHub

function Select({ id, value, children, ...delegated }) {
  const displayedValue = getDisplayedValue(value, children);

  return (
    <Wrapper>
      <NativeSelect id={id} value={value} {...delegated}>
        {children}
      </NativeSelect>
      <PresentationalBit>
        {displayedValue}
        <IconWrapper>
          <ChevronDown size={24} strokeWidth={1} />
        </IconWrapper>
      </PresentationalBit>
    </Wrapper>
  );
}

React.useEffect(() => {
  setCurrentPage(1);
}, [searchTerm, region]);

const handleSearchTermChange = (term) => {
  setSearchTerm(term);
  setCurrentPage(1);
};

const handleRegionChange = (region) => {
  setRegion(region);
  setCurrentPage(1);
};