Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to create and manage MyCenter servers, allowing users to chat, send photos/videos/files, and add friends. Users will need to log in or sign up to access these features, fostering communication and community building among users.

## CORE FEATURES
1. **User Authentication**: Secure login and signup process to allow users to create and manage their accounts.
2. **Server/Community Creation**: Users can create and join servers/communities to facilitate group chats and interactions.
3. **Chat Functionality**: Real-time messaging capabilities within servers, enabling users to communicate effectively.
4. **Media Sharing**: Ability to send photos, videos, and files within chats, enhancing the interaction experience.
5. **Profile Customization**: Users can select and upload images to personalize their profile pictures and enhance their identity within the app.
6. **Friend Management**: Users can add and manage friends, allowing for private interactions outside of servers.

## 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 content area displaying chat and community features, and a sidebar for user profile and settings, all structured for easy navigation and interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing user and community states.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Design Layout**: Create the main layout components (Header, Sidebar, Main Content Area) using Tailwind CSS for styling.
3. **Implement Authentication**: Set up user authentication with forms for login and signup, linking to a backend service for user management.
4. **Develop Chat Functionality**: Implement real-time chat features using WebSocket or Firebase for instant messaging.
5. **Media Uploads**: Integrate file upload functionality, ensuring users can send photos, videos, and files in chats.
6. **Profile Management**: Allow users to upload and update their profile pictures, integrating this feature with the user authentication system.
7. **Friend System**: Create a friend management system enabling users to add and manage friends, with notifications for friend requests.

## USER EXPERIENCE
Users will begin by signing up or logging in to their accounts. Once authenticated, they can create or join communities, where they can engage in real-time chats, share media, and interact with friends. The user interface will be intuitive and responsive, ensuring a seamless experience across devices, with a focus on easy navigation using the minimalist design principles outlined.