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. And while we covered best practices, I never demonstrated the full processes.

Inspired by the recent post, Mastering AI Evals: A Complete Guide for PMs, I spent 2+ hours documenting everything.

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: 👇