# Blokx — technology stack

High-level map of what I use and what it's for.

---

## Application platform

| What | Technology | Purpose |
|------|--------------|---------|
| Language | TypeScript (strict) | Type-safe UI, API routes, and shared logic end to end |
| Runtime | Node.js 20.9+ | Executes server-side code, local dev server, installs, and production builds (minimum required by this Next.js major) |
| UI library | React 19 | Components, state, and interactivity |
| Web framework | Next.js 16 (App Router) | Routing, rendering, API routes, and production builds |
| Package manager | npm | Dependencies and scripts |

---

## Editor

| What | Technology | Purpose |
|------|--------------|---------|
| Rich text / blocks | TipTap 3 (ProseMirror) | Notion-style editing: paragraphs, headings, lists, tasks, tables, callouts, images, links, typography, and drag affordances supported by the product |

---

## Backend, data, and security

| What | Technology | Purpose |
|------|--------------|---------|
| Database | PostgreSQL (via Supabase) | Workspaces, page tree, and block document data |
| Authentication | Supabase Auth | Sign-in and session identity used by the app and database |
| Authorization | Row Level Security (RLS) | Postgres policies so users only read/write their own workspace data; enforced at the database, not only in app code |
| Live updates | Supabase Realtime | Keeps open documents in sync when data changes on the server |
| File hosting | Supabase Storage | Durable URLs for assets such as imported images; bucket access controlled with storage policies (e.g. public read where needed, authenticated writes) |
| Migrations | Version-controlled SQL | Schema and policy definitions you apply to your Supabase project |

---

## Styling and visual design

| What | Technology | Purpose |
|------|--------------|---------|
| Styling system | Tailwind CSS 4 | Layout, spacing, colors, and responsive behavior |
| Component layer | shadcn/ui (owned source) | Accessible, Tailwind-styled primitives (Button, Input, Label, Textarea, Dialog, AlertDialog, DropdownMenu, Tooltip, Popover) copied into `src/components/ui` so we can customize them freely |
| Accessibility primitives | Radix UI | Headless, WAI-ARIA-compliant behavior for dialogs, menus, tooltips, and popovers underneath shadcn/ui |
| Toast notifications | Sonner | Stacked toasts with built-in light/dark theming, replacing the hand-rolled toast provider |
| Typography | Geist | Primary sans and monospace fonts |
| Icons | Lucide | Icon set used across the UI |

---

## Integrations

| What | Technology | Purpose |
|------|--------------|---------|
| Notion import | Notion REST API (versioned) | Optional one-way import from Notion into Blokx; Notion is not required to use the app |

---

## Client experience and analytics

| What | Technology | Purpose |
|------|--------------|---------|
| Browser storage | IndexedDB | Client-side caching for snappier loads and resilience when offline or reconnecting |
| Product analytics | Vercel Analytics | Aggregate, privacy-oriented usage in production on Vercel |

---

## Quality and standards

| What | Technology | Purpose |
|------|--------------|---------|
| Linting | ESLint 9 with Next.js presets | Catches common issues and keeps TypeScript/React usage consistent |

---

## Hosting

| What | Technology | Purpose |
|------|--------------|---------|
| Hosting | Vercel | Production hosting, preview deployments, and the analytics integration above |

---