Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to mimic a Roblox-like menu system, allowing users to interact with a virtual store where they can donate fake Robux to themselves and others. The focus is on a clean, user-friendly interface that provides a seamless experience for managing and donating currency within the app.

## CORE FEATURES
1. **User Authentication**: Users can create accounts and log in to track their donations and manage their profiles securely.
2. **Virtual Store**: A central hub where users can browse items available for donation and purchase using fake Robux.
3. **Donation System**: Users can send fake Robux to themselves or other users, with a simple and intuitive interface for selecting amounts and recipients.
4. **Profile Management**: Users can view and edit their profiles, including donation history and available Robux balance.
5. **Leaderboard**: A feature to display top donors, encouraging competition and engagement among users.
6. **Feedback System**: Users can provide feedback on their experience and report any issues, helping to improve the application.

## 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 will feature a top navigation bar, a hero section for promotions, a grid layout for the virtual store items, and sections for user profiles and donation history.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing global state.

## IMPLEMENTATION STEPS
1. **Setup React Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any necessary state management libraries (Redux/Context API).
3. **Create Authentication Module**: Implement user sign-up and login functionalities using Firebase Authentication or a custom backend.
4. **Develop Virtual Store**: Create components for displaying items, including a grid layout for products and modals for item details.
5. **Implement Donation System**: Build forms for users to select donation amounts and recipients, integrating state management to update balances.
6. **Profile Management**: Create a user profile page that displays user information and donation history.
7. **Create Leaderboard**: Design a leaderboard component that fetches and displays top donors from the database.
8. **Feedback System**: Develop a feedback form and integrate it into the user interface for easy access.

## USER EXPERIENCE
Users will begin on the landing page where they can log in or sign up. Once logged in, they will navigate through a top navigation bar to access the virtual store, view their profile, and see their donation history. The donation system will be straightforward, allowing users to select amounts and recipients with clear buttons and forms. The leaderboard will encourage interaction, while the feedback system will ensure users can share their experiences and suggestions easily. The overall design will prioritize responsiveness, ensuring usability across various devices.