Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Inwanr is a web application designed for social media interaction, combining real-time chat features with a Twitter-like wall for posting updates. Users can share thoughts, engage in conversations, and connect with friends in a clean, minimalist environment that prioritizes simplicity and user engagement.

## CORE FEATURES
1. **User Registration and Login**: Secure user authentication with email and password, enabling users to create profiles and manage their settings.
2. **Dynamic Feed**: A wall where users can post updates, share links, and upload media, similar to Twitter’s functionality, with real-time updates.
3. **Chat Functionality**: A private messaging feature that allows users to communicate one-on-one or in groups, with notifications for new messages.
4. **Profile Management**: Users can customize their profiles, including profile pictures, bios, and settings for privacy controls.
5. **Like and Comment System**: Users can engage with posts by liking or commenting, fostering interaction and community engagement.
6. **Search and Explore**: A search feature to discover users and trending topics, enhancing content discoverability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will emphasize a clean, simple layout with generous white space. The focus will be on clear typography and a streamlined user experience.
- **Color Mode**: Light theme featuring dark text on light backgrounds to ensure readability and comfort for users.
- **Layout**: The main layout will consist of a top navigation bar for access to different sections, a central feed area for posts, and a sidebar for chat and user options. The layout will be responsive to adapt to various screen sizes seamlessly.
- **Typography**: Utilize modern sans-serif fonts like "Inter" or "Roboto" for body text to ensure clarity and legibility. Headings will be slightly bolder to establish a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and robust component management.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and a cohesive visual experience.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using Zustand or React Context API for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui.
2. **Create Routing Structure**: Implement React Router to handle navigation between the login, feed, chat, and profile pages.
3. **Develop Core Features**:
   - Implement user authentication with Firebase or another backend service.
   - Create the dynamic feed component that fetches and displays posts in real-time.
   - Build the chat functionality using WebSocket or Firebase real-time database for instant messaging capabilities.
4. **Design UI Components**: Utilize Tailwind CSS classes to style components as per the minimalist design specifications.
5. **Implement User Interactions**: Set up event handling for likes, comments, and chat messaging, ensuring smooth user interactions.
6. **Test and Optimize**: Conduct thorough testing for responsiveness and usability across various devices, adjusting design elements as needed.

## USER EXPERIENCE
Users will experience a streamlined onboarding process with easy registration and login. Upon entering the app, they will be greeted by a clean feed displaying posts from their connections. Users can effortlessly share updates, engage in conversations through the chat feature, and navigate their profiles with intuitive controls. The minimalist design ensures that users can focus on content and interactions without distractions, while responsive layouts guarantee an optimal experience on any device.