Next Note

A clean note‑taking app (Notion‑style) built with Next.js 15, Convex, Clerk, EdgeStore, and Tailwind/shadcn.

Live: https://next-note-app-2025.vercel.app

Repo: https://github.com/siangyin/next-note

---

Features

• Email/OAuth login (Clerk)
• Real-time database
• Create, edit, and delete notes
• Nested notes (create sub-notes)
• Soft delete (Trash) and restore
• Notion-style editor
• Command‑K search
• Fully collapsable and expandable sidebar
• Light and Dark mode
• Image uploads (EdgeStore) for note visuals/covers
• Publish your note to the web
• Responsive UI

---

Tech Stack

• Next.js 15 (App Router)
• React 19 + TypeScript
• Convex (database + server functions) https://convex.dev
• Clerk (authentication) https://clerk.dev
• Tailwind CSS + shadcn/ui https://ui.shadcn.com/
• EdgeStore (file uploads) https://edgestore.dev/
• Blocknotejs https://www.blocknotejs.org/
• Lucide Icons, cmdk, Sonner
• Vercel (deploy)

---

Screenshots

Demo: ▶ Watch demo on YouTube

Home

Documents

---

Project Structure (short)

app/
  (marketing)/...                          # public pages, landing page
  (main)/(routes)/documents/[documentId]   # authenticated app pages (documents)
  (public)/(routes)/preview/[documentId]   # public published pages
components/
  common, ui, providers (Clerk, Convex, Theme, EdgeStore), modals
convex/
  schema.ts, documents.ts, _generated, auth config
hooks/
  small UI hooks (search, scroll)
lib/
  edgestore client, small helpers
public/
  images and assets

---

Getting Started

1) Prerequisites

• Node.js 18+
• Accounts/keys for Convex, Clerk, and EdgeStore

2) Clone and install

git clone https://github.com/siangyin/next-note.git
cd next-note
npm i

3) Environment variables

Create .env.local in the project root:

# App
NEXT_PUBLIC_APP_NAME=Next note

# Convex
CONVEX_DEPLOYMENT=dev:<your-deployment>     # optional, for `npx convex dev`
NEXT_PUBLIC_CONVEX_URL=https://<your>.convex.cloud

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXX
CLERK_SECRET_KEY=sk_test_XXXX

# EdgeStore (uploads)
EDGE_STORE_ACCESS_KEY=XXXX
EDGE_STORE_SECRET_KEY=XXXX

4) Run locally

Open two terminals:

# Terminal A: Convex
npx convex dev

# Terminal B: Next.js
npm run dev

Open http://localhost:3000

5) Deploy

• Connect the repo on Vercel
• Add the same environment variables in Vercel Project Settings
• Deploy

---

Scripts

npm run dev       # start next dev server
npm run build     # production build
npm run start     # start production server
npx convex dev    # run convex locally (separate terminal)