Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Robux is a minimalist web application designed to provide users with a streamlined experience for managing their Robux balance and transactions. The main purpose of the application is to offer a simple and intuitive interface where users can view their Robux holdings, track transactions, and easily manage their in-game currency.

## CORE FEATURES
1. **User Authentication**: Secure login and registration system allowing users to access their personal Robux accounts.
2. **Balance Overview**: A clear display of the user's current Robux balance, with easy-to-read metrics.
3. **Transaction History**: A comprehensive log of all transactions, including purchases and gains, enabling users to track their spending and earnings.
4. **Top-Up Functionality**: An option for users to add Robux to their balance through various payment methods.
5. **Profile Management**: Users can update their account information, including usernames and payment methods.
6. **Responsive Design**: Optimized for both desktop and mobile devices, ensuring a seamless experience across all platforms.

## 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 header with navigation links, a central dashboard displaying the balance overview and transaction history, and a sidebar for user profile and top-up options.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any necessary libraries for state management.
3. **Create Components**: Develop the main components including Header, Balance, TransactionList, and Profile.
4. **Implement Routing**: Use React Router for navigating between different sections of the app.
5. **Develop Authentication**: Implement a secure authentication system with user registration and login functionality.
6. **Create Context**: Set up a context provider to manage user data and Robux balance across the application.
7. **Design UI**: Apply Tailwind CSS styles to components based on the design specifications, ensuring a cohesive minimalist design.
8. **Test Responsiveness**: Ensure that the application is responsive and works seamlessly on both desktop and mobile devices.
9. **Deploy**: Deploy the application using a platform like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will begin their journey by landing on the login page, where they can easily access their accounts. Upon logging in, they will be greeted with a clean dashboard showcasing their current Robux balance prominently. Users can navigate through their transaction history and utilize the top-up functionality with clear buttons and minimal distractions. All interactions are designed to be intuitive, with responsive feedback ensuring a smooth experience across devices.