Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to facilitate the donation of Robux to real Roblox users. It will showcase a user interface that displays a balance of 100,000 Robux, allowing users to see how their donations are spent in real-time. The application will focus on user interaction, enabling seamless donations and tracking.

## CORE FEATURES
1. **User Authentication**: Users can create accounts or log in to track their donation history and manage settings.
2. **Robux Balance Display**: A real-time display of the user's Robux balance, showcasing the total available and how it decreases with each donation.
3. **Donation Interface**: A simple interface for selecting users to donate Robux to, including a search function for real Roblox users.
4. **Transaction History**: A log that records all donations made by the user, including timestamps and recipient details.
5. **User Search Functionality**: A search bar that allows users to find real Roblox users quickly by username.
6. **Responsive Design**: The application will be fully responsive, ensuring it works seamlessly across devices and screen sizes.

## 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 layout will include a top navigation bar, a hero section for the balance display, a donation interface, and a transaction history section, all organized in a single-page format for easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing user state and donation transactions.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Initialize a new React project with TypeScript, install Tailwind CSS, and set up shadcn/ui components.
2. **Create User Authentication**: Implement user authentication with a simple sign-up and login form using context or a third-party service.
3. **Develop the Robux Balance Component**: Create a component to display the Robux balance that updates as donations are made.
4. **Build the Donation Interface**: Design a user search bar and donation button that allows users to select recipients and input donation amounts.
5. **Implement Transaction History**: Create a component to display the user's transaction history, pulling data from state management.
6. **Ensure Responsiveness**: Utilize Tailwind CSS to make the application responsive, testing on various devices to ensure a seamless experience.

## USER EXPERIENCE
Users will be greeted with a clean interface upon logging in, showing their Robux balance prominently at the top. They can easily search for Roblox users to whom they wish to donate Robux. Each donation will reflect in real-time on their balance, providing immediate feedback. The transaction history will be accessible for users to track their donations, enhancing transparency and user trust. The overall navigation will be intuitive, ensuring that users can navigate through the application effortlessly.

This design and implementation plan will create a functional and user-friendly web application tailored to the user's vision of donating Robux.