first commit

README.md

@@ -0,0 +1,120 @@
+# 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