Web App

The Web App is a modern, production-ready template for building full-stack React applications. Use this starter kit when you want a clean starting point for a React project with server-side rendering, TailwindCSS styling, TypeScript, a Supabase backend, and an AI-friendly project structure, without spending time on boilerplate setup.

Launch

Launch Web App on Diploi to create a new project from this starter kit. Like any Diploi project, it can be extended with more components and add-ons through its diploi.yaml file.

Tech stack

Technology	Role
React	UI framework
React Router	Routing and SSR
Supabase	Backend (database, auth, edge functions)
TailwindCSS	Styling
TypeScript	Language

Readme

A production-ready React Router + Supabase starter that showcases SSR, runtime ENV wiring, Tailwind CSS styling, and Supabase-backed data flows.

This starter kit demonstrates:

🔐 Supabase API access with typed helpers
⚡️ React Router SSR + Vite dev experience
🎨 Tailwind CSS styling with sensible defaults
🗄️ Supabase migrations, seeds, and Edge Functions
🧩 Diploi-managed components, ENV, and deployment automation

✨ Overview

This starter kit consists of two Diploi components configured in diploi.yaml:

react — React Router application (Vite, SSR, Tailwind, TypeScript)
supabase — Database, auth, migrations, seed data, Edge Functions

Diploi automatically wires the components together by injecting SUPABASE_URL and SUPABASE_ANON_KEY into the React component at runtime. No manual .env files are required in any environment.

🧱 Architecture

1️⃣ React (React Router) Component

Based on the Diploi react-vite component and the official React Router starter.
The app shell lives in app/root.tsx with SSR, streaming, and document links already configured.
Runtime environment variables load through the route loader exported from app/lib/useEnv.ts, ensuring the browser only receives the variables Diploi injects.
app/lib/useSupabase.ts exposes a singleton Supabase browser client backed by those ENV variables.
The landing view in app/welcome/welcome.tsx explains Diploi development workflow and renders a Supabase-powered todo demo via app/welcome/supabase.tsx.
Styling is handled with Tailwind CSS (already wired up through Vite) plus a minimal set of custom classes inside app/app.css.

Environment Variables

Access ENV values with the useEnv helper hook.

2️⃣ Supabase Component

Based on the Diploi supabase component.
Ships with a todos table defined in supabase/migrations/20260120083000_todo.sql and sample rows in supabase/seed.sql.
Includes Edge Functions scaffolding inside supabase/functions with a main router (supabase/functions/main/index.ts) and a hello example (supabase/functions/hello/index.ts).
Works seamlessly with the Supabase Studio bundled in the component. Diploi exposes the correct connection strings via the Diploi Console.

💡 Docs

Build something great! 🚀