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 |