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

Navigate to the frontend directory:

cd frontend

Install dependencies:

npm install

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:

API requests are proxied from /api to the PHP backend
Built files are output to ../public/react for serving
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

3.5 KiB Raw Blame History