Media Collector - Modern React Frontend

A modern React-based frontend for the Media Collector application, built with Vite, TypeScript, and Tailwind CSS.

Features

• 🎬 Modern UI: Clean, responsive design using Tailwind CSS
• ⚡ Fast Development: Vite for lightning-fast development and builds
• 🔷 TypeScript: Full type safety throughout the application
• 🎯 Component-Based: Modular, reusable React components
• 📱 Responsive: Mobile-first design that works on all devices
• 🎭 Media Management: Support for movies, TV shows, games, music, and adult content
• 🔍 Search: Unified search across all media types
• 📊 Dashboard: Overview of your media collection

Tech Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing
• React Query - Data fetching and caching
• Heroicons - Beautiful SVG icons
• Axios - HTTP client

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:3000

Building for Production

npm run build

The built files will be output to ../public/react for integration with the PHP backend.

Project Structure

src/
├── components/          # Reusable UI components
│   ├── Layout.tsx      # Main application layout
│   └── MovieCard.tsx   # Movie display component
├── pages/              # Page components
│   ├── Dashboard.tsx    # Dashboard overview
│   ├── Movies.tsx       # Movies listing
│   ├── TVShows.tsx      # TV shows listing
│   ├── Games.tsx        # Games listing
│   ├── Music.tsx        # Music listing
│   ├── Adult.tsx        # Adult content
│   ├── Actors.tsx       # Actors/performers
│   └── Search.tsx       # Search functionality
├── types/              # TypeScript type definitions
│   └── index.ts         # Main types file
├── App.tsx             # Main application component
├── main.tsx            # Application entry point
└── index.css           # Global styles

Available Scripts

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

Configuration

• Vite: vite.config.ts
• TypeScript: tsconfig.json
• Tailwind: tailwind.config.js
• PostCSS: postcss.config.js

Integration with PHP Backend

The React frontend is designed to work alongside the existing PHP backend:

1. API requests are proxied from /api to the PHP backend
2. Built files are output to ../public/react for serving
3. The frontend can replace or complement the existing Twig templates

Development Notes

• The project uses path aliases (@/) for clean imports
• Components are built with TypeScript for full type safety
• Tailwind CSS is configured with custom colors and animations
• The layout mirrors the original Twig template structure

Future Enhancements

• Complete API integration
• Add real-time updates
• Implement advanced filtering
• Add media details pages
• Include user preferences
• Add dark mode support