Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a mobile web application similar to YouTube, designed to allow users to upload, watch, like, comment, and share videos seamlessly. The focus is on delivering a user-friendly experience with a clean, modern interface that encourages engagement with video content.

## CORE FEATURES
1. **Home Page with Recommended Videos**: A dynamic feed displaying recommended videos based on user preferences and viewing history.
2. **Search Bar**: An intuitive search function that allows users to find videos quickly by keywords or tags.
3. **Video Player**: A versatile video player with essential controls including play, pause, volume adjustment, and full-screen options for an immersive viewing experience.
4. **Upload Button**: A prominent feature enabling users to easily upload their video content directly from the app.
5. **Engagement Buttons**: Like, dislike, comment, and share options available directly under each video to facilitate interaction.
6. **User Profile and Channel Page**: Personalized user profiles and channel pages where users can manage their content, subscriptions, and settings.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on a clean and simple design with ample white space to enhance usability and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: 
  - A top navigation bar for easy access to the search function and notifications.
  - A grid layout for the Home page to display video thumbnails effectively.
  - A bottom navigation bar with icons for Home, Shorts, Upload (+), Subscriptions, and Library for easy navigation.
- **Typography**: Use modern sans-serif fonts like **Roboto** or **Open Sans** for legibility. Maintain a clear hierarchy with larger font sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for efficient and responsive styling.
- **UI Components**: Utilize **shadcn/ui** for reusable and customizable UI components.
- **State Management**: Implement **Redux** or **Context API** for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project with TypeScript and integrate Tailwind CSS for styling.
2. **Create Core Components**: Develop reusable components for the video player, video cards, upload forms, and navigation elements.
3. **Implement Routing**: Set up routing using React Router to handle navigation between different pages (Home, Profile, Channel, etc.).
4. **Develop State Management**: Integrate Redux or Context API to manage user authentication states and video data.
5. **Build the Home Page**: Create the Home page layout with recommended videos utilizing a grid format.
6. **Implement Search Functionality**: Add search capabilities to filter videos based on user input.
7. **User Authentication**: Set up user login and registration processes to manage user accounts effectively.
8. **Video Upload Functionality**: Develop the upload feature allowing users to submit video content along with relevant metadata.
9. **Testing and Optimization**: Conduct thorough testing across devices to ensure responsiveness and fix any bugs.
10. **Deployment**: Deploy the application to a cloud service (like Vercel) to make it accessible to users.

## USER EXPERIENCE
Users will have a seamless experience navigating through the application. They can easily browse recommended videos on the Home page, search for specific content, and interact with videos through likes, comments, and shares. The straightforward upload process encourages content creation, while the user profile and channel pages help users manage their content and subscriptions effectively. The design ensures that users remain engaged without unnecessary distractions, fostering a community around video sharing.