Prompt di alto livello per creare una web app perfettamente identica a Tinder
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to replicate the core functionalities of Tinder, enabling users to create profiles, swipe through potential matches, and engage in conversations. The application will focus on providing a seamless user experience with a minimalist design aesthetic. ## CORE FEATURES 1. **User Authentication**: Allow users to sign up and log in using email or social media accounts for easy access. 2. **Profile Creation**: Users can create and edit their profiles by adding photos, a bio, and personal interests. 3. **Swipe Functionality**: Implement a card-based interface where users can swipe left to pass or right to like other users' profiles. 4. **Match Notifications**: Notify users when they have a mutual match, enabling them to start chatting. 5. **Chat Interface**: Provide a simple messaging system for matched users to communicate in real-time. 6. **Settings and Preferences**: Allow users to customize their matching preferences and account settings. ## 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 feature a bottom navigation bar for easy access to the main sections (Home, Matches, Chat, Profile), with swipe cards prominently displayed in the center of the screen. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux Toolkit (optional, based on complexity) ## IMPLEMENTATION STEPS 1. **Set up the project**: Initialize a new React project using Create React App with TypeScript. 2. **Install dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components. 3. **Create authentication flow**: Implement user authentication using Firebase or Auth0 for email and social logins. 4. **Develop profile management**: Build a profile creation and editing interface that allows users to upload images and fill out their bios. 5. **Implement the swipe feature**: Create a swipeable card component using a library like react-swipeable or custom gestures. 6. **Set up the chat system**: Integrate a chat interface using WebSockets or Firebase for real-time messaging. 7. **Design the main layout**: Use Tailwind CSS to create a responsive layout that is optimized for both mobile and desktop viewing. 8. **Test and deploy**: Thoroughly test the application for usability and bugs, then deploy using Vercel or Netlify. ## USER EXPERIENCE The user experience will be focused on simplicity and engagement. Upon launching the app, users will be greeted with a straightforward onboarding process where they can create their profiles. The swipe functionality will be intuitive, allowing users to quickly browse through potential matches. Once a match is made, users can easily access the chat interface from their matches list, ensuring smooth communication. The bottom navigation bar will allow users to switch between different sections of the app effortlessly, enhancing overall usability.
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!
