Full-Stack Apps

Notion Clone with AI & Live Collaboration

Overview

A collaborative note-taking application in the shape of Notion, with document intelligence and multiplayer editing built in rather than bolted on. Several people can open the same document and write in it at once, seeing each other's cursors and changes as they happen, with Liveblocks resolving concurrent edits so nobody's work is overwritten. Documents persist to Firestore, and Clerk handles sign-in and the user and workspace management around who may open what.

The AI side treats a document as something you can interrogate rather than only read: ask a question and get an answer drawn from the document's own contents, generate a summary of a long page, or translate it into another language on the spot. Those operations run on Cloudflare Workers at the edge instead of a central server, so the round trip stays short wherever the reader is. The front end is Next.js and React with Shadcn UI.

Outcome

A production-ready Notion alternative that combines familiar note-taking ergonomics with modern AI document intelligence.

Architecture & Pipeline

  1. 01

    Browser Client

    Next.js · React · Shadcn

    • Next.js
    • React

  2. 02

    Authentication

    Clerk

    • Clerk

  3. 03

    Document Store

    Firestore

    • Firestore

  4. 04

    Live Collaboration

    Liveblocks

    • Liveblocks

  5. 05

    AI Tasks Edge

    Cloudflare Workers

    • Cloudflare

  6. 06

    LLM Operations

    OpenAI · chat / summarize / translate

    • LLM
    • OpenAI

End-to-end flow, in order. Scroll sideways on a narrow screen.

Key Features

  • Rich collaborative documents multiple people can edit at the same time
  • Live presence — teammates' cursors and edits appear as they type
  • Concurrent edits merged by Liveblocks, so no one's changes are lost
  • Ask questions of a document and get answers from its own contents, via OpenAI
  • Automatic summarization of long documents
  • On-the-fly translation into other languages
  • Documents persisted in Firestore
  • Sign-in, user and workspace management with Clerk
  • AI operations run at the edge on Cloudflare Workers
  • Next.js, React and Shadcn UI front end