Cascade

A rich text editor — built with SvelteKit, Go, Supabase, and MongoDB. Access Link | Interactive Docs

---

If you find this project useful or find it interesting enough to clone and make it your own, consider starring the repo — it genuinely helps!

---

Overview

Cascade is a real-time collaborative document editing platform. Users authenticate securely via Google OAuth (powered by Supabase), and their sessions are validated server-side by a Go backend before any data is persisted to MongoDB.

The project is intentionally kept full-stack and minimal at its core — authentication and user management are rock-solid before document features are layered on top.

---

Architecture

┌──────────────────────┐        ┌────────────────────────┐        ┌─────────────┐
│   SvelteKit Frontend │ ──────▶│     Go REST Backend    │ ──────▶│   MongoDB   │
│  (Vite · TypeScript) │        │  JWT verified via JWKS │        │  (Atlas)    │
└──────────────────────┘        └────────────────────────┘        └─────────────┘
           │                                  ▲
           │       Supabase Auth              │
           └──────────────────────────────────┘
                  Google OAuth 2.0

• The frontend handles login and session management via @supabase/supabase-js.
• On sign-in, the frontend sends the Supabase JWT to the Go backend.
• The backend validates the token by fetching Supabase's JWKS endpoint, then upserts the user record into MongoDB.

---

Tech Stack

Layer	Technology
Frontend	SvelteKit (Svelte 5, TypeScript, Vite)
Backend	Go 1.22 — standard net/http
Auth	Supabase + Google OAuth 2.0
Database	MongoDB (via mongo-driver/v2)
Editor	TipTap (ProseMirror based rich-text editor)
AI Inference	Groq API (llama-3.1-8b-instant model)
Styling	Vanilla CSS — glassmorphism, pinkish theme

---

Project Structure

cascade/
├── backend/
│   ├── main.go          # Go HTTP server — auth callback, health check
│   ├── go.mod
│   └── .env             # SUPABASE_URL, MONGODB_URI, MONGODB_DB
│
└── frontend-new/
    ├── src/
    │   ├── lib/
    │   │   ├── supabase.ts              # Supabase client initialisation
    │   │   └── components/
    │   │       ├── Navbar.svelte        # Top nav — brand, Create+, Sign out
    │   │       ├── DocumentsPage.svelte # Document list / empty state
    │   │       └── LoadingScreen.svelte # Spinner / redirect fallback
    │   └── routes/
    │       ├── +page.svelte             # Landing / login page
    │       └── dashboard/
    │           └── +page.svelte         # Auth-gated dashboard (orchestrator)
    ├── package.json
    └── .env             # PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY

---

Authentication Flow

1. User clicks "Continue with Google" on the landing page.
2. Supabase handles the OAuth redirect and issues a signed JWT.
3. The SvelteKit dashboard calls GET /auth/callback on the Go backend, passing the JWT as a Bearer token.
4. The Go server fetches Supabase's JWKS and cryptographically verifies the token.
5. The verified user is upserted into MongoDB (creates on first login, updates lastLoginAt on subsequent logins).

---

Getting Started

Prerequisites

• Go >= 1.22
• Node.js >= 18
• A Supabase project with Google OAuth enabled
• A MongoDB cluster (Atlas free tier works fine)

---

Backend

cd backend

# Copy and fill in your environment variables
cp .env.example .env

# Run the server (listens on :8080)
go run main.go

.env keys required:

SUPABASE_URL=https://<your-project>.supabase.co
MONGODB_URI=mongodb+srv://<user>:<pass>@cluster.mongodb.net/
MONGODB_DB=cascade
GROQ_API_KEY=<your-groq-api-key>

---

Frontend

cd frontend-new

# Install dependencies
npm install

# Copy and fill in your environment variables
cp .env.example .env

# Start the dev server (http://localhost:5173)
npm run dev

.env keys required:

PUBLIC_SUPABASE_URL=https://<your-project>.supabase.co
PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>

---

Backend API

Method	Endpoint	Description
GET	/health	Health check — returns { "status": "ok" }
POST	/auth/callback	Validates JWT and upserts user into MongoDB
GET	/documents	Lists all documents belonging to the user
POST	/documents/create	Creates a new document
GET, PUT, DELETE	/documents/{id}	Fetches, updates, or deletes a specific document
POST	/ai/process	Processes text using the Groq AI API (llama-3.1)

All endpoints use CORS middleware permitting http://localhost:5173 during development.

---

Editor & AI Features

The core document editor runs on TipTap. It includes standard rich text formatting and introduces native AI intelligence directly in the editor.

When text is selected, a floating AI Bubble appears above the formatting tools, allowing the user to seamlessly use Groq's fast inference to edit content:

• ✦ Fix grammar: Automatically fixes grammatical errors.
• ✦ Translate to Hindi: Quickly translates the selection.
• ✦ Make a table: Intelligently formats selected text into a markdown table.
• ✦ Summarise: Condenses the selected text into 2-3 sentences.
• ✦ Ask AI: Opens a modal where the user can type free-form instructions (e.g. "This is code, format it properly"), which instructs the AI exactly how to rewrite the selected text.

The Go backend safely takes the user request, verifies the user token, securely constructs the prompts, and proxies the request to the Groq API. Content returned by Groq is rendered from Markdown into native ProseMirror HTML directly in the editor.

Cascade also natively supports Document Imports. You can upload .docx or .pdf files from the Dashboard, which are locally parsed into text/HTML and converted into a new Cascade document.

---

Behind the Build — Articles on Medium

I document the engineering decisions and concepts behind this project on Medium.

@akshatmtiwari on Medium

#	Article
1	Google OAuth Explained — From Cookies to "Continue with Google"
2	Building Google OAuth with Supabase, SvelteKit and Go
3	OAuth vs SSO
4	The Headache of Maintaining Documentations in Production
5	What's Wrong With Images? — System Design of Image Storage
6	Software Environments
7	YAML Files: The Secret Script Behind Automated Deployments
8	Unit Testing with Jest: Protecting Your Code from Tomorrow

---

Roadmap

• Google OAuth authentication (Supabase)
• JWT validation in Go backend
• User upsert into MongoDB
• Dashboard UI — component-based (Navbar, DocumentsPage, LoadingScreen)
• Document creation, persistence, and deletion
• Rich Text Editor implementation (TipTap)
• Word Document (.docx) and PDF Import functionality
• Floating AI Assistant (Groq llama-3.1-8b-instant) — Grammar, Translate, Summarize, Custom Prompts
• Real-time collaborative editing using WebSockets / Yjs
• Document sharing & permissions

---

License

MIT — feel free to use this as a reference for your own full-stack SvelteKit + Go projects.