Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate the experience of sending "rubox" in a playful and engaging manner. The application will offer users a minimalist interface where they can easily navigate and interact with the features, creating an enjoyable experience that mimics the concept of sending virtual currency.

## CORE FEATURES
1. **User Authentication**: Allow users to create accounts and log in securely to track their simulated rubox transactions.
2. **Rubox Sending Interface**: A simple, intuitive interface where users can select amounts and send rubox to other users or themselves.
3. **Transaction History**: A feature that logs all transactions, allowing users to review their past activities and interactions.
4. **User Profiles**: Enable users to create and customize their profiles, showcasing their rubox balance and transaction history.
5. **Notifications**: Provide real-time alerts for successful transactions, ensuring users are informed about their actions.
6. **Responsive Design**: Ensure the application is fully functional on mobile devices, enhancing accessibility for users on the go.

## 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 for easy access to different sections, a central content area for the rubox sending interface, and a sidebar for transaction history and user profile links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API for managing user authentication and transaction data.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication Flow**: Implement user registration and login components, utilizing context for state management.
3. **Develop the Rubox Sending Interface**: Create a user-friendly form for sending rubox, including input validation and amount selection.
4. **Build Transaction History Component**: Design a component that fetches and displays the user's transaction history from the state.
5. **User Profile Implementation**: Allow users to edit their profiles and view their rubox balance, integrating with the authentication state.
6. **Add Notifications**: Implement a notification system to inform users of transaction successes or failures.
7. **Ensure Responsiveness**: Use Tailwind CSS to make the application responsive across devices, focusing on mobile-first design principles.
8. **Test and Deploy**: Conduct thorough testing to ensure all features work as intended, then deploy the application to a hosting service.

## USER EXPERIENCE
The user experience focuses on simplicity and clarity. Users will be greeted with a clean landing page upon logging in, where they can quickly access the rubox sending interface. The transaction process will be straightforward, with clear prompts and confirmations. Users will appreciate the organized layout that allows easy navigation between sending rubox, checking transaction history, and managing their profiles. Responsive design ensures that all features are accessible on any device, maintaining a seamless experience whether on mobile or desktop.