A Complete Course: How to Build a Full-Stack App with Lovable (No-Coding)
I documented everything step-by-step: UI, database, authentication, roles, and permissions. A 2:16:54 recording.
Hey, Pawel here. Welcome to a special edition of The Product Compass Newsletter.
Many subscribers have been asking me about building full-stack apps without coding.
Inspired by the recent post, Mastering AI Evals: A Complete Guide for PMs, I spent 2+ hours documenting the entire process.
We start from a blank page and build a web app (LLM Trace Evaluator) with:
Data stored in a database
Secure user authentication
Roles and permissions enforced by the backend
No cuts. No fast forwards.
Just me, Lovable, and Supabase.
The end result:
Below you’ll find the full video (2:16:54) with chapters:
(00:00) Our objective: Analyzing and evaluating LLM traces
(00:57) Plan and initialize the app layout
(04:25) Build a record viewer (the main component)
(09:09) I'm fixing UI/UX issues
(15:58) Connect to Supabase
(52:41) I'm fixing quick reports
(56:00) Add a filters component
(1:06:26) Create a dedicated reports page
(1:20:32) Add roles, permissions, and policies
(1:36:00) Improve mobile views and the layout + GitHub
(2:00:00) Summary (and small fixes)
P.S. I comment on each step and share best practices, but if anything's unclear, I’ll answer all your questions during our weekly Zoom session on Tuesday.
P.S.S. In May 2025, I’ll record another video on setting up Stripe integration and adding Google authentication, so you can monetize your product 🚀
Let’s dive in: 👇
Keep reading with a 7-day free trial
Subscribe to The Product Compass to keep reading this post and get 7 days of free access to the full post archives.