Match - Rol: Eres un desarrollador Full-Stack experto en React, Tailwind CSS y Supabase (o Firebase).
Generated Prompt
## APPLICATION OVERVIEW The project is a web application designed to provide an exclusive housing platform for Erasmus students. The main purpose is to offer affordable accommodations (under €300), ensure verified listings to eliminate scams, and facilitate roommate matching for students seeking to share apartments. ## CORE FEATURES 1. **User Authentication**: Secure sign-up and login process for students using email/password or social media accounts. 2. **Verified Listings**: A dedicated section for listings that have been verified for authenticity, marked with a "Verificado" label. 3. **Search and Filter**: Advanced search functionality allowing users to filter accommodations by price, location, and type of housing. 4. **Roommate Matching**: A matching system that connects students based on preferences, interests, and accommodation needs. 5. **Reviews and Ratings**: Users can leave reviews and ratings for listings and potential roommates to enhance trust within the community. 6. **Mobile Responsiveness**: Optimized experience for mobile devices, ensuring all features are accessible and functional on smartphones. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design should be clean and simple, with plenty of white space to enhance readability and focus on key elements. - **Color Mode**: Light theme with dark text on light backgrounds, primarily using an electric blue for accents and verified tags, complemented by soft white and light grey backgrounds. - **Layout**: The main layout should include a prominent hero section with a call-to-action (CTA), followed by features, testimonials, and a footer with contact information. The interface should be intuitive and easy to navigate, especially on mobile devices. - **Typography**: Use a modern sans-serif font for headings and body text, with a clear hierarchy. Headings should be bold and larger, while body text should be easily readable with appropriate line spacing. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript to ensure type safety and enhance development efficiency. - **Styling**: Tailwind CSS for utility-first styling that allows rapid UI development while maintaining a consistent design language. - **UI Components**: Utilize shadcn/ui for pre-built, accessible UI components that align with the minimalist aesthetic. - **State Management**: Implement React Context or a state management library like Redux if complex state management is needed. ## IMPLEMENTATION STEPS 1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS. 2. **Create Authentication Flow**: Build user authentication with a secure sign-up and login system, integrating with Supabase or Firebase. 3. **Develop Core Features**: - Implement verified listings with a backend verification process. - Add search and filter functionalities for the listings. - Create the roommate matching system based on user profiles. - Allow users to leave reviews and ratings for listings and roommates. 4. **Design the UI**: Develop the UI components using Tailwind CSS, ensuring adherence to the minimalist design principles. 5. **Test Responsiveness**: Ensure the application is fully responsive and optimized for mobile devices, making adjustments as necessary. 6. **Deploy the Application**: Use a platform like Vercel or Netlify for deployment, ensuring a smooth and fast user experience. ## USER EXPERIENCE The application should provide a seamless user experience, starting from the sign-up process to browsing listings and finding potential roommates. Key interactions should include easy navigation through listings, simple filtering options, and straightforward roommate matching. The interface should feel intuitive, allowing students to quickly find and connect with verified housing options and peers. This design and functionality will cater to the needs of Generation Z, focusing on modern aesthetics and usability, ensuring that students have a reliable and enjoyable platform for their housing needs.
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!
