Regular Show UI

An interactive data explorer for the Regular Show API. This project showcases character, episode, location, and statistics data from the Regular Show animated series.

Tech Stack

• Framework: Next.js 16 with Turbopack
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS 4
• Components: Radix UI primitives
• Charts: Recharts
• Icons: Lucide React
• Forms: React Hook Form + Zod
• Theme: next-themes (dark/light mode)

Project Structure

regular-show-ui/
├── app/                    # Next.js App Router
│   └── page.tsx           # Main page
├── components/
│   ├── ui/                # Reusable UI components (shadcn/ui)
│   ├── navbar.tsx         # Navigation
│   ├── hero-section.tsx   # Hero with animated background
│   ├── marquee-banner.tsx # Scrolling banner
│   ├── characters-explorer.tsx
│   ├── episodes-section.tsx
│   ├── locations-explorer.tsx
│   ├── stats-dashboard.tsx
│   └── footer.tsx
├── hooks/                  # Custom React hooks
├── lib/                   # Utilities
├── public/                # Static assets
└── styles/               # Global styles

Getting Started

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Open http://localhost:3000

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Features

• Character explorer with search and filtering
• Episode browser by season
• Location directory
• Statistics dashboard with charts
• Responsive design
• Dark/light theme support

Data Source

Data is fetched from the Regular Show API.

License

MIT License - see LICENSE file for details.