Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with a virtual currency system similar to Roblox's Robux. Users can earn, spend, and manage their virtual currency while enjoying a clean and minimalist interface that enhances user experience. The main purpose is to create an engaging platform where users can seamlessly engage with their virtual currency.

## CORE FEATURES
1. **User Authentication**: Allow users to create accounts, log in, and manage their profiles.
2. **Currency Management**: Users can earn virtual currency through various activities and spend it on platform features or items.
3. **Transaction History**: Provide users with a detailed record of their earnings and expenditures.
4. **Marketplace**: Allow users to browse and purchase items or features using their virtual currency.
5. **Referral System**: Encourage users to invite friends by rewarding them with currency for successful referrals.
6. **User Dashboard**: A personalized dashboard displaying current balance, recent transactions, and available offers.

## 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**: The main layout structure will feature a header with navigation links, a hero section showcasing the currency system, followed by sections displaying features, a marketplace, and a user dashboard. The footer will include contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or Context API if preferred for simpler state management)

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any other required libraries (e.g., React Router for navigation).
3. **Create Folder Structure**: Organize your components, pages, and styles into respective folders.
4. **Build Authentication Module**: Implement user sign-up and login functionalities using a backend service or a mock service for demonstration.
5. **Develop Currency Management System**: Create functions to handle earning and spending currency.
6. **Design User Interface**: Use Tailwind CSS to apply the specified design specifications while building components like headers, footers, and buttons.
7. **Implement Marketplace Feature**: Create a marketplace component where users can view and purchase items.
8. **Add Transaction History**: Implement a section where users can view their transaction history.
9. **Testing**: Conduct thorough testing for user authentication, currency transactions, and the overall user experience.
10. **Deployment**: Deploy the application on a platform like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will start by creating an account and logging in to their dashboards. They will see their current virtual currency balance prominently displayed, along with options to earn more or spend it in the marketplace. The interface will be intuitive, allowing for easy navigation between different sections like the transaction history and user profile. Users will experience a seamless flow from earning currency to spending it, all while enjoying a visually appealing and minimalist design.