Blocknote

AI-Native Document Workspace - A modern, block-based document editor with built-in AI writing assistance. Built with Next.js 14, Prisma, and SQLite.

Architecture

                         +-----------------+
                         |   React UI      |
                         | (Next.js Pages) |
                         +--------+--------+
                                  |
                    +-------------+-------------+
                    |                           |
           +--------v--------+        +--------v--------+
           | Next.js API     |        | AI Service      |
           | Routes (REST)   |        | (Mock Mode)     |
           +--------+--------+        +-----------------+
                    |                  - summarize
                    |                  - expand
           +--------v--------+        - improve
           |  Service Layer  |        - translate
           |  (Business      |
           |   Logic)        |
           +--------+--------+
                    |
           +--------v--------+
           |   Prisma ORM    |
           +--------+--------+
                    |
           +--------v--------+
           |     SQLite      |
           |    Database     |
           +-----------------+

Features

• Block-based editor with 7 block types: text, heading1, heading2, heading3, list, code, quote
• AI writing assistant for summarizing, expanding, improving, and translating text
• Full-text search across all pages and block content
• User authentication with JWT tokens and bcrypt password hashing
• Public page sharing - make any page publicly accessible
• Responsive workspace with sidebar navigation

Tech Stack

Layer	Technology
Frontend	React 18, Next.js 14 App Router
Styling	Tailwind CSS
Backend	Next.js API Routes
ORM	Prisma
Database	SQLite
Auth	JWT (jsonwebtoken) + bcryptjs
Testing	Jest + ts-jest
Language	TypeScript

Setup

# 1. Install dependencies
npm install

# 2. Push database schema
npx prisma db push

# 3. Seed the database
npm run db:seed

# 4. Start the development server
npm run dev

The app will be available at http://localhost:3000.

Demo Accounts

Email	Password
alice@example.com	password123
bob@example.com	password123

API Documentation

All API routes return JSON. Protected routes require an Authorization: Bearer <token> header.

Authentication

Method	Endpoint	Body	Description
POST	/api/auth/signup	{ email, name, password }	Register a new user
POST	/api/auth/login	{ email, password }	Login and get JWT token
GET	/api/auth/me	-	Get current user profile

Pages

Method	Endpoint	Body	Description
GET	/api/pages	-	List user's pages
POST	/api/pages	{ title?, icon? }	Create a new page
GET	/api/pages/:id	-	Get page with blocks (public OK)
PUT	/api/pages/:id	{ title?, icon?, isPublic? }	Update page (owner only)
DELETE	/api/pages/:id	-	Delete page (owner only)

Blocks

Method	Endpoint	Body	Description
POST	/api/blocks	{ pageId, type, content, order, metadata? }	Create a block
PUT	/api/blocks/:id	{ type?, content?, order?, metadata? }	Update a block
DELETE	/api/blocks/:id	-	Delete a block

AI Assistant

Method	Endpoint	Body	Description
POST	/api/ai/assist	{ action, content }	AI text transformation

Actions: summarize, expand, improve, translate

Search

Method	Endpoint	Description
GET	/api/search?q=query	Full-text search across pages and blocks

Testing

# Run all tests
npm test

# Run with verbose output
npx jest --verbose

Test suites:

• __tests__/lib/auth.test.ts - Password hashing, JWT generation/verification (6 tests)
• __tests__/lib/services/ai-service.test.ts - AI text transformations (6 tests)
• __tests__/lib/services/search-service.test.ts - Full-text search (4 tests)

Project Structure

blocknote/
├── prisma/
│   ├── schema.prisma          # Database schema
│   └── seed.ts                # Seed data script
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/          # signup, login, me
│   │   │   ├── pages/         # CRUD + [id]
│   │   │   ├── blocks/        # CRUD + [id]
│   │   │   ├── ai/            # AI assistant
│   │   │   └── search/        # Full-text search
│   │   ├── login/             # Login page
│   │   ├── signup/            # Signup page
│   │   ├── workspace/         # Workspace + [pageId]
│   │   ├── layout.tsx         # Root layout
│   │   ├── page.tsx           # Landing page
│   │   └── globals.css        # Global styles
│   ├── components/
│   │   ├── AuthForm.tsx       # Reusable auth form
│   │   ├── Navbar.tsx         # Top navigation
│   │   ├── Sidebar.tsx        # Page list sidebar
│   │   ├── PageEditor.tsx     # Main editor
│   │   ├── Block.tsx          # Block component
│   │   └── AIAssistant.tsx    # AI assistant panel
│   └── lib/
│       ├── auth.ts            # Auth utilities
│       ├── db.ts              # Prisma client singleton
│       └── services/
│           ├── ai-service.ts      # AI text operations
│           ├── block-service.ts   # Block CRUD
│           ├── page-service.ts    # Page CRUD
│           └── search-service.ts  # Search implementation
├── __tests__/                 # Jest test suites
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── jest.config.ts