Flag Search

An interactive reference site for discovering the world's country flags. Explore flags by filtering through different regions and seamlessly toggle between a dark and light theme. For added convenience, you can download any flag in either SVG or PNG format.

This project demonstrates a modern stack: React 18 with Next.js 14, Material UI (MUI 5) with Emotion for styling, and Zustand for lightweight state management.

🌐 Live Demo: flagsearch.netlify.app

Features

• Search by country name
• View and download SVG flags
• Light/Dark mode toggle

Tech Stack

• Next.js 14 + React 18.3
• TypeScript 5
• Material UI (MUI 5) + Emotion
• Zustand 4 (state management)
• REST Countries API (external data source)
• ESLint (linting)
• Deployment: Netlify

Getting Started

Prerequisites

• Node.js 16+
• npm 7+

1. Clone the repo

git clone https://github.com/JGallardo/flag-search.git
cd flag-search

2. Install dependencies

npm install

3. Run the development server

npm run dev

Then open http://localhost:3000 in your browser.

4. Build for production

npm run build
npm run start

5. Lint (optional)

npm run lint