Lovable Prompt Creator - AI Prompt Generator

- ## APPLICATION OVERVIEW
This web application is a storytelling platform designed to showcase video stories of couples who overcome challenges in their relationships. The main purpose is to provide users with inspiring narratives that highlight resilience and love, facilitating a supportive community for individuals seeking encouragement and connection.

## CORE FEATURES
1. **Video Story Upload**: Users can upload their own video stories, sharing personal experiences and insights about overcoming relationship challenges.
2. **Story Browsing**: A clean and intuitive interface allows users to browse through a curated collection of video stories categorized by themes (e.g., trust, communication, forgiveness).
3. **User Profiles**: Each user can create a profile to manage their uploaded stories, follow other users, and engage with the community.
4. **Comment and Interaction System**: Users can comment on video stories, providing feedback and sharing their thoughts, fostering a sense of community.
5. **Search Functionality**: A robust search feature allows users to find stories based on keywords, themes, or user names, enhancing discoverability.
6. **Favorites and Sharing Options**: Users can save their favorite stories and share them on social media platforms, promoting engagement and outreach.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design emphasizes cleanliness and simplicity, utilizing ample white space to create a serene user experience.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring readability and comfort for users.
- **Layout**: 
  - A header featuring the app logo and navigation links (Home, Upload Story, My Profile) at the top.
  - A main content area showcasing video thumbnails in a grid format.
  - A sidebar for user profile navigation and popular stories.
  - A footer with links to privacy policy, terms of service, and contact information.
- **Typography**: 
  - Primary font: 'Helvetica Neue', sans-serif for body text for clear legibility.
  - Headings: Bold weight for emphasis, with size variations to establish a clear hierarchy (e.g., H1 for titles, H2 for section headings).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a dynamic and type-safe web application.
- **Styling**: Tailwind CSS to enable rapid styling with utility-first CSS classes.
- **UI Components**: Utilize shadcn/ui components for consistent and reusable UI elements.
- **State Management**: Use Zustand or React Context API for managing global application state, ensuring minimal complexity.

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new React project using Create React App with TypeScript template. 
2. **Install Dependencies**: Add Tailwind CSS, Zustand (or other chosen state management library), and shadcn/ui components.
3. **Create Folder Structure**: Organize the project into components, pages, hooks, and styles directories.
4. **Develop Core Components**: Build the main components (Header, Footer, VideoGrid, VideoUploadForm, UserProfile) using functional components.
5. **Implement Routing**: Set up React Router for navigating between different pages (home, upload, profile).
6. **Build Video Upload Functionality**: Integrate a file upload API to handle video submissions, ensuring proper validation and error handling.
7. **Create State Management Logic**: Implement global state management for user profiles and uploaded stories, using Zustand or React Context.
8. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design aesthetics defined in the specifications.
9. **Test Responsiveness**: Ensure the application is fully responsive, with mobile-first design principles in mind, testing across various devices.
10. **Deploy Application**: Choose a hosting service (e.g., Vercel or Netlify) to deploy the application for public access.

## USER EXPERIENCE
Users will land on a welcoming homepage featuring a grid of inspiring video stories. They can easily navigate through categories or use the search bar to find specific content. Upon selecting a video, users can view it in a clean player interface, with options to comment and share. The user profile section allows easy management of their stories and interactions, contributing to a personalized experience that encourages community engagement.