Https://t.me/aviat_signl
Generated Prompt
## APPLICATION OVERVIEW This application is a web app designed to serve as a streamlined communication platform for users, focusing on simplicity and clarity. The main purpose is to facilitate quick and efficient interactions while maintaining a minimalist aesthetic, ensuring users can navigate and communicate seamlessly. ## CORE FEATURES 1. **User Authentication**: Secure sign-up and login processes with password recovery options to ensure user privacy and data protection. 2. **Real-time Messaging**: Instant messaging capabilities that allow users to send and receive messages in real-time with read receipts. 3. **User Profiles**: Customizable user profiles where users can add personal information, profile pictures, and status messages. 4. **Search Functionality**: A robust search feature enabling users to easily find contacts and messages within the application. 5. **Notifications**: Real-time notifications for new messages and interactions to keep users updated without overwhelming them. 6. **Settings Panel**: A user-friendly settings interface where users can manage their account preferences, privacy settings, and notification preferences. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design will feature a clean, simple aesthetic with ample white space. A minimal color palette will be employed, focusing on subtle accents to enhance usability while keeping the interface uncluttered. - **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a clean look. - **Layout**: A single-page layout with a top navigation bar for easy access to core features, a central messaging area, and a sidebar for user profiles and settings. The layout will prioritize visual hierarchy, guiding users intuitively through the app. - **Typography**: Use a sans-serif font like 'Inter' for clear readability, with headings in a larger size (24px) and body text at 16px. Emphasize important information using bold text and maintain consistent line spacing for better legibility. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and efficient component management. - **Styling**: Tailwind CSS for utility-first styling, allowing rapid design adjustments and responsiveness. - **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design. - **State Management**: Implement Zustand for lightweight state management without the complexity of Redux. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App and add Tailwind CSS. 2. **Install Dependencies**: Install shadcn/ui and Zustand for UI components and state management, respectively. 3. **Create Component Structure**: Develop a folder structure for components, pages, and styles. Start with the main components: `Header`, `Sidebar`, `MessageArea`, and `SettingsPanel`. 4. **Implement User Authentication**: Set up Firebase or similar for user authentication, including sign-up, login, and password recovery functionalities. 5. **Develop Real-time Messaging**: Utilize WebSocket or Firebase Firestore to implement real-time messaging features. 6. **Build User Profiles and Settings**: Create user profile and settings components, allowing users to update their information and preferences. 7. **Integrate Notifications**: Develop a notification system using React context to manage and display notifications for messages. 8. **Test Responsiveness**: Ensure the app is fully responsive across different devices and screen sizes, utilizing Tailwind's responsive utility classes. ## USER EXPERIENCE Key user interactions will include a seamless onboarding process with clear prompts for account setup, intuitive navigation through the messaging interface, and easy access to user settings. The design will prioritize user feedback, ensuring that notifications are subtle yet effective, and that the overall experience feels fluid and engaging. Users will be able to search for contacts and messages quickly, enhancing efficiency and satisfaction.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
