React Dog Breeds App

A small but polished React application that lets you browse dog breeds using a public API, with a clean Material UI data grid, search filtering, and a light/dark theme toggle.

Built with React + Vite + MUI (Material UI) and deployed on Vercel.

---

🚀 Live Demo

👉 Live app: https://react-dog-breeds-app.vercel.app

---

✨ Features

• 🔄 Fetches real dog breed data from the public Dog API
• 📊 Displays data in a Material UI DataGrid
• 🔍 Search by breed name with instant client-side filtering
• 🌗 Light / Dark mode toggle using MUI theming + React Context
• 🎯 Clean separation of pages and components
• 📱 Responsive layout with full-width table and modern styling

---

🧱 Tech Stack

• React (via Vite)
• Material UI (MUI)
• MUI X Data Grid
• Dog API – public dog breeds API

---

🗂 Project Structure

📁 src
├── 📁 components
│   └── 📄 DogBreedsTable.tsx        # Reusable MUI DataGrid for breed listing
├── 📁 pages
│   └── 📄 DogBreeds.tsx             # Main page: fetch, search, modal, image loading
├── 📁 utils
│   └── 📄 breedNameToUrl.ts         # Normalizes breed names for dog.ceo API
├── 📁 context
│   └── 📄 ColorModeContext.tsx      # Light/Dark theme context + toggle
├── 📁 theme
│   └── 📄 theme.ts                  # getTheme(mode) → MUI Theme configuration
├── 📄 App.tsx                       # App root component
├── 📄 main.tsx                      # Entry point: wraps app with providers + ThemeProvider
└── 📄 index.css                     # Base global styles
  

⚙️ Getting Started (Local Development)

1. Clone the repo git clone https://github.com/edwardgnt/react-dog-breeds-app.git
   cd react-dog-breeds-app

2. Install dependencies npm install

3. Run the dev server npm run dev

4. Build for production npm run build

---

Data Fetching GET https://dogapi.dog/api/v2/breeds