Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based hosting platform that provides users with a complete hosting environment, including features such as environment variable management, Cloudflare tunnel configuration, and VPS options. The main purpose is to create a secure and user-friendly space for hosting websites while preventing malicious activities and ensuring a seamless user experience.

## CORE FEATURES
1. **User Registration and Authentication**: Users can register and log in using Google authentication to prevent multiple account creations, ensuring a single account per user.
2. **Admin Dashboard**: A comprehensive admin panel allows for the management of users, environment variables, and server configurations, including Cloudflare tunnel setups.
3. **Resource Allocation**: Each user receives 256 MB of free hosting resources with the option to upgrade for more storage, ensuring scalability.
4. **Malicious Activity Detection**: AI-powered tools detect and block malicious bots and potential threats, including harmful scripts and raids.
5. **Command Restrictions**: The platform restricts the use of potentially harmful commands such as Wget and curl to enhance security.
6. **Responsive Design**: The application is designed to be fully responsive, ensuring optimal usability across all devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on a clean and simple design with ample white space, allowing users to navigate easily without distractions.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and improve user experience.
- **Layout**: A top navigation bar for easy access to different sections, a sidebar in the admin panel for quick navigation, and a main content area that displays user data and settings cleanly.
- **Typography**: Use a modern sans-serif font (e.g., 'Roboto' or 'Open Sans') for body text, maintaining a clear hierarchy with larger font sizes for headings and subheadings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong typing and improved maintainability.
- **Styling**: Tailwind CSS for rapid styling using utility-first CSS principles, ensuring a clean and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design ethos.
- **State Management**: Use React Context or Redux if necessary for managing global state across the application.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. Install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create a responsive layout with a top navigation bar and sidebar for the admin panel. Ensure the layout is fluid and adjusts for various screen sizes.
3. **Implement Authentication**: Set up Google authentication for user registration and login, employing Firebase or Auth0 for backend support.
4. **Build Admin Dashboard**: Develop the admin dashboard with features to manage users, view analytics, and configure server settings, ensuring smooth navigation and usability.
5. **Integrate AI Detection**: Implement an AI component that scans for suspicious activities and provides alerts to admins.
6. **Deploy the Application**: Use a cloud provider for deployment, ensuring that the application is accessible and scalable.

## USER EXPERIENCE
Users will interact with the application through a straightforward registration process, followed by a clean interface to manage their hosting environment. The admin dashboard will provide insights and tools for managing resources and detecting threats, ensuring a proactive approach to security and usability. The responsive design ensures that users can access their accounts from any device, making it convenient for both personal and professional use.