Skip to main content
ThinkEx is built with modern, production-ready technologies that prioritize performance, developer experience, and scalability.

​
Core Framework

Next.js 16

Full-stack React framework with App Router, Server Components, and API routes

React 19

UI library with hooks, concurrent features, and server components

TypeScript 5.9

Type-safe JavaScript with strict mode enabled

Node.js 20+

JavaScript runtime for server-side code

​
Database & ORM

​
PostgreSQL

ThinkEx uses PostgreSQL as its primary database:
  • Version: 12+
  • Features: JSONB, Row-Level Security (RLS), triggers, indexes
  • Self-hosted or managed (Supabase, Neon, etc.)
PostgreSQL is required - ThinkEx does not support other databases due to extensive use of Postgres-specific features like RLS and JSONB.

​
Drizzle ORM

Drizzle ORM 0.45

Type-safe SQL query builder with schema migrations
Why Drizzle?
  • TypeScript-first with full type inference
  • Zero-cost abstraction over raw SQL
  • Simple migrations with drizzle-kit
  • Great DX with autocomplete and type safety
Key Commands: 
# Generate migrations from schema changes
pnpm db:generate

# Apply migrations to database
pnpm db:push

# Launch Drizzle Studio (database GUI)
pnpm db:studio
Schema: src/lib/db/schema.ts
Migrations: drizzle/

​
Authentication

Better Auth 1.4

Modern authentication library with built-in security and OAuth support
Features:
  • Email/password authentication
  • OAuth providers (Google)
  • Session management with secure cookies
  • Anonymous users for demo mode
  • CSRF protection built-in
Configuration: src/lib/auth.ts Why Better Auth over NextAuth?
  • Better TypeScript support
  • More flexible and modern architecture
  • Cleaner API design
  • Active development and maintenance

​
State Management

​
TanStack Query

TanStack Query 5.90

Powerful data fetching and caching library (formerly React Query)
Use Cases:
  • Server state caching
  • Automatic background refetching
  • Optimistic updates
  • Infinite scroll and pagination
// Example usage
const { data, isLoading } = useQuery({
  queryKey: ['workspace', workspaceId],
  queryFn: () => fetchWorkspace(workspaceId)
});

​
Zustand

Zustand 5.0

Lightweight state management for UI state
Use Cases:
  • Canvas UI state (zoom, pan, selection)
  • Modal/dialog state
  • Temporary UI preferences
  • Real-time cursor positions
See stores in src/lib/stores/.

​
Styling & UI Components

​
Tailwind CSS

Tailwind CSS 4.2

Utility-first CSS framework for rapid UI development
Configuration: tailwind.config.ts
Global Styles: src/app/globals.css

​
Shadcn UI

Shadcn UI

Customizable component library built on Radix UI primitives
Components Used:
  • Dialog, Popover, Dropdown Menu
  • Button, Input, Select, Checkbox
  • Tabs, Accordion, Collapsible
  • Tooltip, Hover Card, Context Menu
  • And more…
Components: src/components/ui/

​
Radix UI

Low-level UI primitives from Radix provide:
  • Accessibility (ARIA, keyboard navigation)
  • Unstyled, customizable components
  • Focus management and portal support
Radix Packages:
  • @radix-ui/react-dialog
  • @radix-ui/react-dropdown-menu
  • @radix-ui/react-popover
  • @radix-ui/react-tabs
  • @radix-ui/react-tooltip
  • And more…

​
AI & LLMs

​
Vercel AI SDK

Vercel AI SDK 6.0

Unified API for LLM integrations with streaming support
Features:
  • Streaming text generation
  • Tool/function calling
  • Multi-provider support
  • React hooks for UI integration

​
AI Providers

Primary AI provider via @ai-sdk/google and @google/genai
  • Models: Gemini 1.5 Pro, Flash
  • Features: Multimodal (text, images, PDFs), function calling
  • Use: Chat, document analysis, deep research
Specialized UI components for chat interfaces via @assistant-ui/react
  • Pre-built message components
  • Streaming UI updates
  • Built-in markdown rendering
  • Developer tools for debugging
Configuration: src/lib/ai/

​
Rich-Text Editing

​
BlockNote

BlockNote 0.47

