Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a real-time chat web application that facilitates instant messaging between users. It will allow users to create accounts, join chat rooms, and communicate seamlessly. The focus will be on providing an intuitive user interface that enhances the chatting experience.

## CORE FEATURES
1. **User Authentication**: Users can sign up, log in, and manage their profiles securely.
2. **Real-Time Messaging**: Users can send and receive messages instantly in chat rooms.
3. **Chat Rooms**: Users can create, join, and browse various chat rooms.
4. **Direct Messaging**: Users can send private messages to each other.
5. **Message History**: Users can view past conversations and messages in chat rooms.
6. **User Presence**: Displays online/offline status of users in chat rooms.

## 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 consist of a header with navigation, a main chat area for messages, and a sidebar for chat rooms and users online, all designed to maximize usability and accessibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand (or any preferred state management library)

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and Zustand.
2. **Create Authentication System**: Implement user authentication using a library like Firebase or Auth0.
3. **Build Chat Room Structure**: Design components for chat rooms and integrate real-time messaging using WebSocket or a similar technology.
4. **Implement Messaging Functionality**: Develop the messaging feature using a state management solution to handle message data.
5. **Design UI Components**: Create reusable components (e.g., buttons, input fields, chat bubbles) styled with Tailwind CSS.
6. **Add User Presence Feature**: Implement functionality to show which users are online or offline in chat rooms.
7. **Test and Optimize**: Conduct thorough testing to ensure responsiveness and fix any bugs.

## USER EXPERIENCE
The user experience will focus on ease of navigation and intuitive interactions. Users will be able to register and log in quickly, access chat rooms effortlessly, and communicate in real time without noticeable delays. The minimalist design will ensure that users can focus on their conversations without distractions, and the layout will provide a clear visual hierarchy for better usability. 

This comprehensive prompt should help you create a fully functional minimalist light application that aligns with your vision for a real-time chat application.