Add gamification mode and modernize UI with dark/light theme

[Copilot]

Transforms the countries browser into an educational platform with dual modes: traditional browsing and an interactive geography challenge game where users navigate between countries via shared borders.

Changes

New Features

• Welcome page with mode selection (Browse/Play)
• Game mode: Navigate from random start country to target via neighboring countries. Tracks path and move count, displays victory screen.
• Dark/light theme toggle with localStorage persistence

UI Modernization

• Applied consistent dark mode styling (blue-950/900 palette) across all components
• Enhanced cards with hover animations (-translate-y-2 + shadow transitions)
• Improved search bar, filter dropdown, and country detail pages
• Maintained responsive design

Routing

// Updated structure
<Route path="/" element={<WelcomePage />} />
<Route path="browse" element={<HomePage />} />
<Route path="game" element={<GamePage />} />
<Route path=":countryCode" element={<CountryPage />} />

Edge Cases Handled

• Countries without borders (displays warning, allows new game)
• Missing country names (falls back to country code)
• Theme preference restoration on mount
• Dark mode error states

Screenshots

Welcome Page - Light/Dark

Game Mode

Browse Page

Files Changed

• New: WelcomePage.tsx, GamePage.tsx
• Enhanced: Root.tsx, HomePage.tsx, CountryPage.tsx, CountryCard.tsx, CountryCardSkeleton.tsx
• Routing: main.tsx

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• restcountries.com
  • Triggering command: /usr/bin/curl curl -s REDACTED,flags,population,region,capital,cca3 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

I want to change the UI of this app and implement a "gamification" logic.

It's a React app about browsing and seeing information about countries, but the UI (tailwindcss) looks kinda basic. I want to improve it so it looks professional, has dark mode and light mode, has a modern look and it's responsive (I think it already is responsive but I don't want it to break)

To the gamification part, I thought of it because when seeing a country info, you can go to the countries that are in its border. So I thought, how cool would it be so you can learn with this app and play around with it. So I thought in this: first there's a welcome screen where it asks you if you want to browse freely or you want to play (worded like something fun like the google search with luck). If the user selects playing, they'll go to a random country, and then they'll be asked to go to another country going neighbor by neighbor. For example, if the user gets Colombia as its first country, and their mission is to go to Argentina, they can go to Venezuela -> Brasil -> Argentina. And they win :)

Of course if they choose browse they can see a more boring/basic navigation of countries by continent, etc

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
countries-api	Ready	Preview	Comment	Dec 3, 2025 10:48pm