Full-Stack Apps

Notion Clone with AI & Live Collaboration

Overview

A modern note-taking application inspired by Notion, with built-in AI features and real-time multi-user collaboration. Users can chat with their documents, generate automatic summaries, translate content on the fly, and co-edit alongside teammates in real time — all behind a secure authentication layer. Outcome: A production-ready Notion alternative that combines familiar note-taking ergonomics with modern AI document intelligence.

Architecture & Pipeline

flowchart LR
    n0["
Browser Client
Next.js · React · Shadcn
"]
    n1["
Authentication
Clerk
"]
    n2["
Document Store
Firestore
"]
    n3["
Live Collaboration
Liveblocks
"]
    n4["
AI Tasks Edge
Cloudflare Workers
"]
    n5["
LLM Operations
OpenAI · chat / summarize / translate
"]
    n0 --> n1
    n1 --> n2
    n2 --> n3
    n3 --> n4
    n4 --> n5
classDef step0 fill:#f1f5f9,stroke:#64748b,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step1 fill:#ecfeff,stroke:#06b6d4,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step2 fill:#f0fdfa,stroke:#0d9488,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step3 fill:#ecfdf5,stroke:#10b981,color:#1e293b,stroke-width:2px,rx:10,ry:10;
classDef step4 fill:#fffbeb,stroke:#f59e0b,color:#1e293b,stroke-width:2px,rx:10,ry:10;
    class n0 step0;
    class n1 step1;
    class n2 step2;
    class n3 step2;
    class n4 step3;
    class n5 step4;

End-to-end flow derived from this project's scope and tech stack. Tap View Fullscreen for a larger view, or scroll horizontally on small screens.

Key Features

  • Chat-with-document Q&A powered by OpenAI
  • Automatic document summarization
  • Real-time machine-learning-based translation
  • Live multi-user collaboration with Liveblocks
  • Secure authentication and user management with Clerk
  • Cloud-native AI tasks via Cloudflare Workers
  • Tech Stack:** Next.js, React, Clerk, Liveblocks, Shadcn UI, OpenAI, Firestore, Cloudflare Workers