tMovies is a movie discovery application built with React JS, TypeScript, and Tailwind CSS,
which allows users to search, view trailers, and manage a personal watchlist for movies and TV series.

View Demo · Features · What's New · Getting Started

Original Project

This project is a fork of Sudeep Mahato's movie-app, an excellent React movie application with TMDB API integration.

Original Repository: https://github.com/sudeepmahato16/movie-app

The original project provided a solid foundation with:

• Movie and TV series search functionality
• Trailer viewing via YouTube integration
• Detailed movie information (cast, crew, ratings)
• Responsive design with dark/light theme support

What's New

This fork extends the original project with new features and improvements, inspired by Peter Yang's video on building AI coding projects.

Watchlist Feature

A complete personal watchlist system that allows users to:

• Add/Remove Items - Bookmark movies and TV shows from any page (home, catalog, detail)
• Track Watch Status - Categorize items as "Want to Watch", "Watching", or "Watched"
• Personal Notes - Add notes to each item for personal reminders
• Filter & Organize - Filter watchlist by status category
• Export Data - Export your entire watchlist as JSON for backup
• Persistent Storage - All data saved to localStorage (no account required)

Automated Testing

Comprehensive end-to-end test suite using Playwright:

• 9 Test Cases covering all watchlist functionality
• 100% Pass Rate with stable, non-flaky tests
• CI/CD Ready with GitHub Actions workflow template
• Fast Execution (~10-15 seconds for full suite)

Code Quality Improvements

• Fixed localStorage race conditions in context providers
• Improved component architecture for better testability
• Added proper data-testid attributes for testing
• Organized documentation into structured folders

Features

Core Features (Original)

1. Search Movies and TV Series

   • Search for your favorite movies and TV series
   • View trailers directly in the app

2. Detailed Movie Information

   • Comprehensive details including cast, crew, and ratings
   • Similar movie recommendations

3. Responsive Design

   • Works on desktop, tablet, and mobile
   • Dark and light theme support

New Features (This Fork)

4. Personal Watchlist

   • Bookmark button on every movie/TV card
   • Dedicated watchlist page at /watchlist
   • Status tracking (Want to Watch → Watching → Watched)
   • Personal notes for each item
   • Filter by watch status
   • Export watchlist as JSON

5. Automated Testing

   • Playwright E2E test suite
   • Tests for all watchlist operations
   • CI/CD integration ready

📷 Screenshots

Getting Started

Prerequisites

• Git - https://git-scm.com/
• Node.js (v16+) - https://nodejs.org/
• npm - Comes with Node.js

Installation

1. Clone the repository

   git clone https://github.com/shrimpy8/movie-discovery.git
   cd movie-discovery

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   VITE_API_KEY=your_tmdb_api_key_here
   VITE_TMDB_API_BASE_URL=https://api.themoviedb.org/3

   Get your TMDB API key at: https://www.themoviedb.org/settings/api

4. Start the development server

   npm run dev

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

Running Tests

This project includes automated E2E tests using Playwright.

Quick Start

# Run all tests (headless)
npm test

# Run tests with UI (recommended for development)
npm run test:ui

# Run tests in headed mode (see browser)
npm run test:headed

# View test report
npm run test:report

Test Coverage

Feature	Tests	Status
Watchlist Navigation	1	✅
Add/Remove Items	2	✅
Status Management	1	✅
Notes Feature	1	✅
Filtering	1	✅
Export	1	✅
Data Persistence	2	✅

Total: 9 tests, 100% pass rate

For detailed testing documentation, see docs/testing/TESTING_SETUP.md.

Project Structure

movie-discovery/
├── src/
│   ├── common/          # Reusable components
│   ├── context/         # React contexts (Theme, Watchlist)
│   ├── hooks/           # Custom hooks
│   ├── pages/           # Page components
│   │   ├── Home/
│   │   ├── Catalog/
│   │   ├── Detail/
│   │   └── Watchlist/   # NEW: Watchlist page
│   ├── services/        # API services (RTK Query)
│   └── utils/           # Utility functions
├── e2e/                 # Playwright tests
│   └── watchlist/       # Watchlist test suite
├── docs/                # Documentation
│   ├── testing/         # Testing docs
│   └── specs/           # Feature specifications
└── public/              # Static assets

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• State Management: RTK Query, React Context
• Routing: React Router v6
• Animation: Framer Motion
• Testing: Playwright
• Build Tool: Vite
• API: TMDB (The Movie Database)

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Run tests to ensure nothing is broken (npm test)
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

Credits

Original Project

• Author: Sudeep Mahato
• Repository: https://github.com/sudeepmahato16/movie-app
• UI/UX Design: Adapted from Tuat Tran Anh's tutorial

This Fork

• Inspiration: Peter Yang - Building AI Coding Projects
• New Features: Watchlist system, Automated testing with Playwright
• Improvements: Code quality, documentation organization, bug fixes

License

This project is licensed under the MIT License - see the original repository for details.