Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to facilitate connections between users through an innovative dating platform that utilizes customized avatars generated from selected images. The app will allow users to reference their ethnic backgrounds and link their social media profiles, while limiting proximity reach to individuals on the same Wi-Fi network.

## CORE FEATURES
1. **Avatar Generation**: Users can upload images to create personalized avatars that represent them visually in the app.
2. **Ethnic Background Reference**: A feature that allows users to select and display their ethnic backgrounds, enhancing personalization and connection relevance.
3. **Social Media Integration**: Users can link their social media profiles to their accounts, allowing others to view their interests and activities.
4. **Proximity Matching**: A unique feature that limits user visibility to those connected to the same Wi-Fi network, promoting local connections.
5. **User Profiles**: Comprehensive profiles that display avatars, ethnic backgrounds, and linked social media accounts for easy browsing.
6. **Chat Functionality**: Secure messaging between users to facilitate communication and interaction.

## 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 layout will feature a clear navigation bar at the top, a hero section for user onboarding, followed by profile display sections, and a chat interface. Each section will use cards to present information clearly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for user state and chat functionality

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create Basic Layout**: Implement the main layout structure, including the navigation bar, hero section, and profile cards using Tailwind CSS for styling.
3. **Avatar Generation**: Integrate an image upload feature that allows users to create avatars. Use a library for image processing if necessary.
4. **User Profiles**: Develop the user profile component that displays avatars, ethnic backgrounds, and linked social media accounts.
5. **Proximity Matching Logic**: Implement backend logic to limit user visibility based on their Wi-Fi network. This may require using WebRTC or a similar technology.
6. **Chat Functionality**: Build the chat interface using real-time messaging protocols (e.g., WebSocket) to allow users to communicate seamlessly.
7. **Testing and Deployment**: Conduct thorough testing for user flows and interactions, then deploy the application to a suitable hosting platform.

## USER EXPERIENCE
Users will experience a smooth onboarding process where they upload images to create avatars and fill in their profile details. The proximity matching feature will help them discover and connect with nearby users, while the clean and minimalist design ensures an intuitive interface. Users can easily navigate through profiles and engage in chat, all while enjoying a visually appealing and personalized experience.