Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web marketplace similar to Fiverr, designed for users to buy, sell, and share ideas. It allows users to browse ideas freely while requiring login for purchasing and posting. The platform fosters a community by including features such as user profiles, dashboards for managing ideas, and a comment section for discussions.

## CORE FEATURES
1. **User Authentication**: Users can sign up and log in to their accounts to access personalized features.
2. **User Dashboard**: A personalized dashboard where users can manage their posted ideas, view their sales, and track their earnings.
3. **Idea Listings**: Users can browse ideas for sale and free ideas available for sharing, sorted by categories.
4. **Community Forum**: A comments section under each free idea where users can discuss and provide feedback, enhancing community engagement.
5. **Transaction Management**: Automatic calculation and deduction of a 20% fee from each sale, with clear visibility for users on their earnings.
6. **Profile Management**: Users can create and edit their profiles, showcasing their ideas and credentials to potential buyers.

## 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 structured layout with a prominent hero section on the homepage, followed by idea listings, a community forum area, and a clear navigation bar for easy access to user dashboards and profile management.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (optional for managing global state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with Create React App and TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and Redux (if needed) via npm.
3. **Create Project Structure**: Set up folders for components, pages, and utilities.
4. **Design Layout**: Implement the main layout using Tailwind CSS, ensuring a responsive design.
5. **Develop Authentication**: Create user authentication components using Firebase or a similar service.
6. **Build User Dashboard**: Develop the dashboard component where users can manage their ideas.
7. **Implement Idea Listings**: Create components for displaying ideas for sale and free ideas, along with filtering options.
8. **Community Forum**: Set up a comments section for each idea, allowing users to post and respond to comments.
9. **Transaction Logic**: Implement backend logic for handling payments and deducting the 20% fee.
10. **Testing**: Conduct thorough testing for functionality, responsiveness, and user experience.
11. **Deployment**: Deploy the application on a suitable platform like Vercel or Netlify.

## USER EXPERIENCE
Users will have a seamless experience starting from the homepage where they can browse ideas without logging in. Once they decide to purchase or sell an idea, they will be prompted to log in or create an account. After logging in, they can easily navigate to their dashboard to manage their ideas, track sales, and engage with the community through comments. The overall flow emphasizes simplicity and ease of use, ensuring that users can effortlessly transition between browsing, purchasing, and sharing ideas.