Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Robox Fake Send is a minimalist web application designed to simulate the sending of messages, allowing users to create and send fictitious messages for various purposes, such as testing or entertainment. The application focuses on providing a clean and simple interface that emphasizes usability and user engagement.

## CORE FEATURES
1. **Message Creation**: Users can easily create custom messages by filling out a simple form that includes fields for the sender, recipient, and message content.
2. **Preview Functionality**: A live preview feature allows users to see how their message will appear once sent, enhancing the user experience.
3. **Send Simulation**: Users can simulate sending messages, which will display a success message without actual delivery, creating an engaging experience.
4. **History Log**: The app keeps a log of sent messages for users to review and utilize in future simulations.
5. **User Authentication**: Users can create accounts to save their message history and access their messages from any device.
6. **Responsive Design**: The application is designed to function seamlessly across various devices, ensuring usability on both mobile and desktop.

## 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 structure will include a navigation bar at the top, a hero section for the message creation form, a preview area below the form, and a history log section at the bottom, all arranged vertically with ample spacing.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API for managing global state across the application

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling.
3. **Create the Layout**: Set up the main layout structure using Tailwind CSS classes to ensure responsiveness and a minimalist aesthetic.
4. **Implement Authentication**: Create user registration and login forms, integrating with a backend service for user management.
5. **Develop Message Creation**: Build the message creation form component, including input handling and submission logic.
6. **Add Preview Functionality**: Implement live preview functionality that updates as the user types in the message fields.
7. **Simulate Message Sending**: Create functionality that displays a success message upon "sending" a message without actual delivery.
8. **Create History Log**: Design and implement a history log component to display previously sent messages, ensuring users can access their simulation history.
9. **Testing and Optimization**: Test the application across devices for responsiveness and fix any bugs or usability issues.

## USER EXPERIENCE
Users will interact with the application by first registering or logging in to their accounts. Once logged in, they will be greeted with a clean interface featuring a message creation form. After crafting their messages, they can preview them before simulating the sending. The history log will allow users to see their past messages, encouraging creativity and repeated use. The responsive design ensures a consistent experience, whether on mobile or desktop, making it accessible and user-friendly.