Tech Stack - PIPELINE

Overview

Pipeline is built with modern web technologies, leveraging Next.js 15, TypeScript, Supabase, and a curated set of libraries for optimal performance and developer experience.

Core Technologies

Frontend Framework

Next.js 15.1.6

React framework with App Router, Server Components, and Server Actions

React 19.0.0

Latest React with improved server components and concurrent features

Key Features:

App Router for file-based routing
React Server Components (RSC) for optimized rendering
Server Actions for type-safe data mutations
Middleware for authentication and route protection
Built-in image optimization

Language

TypeScript 5.8.3

Strict type safety across the entire codebase

Configuration Highlights:

strict: true mode enabled
Path aliases configured (@/src/*)
Database types auto-generated from Supabase schema

Backend & Database

Supabase Stack

@supabase/supabase-js 2.98.0

Official Supabase JavaScript client

@supabase/ssr 0.8.0

SSR utilities for Next.js App Router

Features Used:

PostgreSQL 15+ database
Row-Level Security (RLS) for data isolation
Real-time subscriptions
Built-in authentication
Database triggers and functions
Full-text search with weighted vectors

Database Extensions

-- Enabled extensions
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";  -- UUID generation
CREATE EXTENSION IF NOT EXISTS "pgcrypto";   -- Cryptographic functions

State Management

Client State

Zustand 5.0.11

Lightweight state management with minimal boilerplate

Usage Example:

// src/lib/stores/ui-store.ts
import { create } from 'zustand';

export const useUIStore = create<UIState>((set) => ({
  commandPaletteOpen: false,
  setCommandPaletteOpen: (open) => set({ commandPaletteOpen: open }),
  // ... more state
}));

Stores:

ui-store.ts - UI state (modals, drawers, command palette)

Server State

TanStack Query 5.90.21

Data fetching, caching, and synchronization

Features:

Automatic background refetching
Optimistic updates
Request deduplication
Cache invalidation strategies

UI Components

Design System

Tailwind CSS 4.2.1

Utility-first CSS framework with custom design tokens

Radix UI

Unstyled, accessible component primitives

Radix UI Components

All components are accessible, keyboard-navigable, and unstyled for full customization:

Dialogs: @radix-ui/[email protected]
Dropdown Menus: @radix-ui/[email protected]
Forms: @radix-ui/[email protected], @radix-ui/[email protected]
Select: @radix-ui/[email protected]
Tabs: @radix-ui/[email protected]
Toast: @radix-ui/[email protected]
Progress: @radix-ui/[email protected]
Avatar: @radix-ui/[email protected]
Slider: @radix-ui/[email protected]
Switch: @radix-ui/[email protected]

Utility Libraries

class-variance-authority

Type-safe component variants

clsx + tailwind-merge

Smart class name merging

Animations & Interactions

Framer Motion 12.34.3

Production-ready animations for React

Lucide React 0.546.0

Beautiful, consistent icon library

Framer Motion Usage:

Page transitions
Modal animations
List item animations (drag & drop)
Micro-interactions

Data Visualization

Recharts 3.7.0

Composable charting library built with React components

Charts Used:

Line charts for application trends
Bar charts for status distribution
Pie charts for source breakdown

Forms & Validation

Zod 4.3.6

TypeScript-first schema validation

React Hook Form

Performant form handling (via Radix primitives)

Validation Example:

import { z } from 'zod';

export const SignupSchema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  redirect_to: z.string().url().optional(),
});

Tables & Data Display

TanStack Table 8.21.3

Headless UI for building powerful tables and datagrids

Features:

Column sorting
Filtering
Pagination
Row selection
Column visibility toggles

Command Palette

cmdk 1.1.1

Fast, composable command menu for React

Keyboard Shortcuts:

Cmd+K / Ctrl+K - Open command palette
Navigate jobs, switch views, quick actions

Development Tools

Testing

Vitest 2.0.0

Fast unit testing framework

@vitest/coverage-v8

Code coverage reporting

Build Tools

PostCSS with Tailwind: @tailwindcss/[email protected]
Autoprefixer: [email protected]
TSX: [email protected] for running TypeScript files

Database Development

PostgreSQL Client: [email protected] with TypeScript types
Dotenv: [email protected] for environment variable management

Package Management

npm

Node Package Manager (v8+)

Scripts:

{
  "dev": "next dev --port 3000",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "typecheck": "tsc --noEmit",
  "test": "vitest",
  "test:coverage": "vitest --coverage"
}

Environment Requirements

Node.js

Required: Node.js 18.x or higher
Recommended: Node.js 20.x LTS

Browser Support

Modern evergreen browsers (Chrome, Firefox, Safari, Edge)
ES2022+ features required
JavaScript enabled

Dependencies Overview

View Full Dependency List

Production Dependencies

{
  "@radix-ui/react-alert-dialog": "^1.1.15",
  "@radix-ui/react-avatar": "^1.1.11",
  "@radix-ui/react-checkbox": "^1.3.3",
  "@radix-ui/react-dialog": "^1.1.15",
  "@radix-ui/react-dropdown-menu": "^2.1.16",
  "@radix-ui/react-label": "^2.1.8",
  "@radix-ui/react-progress": "^1.1.8",
  "@radix-ui/react-select": "^2.2.6",
  "@radix-ui/react-separator": "^1.1.8",
  "@radix-ui/react-slider": "^1.3.6",
  "@radix-ui/react-slot": "^1.2.4",
  "@radix-ui/react-switch": "^1.2.6",
  "@radix-ui/react-tabs": "^1.1.13",
  "@radix-ui/react-toast": "^1.2.15",
  "@supabase/ssr": "^0.8.0",
  "@supabase/supabase-js": "^2.98.0",
  "@tanstack/react-query": "^5.90.21",
  "@tanstack/react-table": "^8.21.3",
  "class-variance-authority": "^0.7.1",
  "clsx": "^2.1.1",
  "cmdk": "^1.1.1",
  "framer-motion": "^12.34.3",
  "lucide-react": "^0.546.0",
  "next": "^15.1.6",
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "recharts": "^3.7.0",
  "server-only": "^0.0.1",
  "tailwind-merge": "^3.5.0",
  "zod": "^4.3.6",
  "zustand": "^5.0.11"
}

Development Dependencies

{
  "@tailwindcss/postcss": "^4.2.1",
  "@types/node": "22.19.13",
  "@types/pg": "^8.11.0",
  "@types/react": "19.2.14",
  "@vitest/coverage-v8": "^2.0.0",
  "autoprefixer": "^10.4.27",
  "dotenv": "^16.4.0",
  "pg": "^8.13.0",
  "tailwindcss": "^4.2.1",
  "tsx": "^4.21.0",
  "typescript": "^5.8.3",
  "vitest": "^2.0.0"
}

Architecture Benefits

Type Safety

End-to-end TypeScript with database types auto-generated from schema

Performance

Server Components, edge runtime, and optimized bundling

Developer Experience

Hot reload, TypeScript IntelliSense, and comprehensive error messages

Scalability

Serverless architecture, PostgreSQL with connection pooling

Next Steps

Database Schema

Explore the PostgreSQL database structure

Authentication

Learn about auth implementation

Get Started

Core Features

Guides

Architecture

​Overview

​Core Technologies

​Frontend Framework

Next.js 15.1.6

React 19.0.0

​Language

TypeScript 5.8.3

​Backend & Database

​Supabase Stack

@supabase/supabase-js 2.98.0

@supabase/ssr 0.8.0

​Database Extensions

​State Management

​Client State

Zustand 5.0.11

​Server State

TanStack Query 5.90.21

​UI Components

​Design System