Block Editor

A simple text content block editor built with React, Hono, and SQLite (using Bun's native SQLite driver).

Setup

# Install dependencies
bun install

# Seed the database with sample blocks
bun run db:seed

# Start development servers (frontend + backend)
bun run dev

The app will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:3001

Architecture

├── frontend/          # React + Vite + Tailwind
│   └── src/
│       ├── components/   # React components
│       ├── hooks/        # Custom hooks (React Query)
│       ├── api.ts        # API client
│       └── App.tsx       # Main application
├── backend/           # Hono API server
│   └── src/
│       ├── index.ts      # API routes
│       ├── db.ts         # SQLite connection (bun:sqlite)
│       └── seed.ts       # Database seeder
├── shared/            # Shared TypeScript types
│   └── src/
│       └── index.ts      # Type definitions
└── package.json       # Workspace configuration

API Documentation

GET /api/blocks

Returns all blocks ordered by position.

Response:

{
  "data": [
    {
      "id": "uuid",
      "content": "Block content",
      "position": 0,
      "created_at": "2024-01-01T00:00:00.000Z",
      "updated_at": "2024-01-01T00:00:00.000Z"
    }
  ]
}

POST /api/blocks

Creates a new block.

Request:

{
  "content": "New block content",
  "position": 0  // optional, defaults to end
}

Response: Returns the created block.

PATCH /api/blocks/:id

Updates a block's content.

Request:

{
  "content": "Updated content"
}

Response: Returns the updated block.

DELETE /api/blocks/:id

Deletes a block.

Response:

{
  "data": { "deleted": true }
}

PATCH /api/blocks/reorder

Updates positions of multiple blocks.

Request:

{
  "blocks": [
    { "id": "uuid1", "position": 0 },
    { "id": "uuid2", "position": 1 }
  ]
}

Response:

{
  "data": { "updated": true }
}

Available Scripts

Script	Description
bun run dev	Start both frontend and backend
bun run dev:frontend	Start only the frontend (port 5173)
bun run dev:backend	Start only the backend (port 3001)
bun run db:seed	Seed the database with sample data