Timeframe
-
Github
Objective
A lightweight Notion/Google Docs-style rich text editor with sharing & role-based access.
Technologies
00
JWT-based secure login and registration
01
Document dashboard listing all docs per user
02
Rich WYSIWYG editor with formatting and structure tools
03
Generate shareable document links with token tokens
04
Support for private, user-shared, and public docs
05
IndexedDB storage for persistent sharing tokens
06
Document viewing/editing based on role/permissions
Frontend
The frontend is a single-page application built on Next.js. It renders the dynamic rich text editor using Tiptap and Shadcn UI components, and connects to backend APIs for authentication, document CRUD, and sharing. State is centrally managed by Zustand and remote data is synchronized via React Query, enabling caching, optimistic updates, and network handling.
Backend
The backend (separate repo) implements REST APIs for auth, document operations, sharing, and access controls. The frontend calls these APIs securely using JWT tokens in HTTP-only cookies.
00
Ensuring secure document access without over-exposure
Implemented robust JWT auth with HTTP-only cookies and granular role checks on every backend API call, ensuring that only authorized users or valid link token holders can fetch/edit docs.
Implemented robust JWT auth with HTTP-only cookies and granular role checks on every backend API call, ensuring that only authorized users or valid link token holders can fetch/edit docs.
01
Maintaining persistence of share tokens across sessions
IndexedDB was used for storing link tokens on the client, which allowed users to revisit shared documents without re-entering them. This also required careful syncing logic to revalidate tokens on load.
IndexedDB was used for storing link tokens on the client, which allowed users to revisit shared documents without re-entering them. This also required careful syncing logic to revalidate tokens on load.
02
Balancing editor responsiveness with state sync
Using Zustand with React Query allowed decoupling local editor state from remote document sync, enabling smoother typing without network lag.
Using Zustand with React Query allowed decoupling local editor state from remote document sync, enabling smoother typing without network lag.
00
How to build a composable rich text editor UI with Tiptap.
01
Handling secure auth flows (access + refresh tokens) in a frontend app.
02
Best practices for document sharing and role-based visibility.
03
Persisting session data in browser storage safely (IndexedDB vs localStorage).
00
Initial MVP lacked persistent link token storage, causing repetitive re-authentication on revisit (fixed with IndexedDB).
01
Early editor implementation didn't handle offline typing gracefully.
00
Real-time collaborative editing with WebSockets or CRDT.
01
Hosted demo deployment for showcase.
02
Document version history & undo/redo enhancements.
Next Project