A modern web application for managing and organizing football videos. Built with React, Vite, and Material-UI.

• Video Management: Create, read, update, and delete football videos
• Category Organization: Videos organized by categories (Highlights, Goals, Skills, etc.)
• Responsive Design: Works seamlessly on all devices
• Modern UI: Clean and attractive interface with Material-UI components
• YouTube Integration: Direct links to YouTube videos with thumbnail previews

• React 18: Modern UI development
• Vite: Next-generation frontend tooling
• Material-UI: Beautiful and responsive components
• React Router: Seamless navigation
• React Icons: High-quality icons
• LocalStorage: Persistent data storage

soccer-flix/
├── src/
│   ├── components/          # Reusable components
│   │   ├── Header.jsx      # App header with navigation
│   │   └── VideoCard.jsx   # Video display card
│   ├── pages/              # Page components
│   │   ├── Home.jsx        # Main page with video list
│   │   └── VideoForm.jsx   # Create/Edit video form
│   ├── App.jsx             # Main app component
│   └── main.jsx            # Entry point
├── public/                 # Static assets
└── package.json           # Dependencies and scripts

• Football-themed logo
• Responsive navigation
• Modern Material-UI AppBar

• Hover animations
• Play button overlay
• Category chip
• Edit/Delete actions
• Responsive image sizing

• Form validation
• Category selection
• YouTube URL validation
• Responsive layout
• Clear/Save actions

• Category-based organization
• Responsive grid layout
• Empty state handling
• Smooth animations

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

1. Click "New Video" in the header
2. Fill out the form:
   • Select a category
   • Enter title and description
   • Paste YouTube video URL
   • Add thumbnail image URL (optional)
3. Click "Save" to add the video

1. Click the edit icon on any video card
2. Modify the details in the form
3. Click "Save" to update

1. Click the delete icon on any video card
2. Confirm the deletion in the popup

The application is fully responsive with breakpoints:

• Mobile: < 600px (1 column)
• Tablet: 600-960px (2 columns)
• Desktop: 960-1280px (3 columns)
• Large Desktop: > 1280px (4 columns)

• Primary Color: Green (#2e7d32)
• Font: Roboto
• Card Animations: Subtle hover effects
• Icons: Material Design icons
• Spacing: Consistent padding and margins

• Video search functionality
• Custom category creation
• Video playlists
• Social sharing
• Dark mode support
• User authentication
• Cloud storage integration

Link to use the project: https://soccer-flix.vercel.app/

Feel free to submit issues and enhancement requests!