Svelte Rest Countries Api

Twiztss

Simple Svelte UI for displaying countries API https://restcountries.com/

Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview
My process
Author

Overview

The challenge

Application of dark-light theme in certain aspect including in smaller components where props are passed down.
Spacing within layout which have to be contained in screen height without scrolling.

Feature

See countries from the API on the homepage
Search for a country using an input field
Filter countries by region
Click on a country to see more detailed information on a separate page
Click through to the border countries on the detail page
Toggle the color scheme between light and dark mode (optional)

Screenshot

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
Svelte - Modern JavaScript framework
TypeScript - Type safety and better development experience
Tailwind CSS - Utility-first CSS framework
Vite - Fast build tool and development server
REST Countries API - For country data

What I learned

This project helped me understand:

Svelte 5's reactivity system with $state, $derived, and $effect
TypeScript integration in Svelte components for better type safety
Responsive design patterns using Tailwind CSS utility classes
State management in Svelte applications
API integration and data fetching with proper error handling
Dark/light theme switching with CSS custom properties and Tailwind

Key code examples:

<!-- Reactive state management -->
let darkMode = $state(true)
let countries = $state<Country[] | null>(null)

<!-- Derived values -->
let results = $derived(countries?.filter(country => {
  if (filter != "All") return country.region == filter
  else return true
}).filter((country : Country) => 
  country.name.common.toLowerCase().includes(query ? query.toLowerCase() : "")
))

/* Dynamic theme switching with Tailwind */
<main class="transition-colors duration-200 {darkMode ? 'bg-[#202C37] text-white' : 'bg-white text-black'}">

Continued development

Possible updates of features within current/future projects:

Performance optimization - Improve API calls and debouncing for reducing API loads for large country lists/details
Advanced filtering - Add more sophisticated search and filter options
Accessibility improvements - Better keyboard navigation and screen reader support
Layouts - Displays UI card in different aesthetics and layouts rather than lists

Useful resources

Svelte Documentation - Excellent official docs with interactive examples
Tailwind CSS Documentation - Comprehensive utility-first CSS framework
REST Countries API - Free API for country data
Frontend Mentor - Great platform for practicing frontend skills

Author

GitHub - @twiztss
Frontend Mentor - @twiztss
Live Demo - REST Countries App

Top categories