TV Maze Shows Browser

A modern React application for exploring TV shows from the TV Maze API. Search, browse, and view detailed information about thousands of TV shows with an intuitive and responsive interface.

Features

• 🔍 Real-time Search — Search TV shows with instant results
• 📺 Show Details — View comprehensive information including ratings, networks, schedules, and summaries
• 📄 Pagination — Browse through large result sets efficiently
• 🎨 Theme Support — Dark and light mode with Radix UI
• 📱 Responsive Design — Works seamlessly on desktop, tablet, and mobile
• ⚡ Fast & Efficient — Vite-powered development with HMR
• 🧪 Well-Tested — Comprehensive unit and integration tests with Vitest
• 🏗️ Type-Safe — Full TypeScript support for reliability
• 📦 Redux State Management — Centralized state with RTK Query for API calls

Tech Stack

Category	Technology
Framework	React 19 with TypeScript
Build Tool	Vite
State Management	Redux Toolkit + RTK Query
UI Components	Radix UI Themes
Routing	React Router v7
Testing	Vitest + React Testing Library
Code Quality	ESLint + Prettier
Icons	Lucide React
Utilities	DOMPurify (HTML sanitization)

Getting Started

Prerequisites

• Node.js 18.x or 20.x
• npm

Installation

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Production-ready files will be in the dist/ directory.

Preview Production Build

npm run preview

Project Structure

src/
├── app/                      # Application setup
│   ├── router.tsx           # Route configuration with lazy loading
│   ├── store.ts             # Redux store with RTK Query
│   └── routes.ts            # Route constants
│
├── pages/                    # Page components
│   ├── shows/               # Shows browse page with search & filtering
│   ├── show/                # Individual show detail page
│   ├── terms/               # Terms and conditions page
│   └── privacy/             # Privacy policy page
│
├── features/                # Feature modules (isolated, reusable)
│   ├── search-bar/          # Search input component
│   ├── shows/               # Shows list component
│   ├── show-card/           # Individual show card display
│   ├── show/                # Show details components (hero, summary, schedule)
│   ├── pagination/          # Pagination controls
│   ├── sort-panel/          # Sorting/filtering options
│   └── loading/             # Loading UI
│
├── entities/                # Business logic entities
│   └── Show.ts              # Show interface definition
│
├── shared/                  # Shared resources
│   ├── api/                 # RTK Query API definitions
│   │   ├── showsApi.ts      # Shows CRUD operations
│   │   └── themeApi.ts      # Theme preferences API
│   ├── hooks/               # Custom hooks
│   │   ├── useShowSearch.ts # Search logic hook
│   │   └── useThemeMode.ts  # Theme toggle hook
│   ├── providers/           # Context providers
│   ├── ui/                  # Layout components
│   ├── types/               # TypeScript interfaces
│   └── styles/              # Global styles
│
├── lib/                     # Utility functions
│   └── errors.ts            # Error handling utilities
│
└── styles/                  # Global CSS

Available Scripts

Command	Description
npm run dev	Start development server with HMR
npm run build	Type-check & build for production
npm run preview	Preview production build locally
npm run lint	Run ESLint code quality checks
npm run test	Run test suite with Vitest
npm run test:ui	Run tests with interactive UI dashboard

API Integration

The application uses the TV Maze API with no authentication required.

Main Endpoints

• GET /shows — List all shows (paginated)
• GET /shows/{id} — Get detailed information about a show
• GET /search/shows?q={query} — Search shows by name

All API calls are handled through Redux Toolkit Query for automatic caching, deduplication, and state management.

Testing

# Run all tests
npm run test

# Watch mode
npm run test -- --watch

# Interactive UI
npm run test:ui

# Coverage report
npm run test -- --coverage

Code Quality

Linting

npm run lint

ESLint enforces TypeScript best practices and React conventions.

Formatting

Prettier automatically formats code on commit via lint-staged git hooks.

CI/CD Pipeline

GitHub Actions workflows automate:

• CI (.github/workflows/ci.yml) — Linting, type-checking, and tests on every PR and push to main/dev
• Build & Deploy (.github/workflows/build-deploy.yml) — Build artifacts on pushes to main
• Security (.github/workflows/security.yml) — Dependency vulnerability scans

Performance Optimizations

• Code splitting with React lazy loading
• RTK Query caching and deduplication
• Vite fast module replacement
• Image optimization in show cards
• Responsive component design

Contributing

1. Create a branch from dev: git checkout -b feature/your-feature
2. Make your changes and commit: git commit -am 'Add feature'
3. Push to your branch: git push origin feature/your-feature
4. Open a Pull Request to dev

All PRs must pass CI checks (linting, type-checking, and tests).

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)