Dave Ebbelaar

Build a Full-Stack GenAI Project in 4 Hours (FastAPI, React, Supabase)

Published 2026-06-06 · Duration 3:51:50

Summary

This tutorial provides an end-to-end guide for building a production-grade Retrieval Augmented Generation (RAG) application—a Document Copilot. The project uses SEC filings data and demonstrates the complete AI engineering workflow: from initial client brief analysis to setting up the full stack (FastAPI, React/TypeScript, Supabase Postgres with pgvector). Key phases covered include database schema design using SQLAlchemy/Alembic, implementing user authentication via Supabase Auth, building a front-end chat interface, and establishing a robust document ingestion pipeline that converts messy HTM files into structured Markdown chunks for vector embedding.

Download summary

Key takeaways

  1. Full Stack GenAI Architecture 30:45

    The system is designed as a mono repo using FastAPI (backend) and React/TypeScript (frontend), connected via Supabase Postgres, which utilizes the pgvector extension for efficient vector storage and retrieval.

  2. Data Ingestion Pipeline 3:44:09

    Raw SEC filings (HTM format) are processed using Dockling to convert them into clean Markdown. This structured data is then chunked, embedded via OpenAI, and stored in the database for RAG retrieval.

  3. Database Management

    The project utilizes SQLAlchemy and Alembic for defining models (Users, Documents, Chunks, Messages) and managing schema migrations, ensuring a structured development process.

Technical details

  • Project Stack & Architecture 1845s

    Uses FastAPI, React/TypeScript, Tailwind CSS, shadcn/ui, Supabase Postgres, pgvector, OpenAI for LLMs and embeddings, and Railway for deployment. The architecture is designed to handle complex data flow from user input -> backend API -> vector search.

  • Database Modeling & Migration

    Models include `users`, `source_documents`, `document_chunks`, `chats`, and `messages`. Database schema changes are managed using SQLAlchemy, with migrations tracked by Alembic. The use of pgvector enables vector search capabilities.

  • Document Preprocessing 13449s

    The ingestion pipeline converts raw HTM files into clean Markdown format using the Dockling library (a dev dependency). This step is critical for preserving table structures and ensuring high-quality input for chunking.

  • Authentication Flow

    User authentication is managed entirely by Supabase Auth, requiring configuration of environment variables (`SUPABASE_URL`, `SUPABASE_ANON_KEY`, etc.) and setting up callback URLs in the Supabase dashboard.

Mentioned resources

  • GitHub Repository (Codebase)
  • Supabase (Database/Auth Service)
  • Dockling Library (Document Processing Tool)

Channel & topics

Watch on YouTube · Back to latest

This independent, AI-assisted summary is provided for commentary and informational purposes. It may contain errors or omit important context. Please watch the original video for the creator's complete presentation. Video, thumbnail, and related copyrights belong to their respective owners.