WriterFlow

WriterFlow is a collaborative document editor for teams that want writing, diagramming, and real-time editing in one place. It combines a Tiptap-based editor with Excalidraw blocks, Yjs synchronization, and AI-assisted diagram generation.

Live Demo

Production URL: https://pruthvi.tech

The project is live and running in production.

What this project does

WriterFlow reduces context-switching during planning and documentation. Instead of jumping between a text editor, whiteboard app, and separate collaboration tools, teams can:

• write and structure documents,
• generate or draw diagrams inline,
• collaborate with live cursors and presence,
• and keep the entire workflow persisted in one system.

Features

• Real-time collaboration: multi-user editing with live presence and collaborative cursors.
• Rich text editing: headings, lists, code blocks, quotes, and formatting controls.
• Inline diagrams: Excalidraw canvas blocks directly inside documents.
• AI diagram generation: convert natural language prompts into structured diagram elements.
• Authentication and protected routes: secure sessions and controlled document actions.
• Document workflow: create, list, open, edit, save, share links, and PDF export.
• Animated UI: motion-based landing interactions, smooth transitions, and responsive polish.

Animations and UI direction

The current product already uses animation in key user-facing surfaces. To keep the experience smooth and readable, animation should stay purposeful:

• micro-interactions for toolbar and editor actions,
• clear transition states for loading/syncing/reconnecting,
• subtle collaborative feedback for presence and cursor changes,
• and consistent motion timing across landing, dashboard, and editor views.

Tech Stack

Frontend

• Next.js 14 (App Router)
• React 18
• TypeScript
• Tailwind CSS
• Radix UI

Editor and Collaboration

• Tiptap
• Yjs
• Hocuspocus (provider + dedicated collaboration server)
• Excalidraw

Backend and Data

• Next.js route handlers
• Supabase (Auth + Postgres)
• Zod validation
• jose (JWT for collaboration tokens)

AI

• Groq Chat Completions API

Deployment / Infrastructure

• Docker + Docker Compose
• Nginx reverse proxy
• AWS EC2

Project Structure

app/                      Next.js pages, layouts, and API route handlers
components/               UI, landing, editor, auth, and diagram components
hooks/                    Collaboration, editor state, and document hooks
lib/                      Auth, env, database access, and collaboration utilities
collaboration-server/     Hocuspocus WebSocket collaboration backend
supabase/migrations/      SQL schema and RLS migrations
nginx/                    Reverse proxy and SSL configuration
scripts/                  Deployment and server setup helpers

Local Setup

1. Install dependencies

   • npm ci
   • npm --prefix collaboration-server ci

2. Configure environment files

   • copy .env.example to .env.local
   • copy collaboration-server/.env.example to collaboration-server/.env

3. Run both services

   • npm run dev
   • npm run collab:dev

4. Open http://localhost:3000

Deployment

Production is hosted on AWS EC2 using a containerized architecture:

• Next.js app container
• dedicated Hocuspocus collaboration container
• Nginx for reverse proxy and TLS termination

Supporting infrastructure files are included in this repository, including Dockerfile, docker-compose.yml, and Nginx configuration.

Future Improvements

• Expand animation consistency across dashboard and editor states.
• Improve perceived performance for large collaborative documents.
• Enhance version history and restore UX.
• Add richer AI diagram controls (layout presets and refinement actions).

Development Notes

Some parts of this project were built with assistance from Codex during development.

License

Package metadata currently uses the ISC license.