mirror of
https://github.com/ceratic/MediaCollectorLibaryFrontend.git
synced 2026-05-13 23:56:45 +02:00
121 lines
3.5 KiB
Markdown
121 lines
3.5 KiB
Markdown
# 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
|