Notion 스타일의 풀스택 문서 편집 웹 애플리케이션
Next.js 13, TypeScript, Convex, Clerk, BlockNote 기반
🔗 Demo: ryoon-with-nomnom-googlemap.vercel.app
📄 Sample Document: Published Note
실시간 동기화, 인증, 파일 업로드, 문서 관리, 퍼블리싱 시스템을 갖춘 Notion 클론 프로젝트입니다.
| 영역 | 기술 |
|---|---|
| Frontend | Next.js 13 (App Router), TypeScript, Tailwind CSS |
| Backend / Database | Convex (Realtime Database) |
| Auth / Identity | Clerk |
| State Management | Zustand |
| File Storage | EdgeStore |
| Rich Editor | BlockNote (based on ProseMirror) |
| Infra / Deploy | Vercel (CI/CD), Env-based Config |
| Tooling | ESLint, Prettier, GitHub, .env 구성 분리 |
- 📝 Notion-style Editor — BlockNote 기반의 WYSIWYG 문서 편집
- 🌲 Infinite Nested Documents — 무한 트리 구조 문서 계층 지원
- 🔐 Clerk Authentication — 사용자별 로그인/로그아웃 및 세션 관리
- 🌐 Publish & Share — 작성 문서를 외부 공개 및 링크 공유
- 🖼️ Cover Image Upload — 문서별 커버 이미지 지정 및 변경
- 🌠 Emoji-based Document Icon Picker — 실시간 변경 반영
- 🌓 Light / Dark Mode — UI 전역 테마 관리
- 🗑️ Soft Delete & Trash Recovery — 문서 복구 기능 포함
↔️ Expandable Sidebar — 접기/펼치기 지원 및 반응형 대응- 🔄 Real-time Updates (Convex) — 모든 변경사항이 즉시 반영
- 📱 Full Mobile Responsiveness — 완전한 반응형 인터페이스
개발/로컬 환경 (.env.local)
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=프로덕션 환경 (.env.production)
CI=false
CONVEX_DEPLOY_KEY=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=Clerk와 Convex 연동을 위해 auth.config.js 파일 설정이 필요합니다.
npm install
# or
pnpm install
# Run development server
npm run dev