CollabNote is a modern collaborative note-taking app built with Next.js, Clerk for authentication, Liveblocks for real-time collaboration, and a rich block-based editor powered by BlockNote. Users can write, edit, and share notes in real time—with autosave and live cursors.

AI summarization live now!

• Auth via Clerk (Google and email)
• Rich text editor with BlockNote
• Real-time collaboration with Liveblocks
• AI-Powered Summarization (select text → get a concise summary)
• Light/dark theme support via next-themes
• Ready for deployment on Vercel

• Framework: Next.js 15
• Styling: Tailwind CSS
• Auth: Clerk
• Editor: BlockNote + Yjs
• Collaboration: Liveblocks
• Database: PostgreSQL (via Neon) + Drizzle ORM
• ORM: Drizzle
• Realtime syncing: Y.js + Liveblocks
• AI Integration: Cohere Command Model
• Hosting: Vercel

src/
│
├── app/                  # Next.js App Router structure
│   ├── api/auth-endpoint/route.ts  # Backend auth route (Clerk)
│   ├── documents/        # Page routes for documents
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Entry page
│
├── components/           # Reusable UI components
├── db/                   # Drizzle schema, migrations
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
├── middleware.ts         # Auth middleware

1. Clone the repo:

   git clone https://github.com/your-username/collab-note.git
   cd collab-note

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env.local file:

   DATABASE_URL=your_postgres_db_url
   CLERK_PUBLISHABLE_KEY=...
   CLERK_SECRET_KEY=...
   NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY=...
   LIVEBLOCKS_SECRET_KEY=...
   COHERE_API_KEY=...

4. Run locally:

   npm run dev

5. Build for production:

   npm run build

** AI Summarization of notes** select any text and generate a summary in seconds

• ✅ Make sure you're using the production Liveblocks project key
• ✅ Clear test data from your DB (via Neon console or Drizzle migrations)
• ✅ Add .ico logo in public/favicon.ico for custom tab branding
• ✅ Update site name and description in src/app/layout.tsx

Use Vercel to deploy:

1. Push your code to GitHub
2. Import the project on Vercel
3. Set up all environment variables in the Vercel dashboard
4. Use a custom domain as Clerk does not allow domain given by vercel
5. Done! 🎉

Built with ❤️ by Shinjon — open to feedback and contributions.