SIMPLIFYING THE ARCHITECTURE

Full-Stack Simplified

SvelteKit 5 Supabase Drizzle ORM Postgres

Modern web development can feel like a "black box" of buzzwords. You've heard of databases, servers, and frontends—but how do they actually talk to each other?

This guide strips away the jargon and explains the Code Zero stack using one simple mental model: A Restaurant.

  ┌──────────┐      ┌──────────┐      ┌──────────┐
  │ Browser  │ ───> │ SvelteKit│ ───> │ Database │
  │ (User)   │ <─── │ (Logic)  │ <─── │ (Postgres)│
  └──────────┘      └──────────┘      └──────────┘
       ^                 |                 |
     Svelte            Node.js           Supabase

# The Big Picture

At Code Zero, we use a Full-Stack Architecture. This means we control the experience from the moment you type our URL to the moment your data is safely locked in a high-security vault.

THE RESTAURANT MODEL
The Dining Room The Frontend (Svelte). Where the user sits and interacts.
The Waiter The Backend (SvelteKit Server). Taking orders and checking IDs.
The Kitchen Node.js. The power and equipment that makes things work.
The Fridge Postgres. Where all the raw ingredients (data) are stored.

# 1. The Face: SvelteKit Frontend

Svelte 5 & Tailwind

The Browser Layer

This is what the user sees. We use Svelte because it's fast and reactive—meaning the page updates instantly when you click a button without "refreshing." Tailwind CSS is the design language we use to make everything look modern and clean without writing slow, bulky code.

Server-Side Rendering (SSR) for instant first-load

Client-side "Hydration" for snappy interactions

# 2. The Brain: SvelteKit Server

SvelteKit (+page.server.ts)

The Backend Logic

SvelteKit isn't just for the frontend—it's Full-Stack. The "Server-Side" is where our private logic lives. It's the gatekeeper that validates your password, processes your payments, and fetches private data from the database before it ever touches your browser.

SECURITY FIRST

Your database keys and secret formulas never leave this layer. The user only sees what the Brain decides they can see.

# 3. The Engine: Node.js

Node.js Runtime

The Operating Environment

If SvelteKit is the software, Node.js is the engine. It's a version of JavaScript that runs on a computer (server) instead of a browser. It gives SvelteKit the "superpowers" to read files, connect to databases, and talk to AI models like Gemini.

# 4. The Manager: Supabase

Supabase

Backend-as-a-Service (BaaS)

INFRASTRUCTURE

Supabase provides the "Heavy Machinery." Instead of building our own login systems and file servers, we use Supabase to manage Authentication, Postgres Hosting, and File Storage.

Secure User Auth Managed Postgres Edge Functions Real-time Sync

# 5. The Translator: Drizzle ORM

Drizzle ORM

The Object-Relational Mapper

Databases speak SQL. Developers speak TypeScript. Drizzle is the translator that lets them talk. It maps our code to database tables so we can query data safely. If we make a typo in our code, Drizzle catches it before the app even runs.

drizzle-query

// Instead of raw SQL strings...

$ db.select().from(users).where(eq(users.id, 1))

# 6. The Fridge: Postgres

PostgreSQL

The Relational Database

The "Source of Truth." This is the actual industrial-grade database where your data lives. It's built for speed, reliability, and complex relationships between millions of pieces of data.

Quick Terms

Table A list of items (e.g., "Users" or "Lessons")

Row A single item in a table (one specific user)