Notion-style block editor for rich-text notes
Features:
  • Slash commands for quick formatting
  • Drag-and-drop blocks
  • Markdown shortcuts
  • Code blocks with syntax highlighting
  • Math equations with KaTeX
  • Customizable styling
Packages:
  • @blocknote/core - Core editor logic
  • @blocknote/react - React bindings
  • @blocknote/shadcn - Shadcn UI styling
Editor: src/components/editor/

​
Document Processing

​
PDF Handling

Comprehensive PDF viewing and annotation library
  • Core: @embedpdf/core, @embedpdf/engines
  • Plugins: annotation, search, zoom, thumbnails, export, and more
  • Features: Native rendering, text selection, highlights, OCR integration

​
Media Processing

YouTube Integration

oEmbed API for metadata and thumbnail extraction

Audio Transcription

Google Gemini for speech-to-text with speaker diarization

Image Processing

Google Vision API for OCR and image analysis

PDF OCR

Gemini multimodal for PDF text extraction

​
Layout & Canvas

​
React Grid Layout

React Grid Layout (Fork)

Draggable and resizable grid layout system (custom fork)
Features:
  • Drag-and-drop card positioning
  • Resize handles
  • Responsive breakpoints
  • Collision detection
  • Custom fork with ThinkEx-specific optimizations
Why a Fork? ThinkEx uses a forked version with custom patches for better performance and folder support.

​
Drag and Drop

dnd-kit 0.3

Modern drag-and-drop toolkit for React
Use Cases:
  • Drag cards into folders
  • Reorder flashcards
  • File uploads via drag-and-drop

​
File Storage

ThinkEx supports two storage backends:
  • Files stored in Supabase bucket
  • CDN-backed for fast delivery
  • Scalable for large deployments
  • Set STORAGE_TYPE=supabase in .env
  • Requires Supabase project credentials
Implementation: src/lib/uploads/

​
Real-Time Communication

ThinkEx uses PostgreSQL triggers for real-time event broadcasting:
  • Events inserted into workspace_events trigger broadcasts
  • Clients subscribe via WebSocket to workspace:<id>:events channel
  • Low latency (under 100ms) for local changes to propagate
  • No additional infrastructure required (no Redis, no separate WebSocket server)
See drizzle/0001_add_realtime_collaboration.sql:37 for trigger definition.

​
Developer Tools

​
Build & Dev Tools

pnpm

Fast, disk-efficient package manager

ESLint

Linter for code quality and consistency

Prettier

Opinionated code formatter

TypeScript Compiler

Type checking with pnpm tc

​
Monitoring & Analytics

  • Product analytics and feature flags
  • Self-hosted or cloud
  • Packages: posthog-js, posthog-node
  • Optional: Set NEXT_PUBLIC_POSTHOG_KEY in .env
  • Real user monitoring (RUM)
  • Core Web Vitals tracking
  • Optional: Automatically enabled on Vercel deployments
  • Distributed tracing and logging
  • Packages: @opentelemetry/api-logs, @opentelemetry/sdk-logs
  • Optional: Configure exporter in src/lib/with-api-logging.ts

​
Package Manager

pnpm is required. ThinkEx uses pnpm-specific features like workspaces and overrides that are not compatible with npm or yarn.
Install pnpm: 
npm install -g pnpm
# or
curl -fsSL https://get.pnpm.io/install.sh | sh -
Version: 10.14.0 (specified in package.json)

​
Version Requirements

DependencyMinimum VersionNotes
Node.js20+Required for Next.js 16
PostgreSQL12+Required for JSONB and RLS
pnpm10+Required for workspace features
Docker20+Optional, for local Postgres

​
Full Dependency List

For the complete list of dependencies with exact versions, see:
  • Dependencies: package.json lines 29-156
  • Dev Dependencies: package.json lines 157-181
Notable Packages:
  • UI: Lucide React (icons), Motion (animations), Geist (font)
  • Forms: React Hook Form, Zod (validation)
  • Markdown: React Markdown, Remark/Rehype plugins
  • Math: KaTeX, MathLive
  • Diagrams: Mermaid
  • Syntax Highlighting: Shiki, React Shiki
  • Utilities: clsx, tailwind-merge, date-fns

Build docs developers (and LLMs) love

Get started for freeTalk to us