📝 Minimal WYSIWYG Editor Frontend

A minimalist, full-featured rich-text editor frontend — think a Notion-lite or Google Docs clone, with granular privacy, sharing, and access controls.

Built using cutting-edge tools: Next.js, TypeScript, Shadcn, Tiptap, Zustand, and React Query.

---

✨ Overview

This project enables users to write, edit, and manage documents in a clean, modern interface. But it’s more than a simple editor — it supports real-world collaboration and access control features like private docs, token-based sharing, and per-user access via email.

Ideal for building your own internal documentation tool, collaborative writing platform, or note-taking app.

---

📁 Routes Overview

Route	Description
/	Landing page
/demo	Public demo of how the editor works (read-only or sandbox)
/auth/login	Login page for registered users
/auth/register	Sign-up page
/doc	Dashboard listing all your documents
/doc/:id	View and edit a specific document
/link	Displays all saved shared document links from IndexedDB
/link/:linkToken	Open a shared document via token (if permitted)

---

🔐 Role-Based Access & Document Sharing

Users have full control over document visibility and permissions:

• Private: Only visible to the document owner.
• Shared with specific users: Grant access to individual users via email.
• Link-based sharing:
  • Generate a linkToken to share the doc.
  • When accessed, the token is saved to the browser using IndexedDB.
  • Tokens can be revoked by the document owner.
• Public: Anyone with the link can view the document.

All access is managed using secure JWT-based authentication with HTTP-only cookies.

---

🚀 Key Features

• 📝 Rich WYSIWYG editing with Tiptap editor
• 🔒 Authentication with secure JWT + cookie flow, Refreshtoken & Access Tokens
• 📁 Document dashboard to manage and organize documents
• 📤 Document sharing:
  • Private, public, or shared via email
  • Link token generation & revocation
• 💾 Persistent sharing tokens stored securely via IndexedDB
• ⚙️ Tech Stack:
  • Next.js
  • TypeScript
  • Shadcn UI
  • Zustand (state management)
  • React Query (data fetching)

---

📸 Suggested Screenshots

1. Landing Page (/)
2. Demo Editor View (/demo)
3. Document Dashboard (/doc)
4. Editor in Action (/doc/:id)
5. Login and Register Screens
6. Link Sharing Page (/link)
7. Link Token View (/link/:linkToken)
8. Sharing Settings Modal / UI

📸 Screenshot

---

🧠 Backend Repository

The backend is built with Express.js and handles authentication, document CRUD operations, sharing controls, and role-based access. 🔗 Backend Repo Link

---

⚙️ Quick Setup

# install dependencies
npm install

# run dev server
npm run dev