Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
To initialize the project, create a new React application with TypeScript. The file structure should be organized as follows:

```
/robux-generator
|-- /public
|-- /src
    |-- /components
    |   |-- UserSearch.tsx
    |   |-- RobuxAmountForm.tsx
    |   |-- TransactionHistory.tsx
    |   |-- Dashboard.tsx
    |   |-- Navbar.tsx
    |-- /context
    |   |-- UserContext.tsx
    |-- /hooks
    |   |-- useRobux.ts
    |-- /styles
    |   |-- tailwind.css
    |-- App.tsx
    |-- index.tsx
|-- package.json
|-- tailwind.config.js
```

This structure separates components, context for state management, custom hooks, and styles, making it easier to manage the codebase.

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. **UserSearch**: A component for searching Roblox usernames.
2. **RobuxAmountForm**: A form for users to input the amount of Robux they want to send.
3. **TransactionHistory**: Displays the user's transaction history.
4. **Dashboard**: Shows the user's balance and quick links to other functionalities.
5. **Navbar**: A top navigation bar for site navigation.

IMPLEMENTATION APPROACH
1. **Set Up the Project**: 
   - Run `npx create-react-app robux-generator --template typescript`.
   - Install Tailwind CSS: `npm install tailwindcss postcss autoprefixer`.
   - Initialize Tailwind: `npx tailwindcss init`.

2. **Configure Tailwind**: In `tailwind.config.js`, set up paths for content:
   ```javascript
   module.exports = {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   ```

3. **Create the Layout**: 
   - In `App.tsx`, create a layout that includes the `Navbar`, `UserSearch`, `RobuxAmountForm`, `Dashboard`, and `TransactionHistory`.

4. **Implement User Search**:
   - In `UserSearch.tsx`, create an input field that updates the state with the username to search.
   ```typescript
   import React, { useState } from 'react';

   const UserSearch = () => {
     const [username, setUsername] = useState('');

     const handleSearch = () => {
       // Logic to search for the username
     };

     return (
       <div className="p-4">
         <input
           type="text"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           className="border rounded-md p-2"
           placeholder="Search for a user"
         />
         <button onClick={handleSearch} className="bg-[#1978E5] text-white rounded-md p-2">
           Search
         </button>
       </div>
     );
   };

   export default UserSearch;
   ```

5. **Build the Custom Robux Amount Feature**:
   - In `RobuxAmountForm.tsx`, create a form element for the amount input.
   ```typescript
   import React, { useState } from 'react';

   const RobuxAmountForm = () => {
     const [amount, setAmount] = useState(0);

     const handleSubmit = (e: React.FormEvent) => {
       e.preventDefault();
       // Logic to send Robux
     };

     return (
       <form onSubmit={handleSubmit} className="p-4">
         <input
           type="number"
           value={amount}
           onChange={(e) => setAmount(Number(e.target.value))}
           className="border rounded-md p-2"
           placeholder="Enter amount of Robux"
           required
         />
         <button type="submit" className="bg-[#1978E5] text-white rounded-md p-2">
           Send Robux
         </button>
       </form>
     );
   };

   export default RobuxAmountForm;
   ```

6. **Develop Robux Purchase Functionality**: Integrate payment processing using a third-party service, ensuring secure transactions.

7. **Implement Transaction History**: In `TransactionHistory.tsx`, fetch and display the user's transaction history from the backend.

8. **Ensure Responsive Design**: Use Tailwind's responsive utility classes to test across devices.

ARCHITECTURE CONSIDERATIONS
Utilize React Context API or Zustand for global state management to handle user data and transactions efficiently. Ensure components are reusable and follow separation of concerns.

ERROR HANDLING
Implement error handling in API calls and form submissions. Display user-friendly messages for common issues (e.g., invalid username, insufficient balance).

TESTING STRATEGY
Use React Testing Library and Jest to write unit tests for components and integration tests for user flows. Cover edge cases such as invalid input and failed transactions.

By following this structured approach, the development of the Robux generator web application will be organized, efficient, and maintainable.