No‑Code, No Problem: How We Built a Web App Prototype in a Weekend
Unlocking the power of vibe coding with Supabase, Lovable and AI to transform an idea into an interface.
⚠️ Disclaimer: This project is a design prototype, not a functioning web app. The interface is clickable, but the backend logic and data flows are not live. All links and data shown are placeholders for demonstration purposes only.
💭 Context
When I arrived in Madrid in 2023 to pursue my MBA at IE University, I encountered the same issue nearly every expat faces: the nightmare of finding housing. Facebook groups were noisy and unreliable. Rental platforms were expensive and impersonal. During that time, my MBA colleague and I created a WhatsApp group for our MBA batch. In just a few weeks, the group grew quickly.
Now, in 2025, as it has expanded to include over 1,000 members from across Madrid, I often think to myself: Can I create a website for the platform? Something smarter, structured, searchable, and scalable.
⚡ Why We Built This: Making Web Development Less Scary
For many non-engineers, the idea of building a website sounds overwhelming. But with modern tools like Lovable and Supabase, it's no longer about writing thousands of lines of code. Instead, it's about solving real problems through design, logic, and curiosity.
So we challenged ourselves: can non-tech professionals with no backend experience build a prototype interface in just one weekend? We could!
This is not just a story about housing. It’s a story about accessibility; how today’s tools make web development approachable for anyone willing to tinker.
🛠️ The Tech Stack
Lovable served as the visual builder. We designed pages and connected them to Supabase without writing front‑end code.
OpenAI & SQL generated recommendation logic and suggested table schemas.
Supabase handled our database, authentication, and serverless functions. It’s built on PostgreSQL and scales when needed, eliminating the need to manage servers or configure databases.
📂 Project Structure
The below project structure is a simplified blueprint created by Supabase to support the full stack application:
hala-madrid-housing/
├── database/
│ ├── schema.sql # table definitions
│ ├── functions.sql # stored procedures and functions
│ └── policies.sql # row‑level security policies
│
├── backend/
│ ├── edge-functions/
│ │ ├── property-matching.ts # logic to match properties
│ │ ├── user-preferences.ts # save and retrieve user preferences
│ │ └── recommendation-engine.ts # calculates recommendation scores
│ │
│ └── supabase/
│ ├── config.toml # Supabase project configuration
│ └── migrations/ # database migrations generated by Supabase
│
├── frontend/
│ ├── components/
│ │ ├── PropertySearch.tsx # search bar and filters
│ │ ├── NeighbourhoodMap.tsx # interactive map of neighbourhoods
│ │ └── UserPreferencesForm.tsx # form to set user preferences
│ │
│ ├── hooks/
│ │ ├── usePropertySearch.ts # fetches properties based on filters
│ │ └── useRecommendations.ts # retrieves recommended listings
│ │
│ └── pages/
│ ├── index.tsx # landing page
│ ├── search.tsx # search results page
│ └── profile.tsx # user profile page
The /database folder holds SQL scripts such as neighbourhoods.sql and properties.sql, which define tables for districts, prices, safety indices and amenities. The /backend/edge-functions directory contains functions for property matching and user preferences, while backend/supabase stores configuration files. On the client side, /frontend houses React components like PropertySearch.tsx and pages for the home, search and profile views. This modular structure lets us iterate quickly, even though the backend logic isn’t live yet.
🖼️ Front-End Build
By Sunday night, we had a clickable interface that looked and felt like a real housing platform. While vibe coding with Lovable, we assembled listing cards, search filters, and WhatsApp contact buttons without writing JavaScript. Because Lovable is connected directly to Supabase, every change in the UI syncs with our database schema. Still, this is a demo, not a live product, meaning, no authentication or data retrieval occurs when you click.
With Lovable, we prompted:
"I want a clean, modern housing site that’s easy for students and landlords to navigate."
⚙️ Back-End Build
Now that we have created a front end, we need to empower it with a robust back-end engine that can handle the heavy lifting behind the scenes.
💾 Setting Up a Database
Supabase lets you spin up a relational database with a single click and scale as you grow. We asked OpenAI to suggest fields for a neighbourhood table using the following prompt:
"What kind of fields should I include in a table that describes how livable or convenient a neighbourhood is?"
After a few iterations we settled on simplified schemas like:
CREATE TABLE neighbourhoods (
id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
name TEXT NOT NULL,
district TEXT,
safety_index NUMERIC(5,2),
metro_proximity BOOLEAN,
walkability_score INTEGER
);Similarly, we create an SQL table for properties listed on the platform. Looking at the PropertySearch component, we can see the application searches properties based on specific filters: district, price range, bedrooms, and amenities. The component queries a 'properties' table and orders results by 'match_score', indicating our recommendation engine ranks properties for users.
CREATE TABLE properties (
id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
district TEXT NOT NULL,
price NUMERIC(10,2) NOT NULL,
bedrooms INTEGER NOT NULL,
amenities TEXT[],
match_score NUMERIC(5,2),
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);🧠 Personalized Matching Logic
Now we need to define the logic to match users with ideal neighbourhoods and properties.
To match properties, we asked Supabase:
"How can I calculate a match score between a property and user preferences for price and neighbourhood?"
Supabase recommended that we use an SQL script that balances budget and district preferences:
SELECT id,
((1 - ABS(price - max_budget)/max_budget) * 0.5 + district_score * 0.5) AS match_score
FROM properties
WHERE price <= max_budget
ORDER BY match_score DESC
LIMIT 10;Another query ranks neighbourhoods based on safety, walkability and metro access. These examples illustrate how AI and SQL can create recommendation engines, but they need real data and careful tuning before deployment.
🔐 User Sign-up Flow
We used Supabase’s built‑in authentication to register users.
Authentication logic:
"Register a new user with preferences and store in Supabase."
await supabase.auth.signUp({
email,
password: 'Secure123!',
options: { data: preferences }
});🏠 Matching Users with Ideal Properties
To return top matches, we drafted a stored function that accepts a user’s ID, maximum budget and preferred districts. It queries the properties table for listings below the budget in those districts and sorts results by price or other attributes. This function would live in the /backend/edge-functions directory, ready to be invoked from the front end once the app goes live.
🔗Connecting Front-End and Back-End
Lovable’s real value is how it connects your UI seamlessly to the backend. Every field you add in Supabase shows up as a data source in Lovable, so you can drag it into your layout and bind it to a form or component. This real‑time sync lets you prototype a working app visually.
📈 Key Learnings and Takeaways
🚀 Lessons for Non-Tech Builders
No‑code democratizes development: Non-developers can now build applications without any coding knowledge. The real differential is having clarity on the idea and ability to conceptualize it into a product.
Prototyping is fast but limited: We built a polished front‑end in a weekend. However, without deploying backend functions and enforcing security policies, it remains a mock‑up.
Data and logic are king: Recommendation engines sound exciting, but they depend on high‑quality data and thoughtful weighting. We used simplified formulas; real‑world performance will vary.
Costs and metrics: There are no investors or venture capital behind this experiment. In test mode Supabase responded to queries in under 50 ms and our matching logic reached 85% relevance accuracy on dummy data. These numbers come from internal tests and are not independently verified.
👉 Explore our full prototype and code: GitHub Repository.
📌 What’s Next: From Demo to Deployment
If we decide to move from prototype to product, our roadmap would include:
Deploying the front end with hosting providers such as Vercel or Netlify.
Enforcing Supabase row‑level security policies to protect user data.
Deploying edge functions for property matching and user preferences.
Conducting user‑flow tests to validate sign‑up, search and messaging.
🚀 Final Thoughts
If you’ve ever had an idea but didn’t know how to build it, this is your sign.
Whether you’re a non‑technical founder or someone with a passion project, the barrier to entry has never been lower. With tools like Supabase, Open AI, and Lovable, we built a polished prototype during a weekend. No prior coding knowledge. No engineering team. Just curiosity, prompts, and a clear problem to solve.
💡If you liked this read, check out our previous publication on the autonomous enterprise and the secret tool (Spoiler : MCP) making it possible:
📢 Enjoyed this post? Subscribe for free and share it with someone curious about how tech is transforming our lives. Stay tuned for more!
👇 What would you build if you could prototype an app in a weekend? Share your ideas, questions or feedback below. Let’s keep the conversation going!
Every nation needs to address housing! I enjoyed this.
Cool!