Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to allow users to upload and share quotes in a social media-like environment, similar to TikTok. Users can scroll through a feed of quotes, select their favorites, and view details such as the quote's author and background images. The focus is on community engagement and seamless interaction with the content.

## CORE FEATURES
1. **User Authentication**: Allow users to sign up and log in to their accounts to upload and manage their quotes.
2. **Quote Upload**: Users can submit their own quotes along with related background images and author information.
3. **Feed Browsing**: A scrollable feed that displays quotes with background images, enabling users to easily browse through the content.
4. **Quote Details**: Clicking on a quote provides more information, including the author and options to favorite or share the quote.
5. **Search and Filter**: Users can search for quotes by keywords or filter by categories to find specific content.
6. **User Profiles**: Each user has a profile page showcasing their uploaded quotes and activity within the app.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: A single-column layout for the feed, with a prominent hero section at the top featuring a catchy tagline and a call-to-action button to encourage quote submissions. Below, the feed will display quotes in card format, followed by user profiles and a search bar.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for standardized components and design consistency.
- **State Management**: Use React Context API or Zustand for managing user authentication and quote state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Authentication Flow**: Implement user authentication using Firebase or a similar service.
4. **Build Quote Upload Feature**: Create a form for users to submit quotes, including fields for text, author, and image upload.
5. **Develop Feed Component**: Create a component that fetches and displays quotes in a scrollable feed format.
6. **Implement Quote Details View**: Allow users to click on quotes to see additional information and interaction options.
7. **Add Search and Filter Options**: Develop a search bar and filtering mechanism to enhance the browsing experience.
8. **Create User Profile Pages**: Implement user profiles that display uploaded quotes and user activity.

## USER EXPERIENCE
Users will begin by signing up or logging into the application. Upon entering the app, they are greeted by a visually appealing hero section that encourages them to start sharing quotes. As they scroll through the feed, quotes will be displayed in a clean and organized manner, with options to favorite and view details. Searching for quotes will be straightforward, enhancing user engagement and satisfaction. The overall experience should feel intuitive and enjoyable, promoting community interaction and content sharing.