DevWannaSpace Docs

Appearance

Architecture & Stack ​

Monorepo & Project Structure ​

The project is structured as an NPM Monorepo using workspace routing:

devwannaspace/
├── apps/
│   ├── api/                  # Backend: Cloudflare Workers + Hono + Drizzle ORM
│   │   ├── src/
│   │   │   ├── db/
│   │   │   │   └── schema.ts # PostgreSQL Database Schema
│   │   │   └── index.ts      # Hono HTTP routes & Clerk Auth Middleware
│   │   ├── wrangler.jsonc    # Cloudflare Worker configuration
│   │   └── drizzle.config.ts # Drizzle Kit configuration
│   ├── web/                  # Frontend Web & Wails UI: React 18 + Vite + Tiptap
│   │   ├── src/
│   │   │   ├── components/   # UI Layouts, Modals, Views, Editor
│   │   │   ├── contexts/     # Auth & Language Contexts
│   │   │   ├── lib/          # API Client (`api.ts`), Smart Sync Engine
│   │   │   ├── styles/       # Design System Tokens (`tokens.css`, `index.css`)
│   │   │   └── types.ts      # TypeScript interfaces
│   │   └── package.json
│   └── mobile/               # Mobile App: Expo / React Native
├── setup.mjs                 # Interactive CLI wizard (@clack/prompts) for 1-command deployment
├── main.go                   # Wails v2 Desktop entrypoint (Go)
├── wails.json                # Wails v2 Application configuration
├── package.json              # Monorepo root configuration
└── README.md

Database Schema & Data Model (Neon Postgres + Drizzle ORM) ​

users ​

Stores user profile information.

  • id (text, PK): Clerk User ID (user_...) or UUID.
  • username (text, Unique, Not Null)
  • avatarUrl (text, Optional)
  • createdAt (timestamp, Default now())

projects ​

Workspaces or categories grouping issues and pages.

  • id (text, PK)
  • userId (text, Not Null, Indexed): Foreign key to Clerk User.
  • name (text, Not Null)
  • color (text, Not Null)
  • description (text, Optional)
  • createdAt (timestamp, Default now())
  • updatedAt (timestamp, Default now())

issues ​

Kanban board task items.

  • id (text, PK)
  • userId (text, Not Null, Indexed)
  • title (text, Not Null)
  • description (text, Not Null)
  • status (text, Not Null): 'Todo' | 'In Progress' | 'Done' | 'Canceled'
  • priority (text, Not Null): 'No Priority' | 'Low' | 'Medium' | 'High' | 'Urgent'
  • projectId (text, FK -> projects.id on delete CASCADE)
  • dueDate (timestamp, Optional)
  • createdAt (timestamp, Default now(), Indexed)
  • updatedAt (timestamp, Default now())

pages ​

Document pages supporting infinite nesting.

  • id (text, PK)
  • userId (text, Not Null, Indexed)
  • parentId (text, Self-Referential FK, Indexed): ID of parent page for recursive nesting.
  • title (text, Not Null)
  • icon (text, Optional): Emoji string or icon name.
  • content (jsonb, Optional): Raw JSON array or Tiptap JSON node document structure.
  • isFavorite (boolean, Default false)
  • isDeleted (boolean, Default false): Soft-delete flag for Trash Bin.
  • coverColor (text, Optional)
  • projectId (text, FK -> projects.id on delete SET NULL)
  • position (integer, Indexed): Sort order index within sidebar / parent.
  • createdAt (timestamp, Default now())
  • updatedAt (timestamp, Default now())

notifications ​

System and user activity alerts.

  • id (text, PK)
  • userId (text, Not Null)
  • title (text, Not Null)
  • message (text, Not Null)
  • isRead (boolean, Default false)
  • createdAt (timestamp, Default now())
  • updatedAt (timestamp, Default now())

Frontend Components & Editor Architecture ​

Tiptap Block Editor Engine ​

  • Slash Commands (/): Triggers dropdown for inserting H1-H3, Bullet Lists, Task Lists, Code Blocks, Tables, Images, and inline Kanban boards.
  • Page Mention (@): Intercepts @ symbol to link to another page within the workspace.
  • Lowlight Syntax Highlighting: Auto-detects language for fenced code blocks.

Infinite Recursive Page Tree ​

  • Pages are rendered recursively in Sidebar.tsx.
  • Supports drag-and-drop reordering, quick creation of sub-pages, favoriting, and moving to Trash.

UI/UX Design System & Custom Tokens ​

Aesthetic Philosophy ​

  • Hairline Borders: 1px solid var(--hairline) with high contrast against dark backgrounds.
  • Square Geometry: Zero rounded corners (border-radius: 0px across modals, cards, inputs).
  • Curated Color Palettes:
    • dark (Default Linear-style dark mode)
    • midnight (Deep navy blue gradients)
    • rose (Warm luxury rose gold)
    • forest (Calming dark evergreen)