TheOpenMovieDB-React-Example

🎬 The Open Movie Database Clone - React Monorepo 🚀

📖 About

A modern React-based clone of The Movie Database (TMDB) built as a monorepo using Turborepo and pnpm. This project demonstrates best practices for building scalable React applications with shared configurations and components.

🏗️ Project Structure

This monorepo is organized using Turborepo for efficient build orchestration and pnpm for package management.

TheOpenMovieDB-React-Example/
├── apps/
│   └── the-open-movie-database/     # Main React application
├── packages/
│   ├── eslint-config/               # Shared ESLint configurations
│   └── typescript-config/          # Shared TypeScript configurations
├── turbo.json                       # Turbo configuration
├── pnpm-workspace.yaml             # pnpm workspace configuration
└── package.json                    # Root package.json

🚀 Features

Core Functionality

• Movie & TV Show Search: Comprehensive search across movies, TV shows, and celebrities
• Category Browsing: Browse by Popular, Airing Today, Upcoming, and more
• Detailed Views: Rich detail pages for movies, TV shows, and celebrities
• Advanced Filtering: Filter celebrities by media type and department
• Discovery System: Interactive sidebar with advanced filtering options
• Offline Support: Apollo InMemoryCache for offline content viewing
• Theme Switching: Dark and light theme support

Development Features

• Monorepo Architecture: Efficient development with shared configurations
• Component Library: Storybook for component development and documentation
• Type Safety: Full TypeScript support across the project
• Code Quality: ESLint and Prettier for consistent code style
• Testing: Comprehensive test suite with Vitest
• Modern Build: Vite for fast development and optimized builds

🛠️ Technology Stack

Core Technologies

• React 18 - Modern React with concurrent features
• TypeScript - Type-safe JavaScript
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing

State Management & Data

• Apollo Client - GraphQL client with caching
• GraphQL - Data query language
• React Helmet - Document head management

UI & Components

• Headless UI - Unstyled, accessible UI components
• Tippy.js - Tooltip library
• Font Awesome - Icon library
• Storybook - Component development environment

Development Tools

• Turborepo - High-performance build system
• pnpm - Fast, disk space efficient package manager
• ESLint - Code linting
• Prettier - Code formatting
• Vitest - Unit testing framework

Shared Packages

• @repo/eslint-config - Shared ESLint configurations
• @repo/typescript-config - Shared TypeScript configurations

🚀 Getting Started

Prerequisites

• Node.js >= 18
• pnpm >= 9.0.0

Installation

1. Clone the repository

   git clone https://github.com/AlexMachin1997/TheOpenMovieDB-React-Example.git
   cd TheOpenMovieDB-React-Example

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:5173

Backend Setup

This frontend application requires the GraphQL backend to be running. The backend repository can be found at: TheOpenMovieDB-GraphQL-Example

📜 Available Scripts

Root Commands

pnpm dev          # Start development server
pnpm build         # Build all packages and applications
pnpm lint          # Run ESLint across all packages
pnpm prettier      # Format code with Prettier
pnpm check-types   # Run TypeScript type checking
pnpm test          # Run tests across all packages

App-specific Commands

cd apps/the-open-movie-database

pnpm dev          # Start Vite development server
pnpm build        # Build for production
pnpm storybook    # Start Storybook development server
pnpm test         # Run tests with Vitest

🧪 Development

Component Development

This project uses Storybook for component development:

pnpm storybook

Navigate to http://localhost:6006 to view the component library.

Code Quality

• ESLint: Configured with shared rules from @repo/eslint-config
• Prettier: Automatic code formatting
• TypeScript: Strict type checking across the project

Testing

• Vitest: Fast unit testing framework
• Testing Library: React component testing utilities
• Coverage: Built-in coverage reporting

📚 Documentation

Package Documentation

• ESLint Config - Shared ESLint configurations
• TypeScript Config - Shared TypeScript configurations

External Resources

• Turborepo Documentation - Monorepo build system
• Vite Documentation - Build tool and dev server
• React Documentation - React library
• Tailwind CSS Documentation - CSS framework
• Storybook Documentation - Component development

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Reporting Issues

Found a bug? Please report it here.

Feature Requests

Have an idea for a new feature? Please share it here.

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

👨‍💻 Author

Alex Machin

• LinkedIn: Alex Machin
• Twitter: @AlexMachin97

🙏 Acknowledgments

• The Movie Database (TMDB) - For the inspiration and API
• Turborepo - For the excellent monorepo tooling
• Vite - For the fast development experience
• Storybook - For component development tools

📈 Version History

• v0.1.0 - Initial release with basic functionality
• Future versions will follow Semantic Versioning

---

⭐ Star this repository if you found it helpful!