# 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:
```bash
cd frontend
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

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

### Building for Production

```bash
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