Tech Stack

Liam is built using a modern JavaScript/TypeScript stack with a focus on React and Next.js. Here's an overview of our technology stack:

Core Technologies

• TypeScript: Strongly-typed programming language that builds on JavaScript
• React 18: UI library for building component-based interfaces
• Next.js 15: React framework for server-rendered applications
• Vite: Build tool used in CLI for static site generation

Frontend

• UI Components: Custom component library with Radix UI primitives
• Styling: CSS Modules with typed definitions
• Icons: Lucide React for consistent iconography
• State Management: Valtio for state management
• Visualization: @xyflow/react (React Flow) for diagram visualization
• Documentation: Fumadocs for documentation site

Database Schema Parsing

• Parsers: Support for multiple database schema formats
• Validation: Valibot for schema validation

Development Tools

• Package Management: pnpm for efficient dependency management
• Monorepo Management: pnpm workspaces
• Build System: Turborepo for optimized builds
• Linting & Formatting: Biome for code quality
• Testing: Vitest for unit testing, Playwright for e2e testing

Deployment

• Web Applications: Deployed with Vercel
• CI/CD: GitHub Actions for continuous integration

Overview

Our project uses a monorepo structure managed with pnpm workspaces, allowing us to maintain multiple packages and applications in a single repository while sharing dependencies and code.

Repository Structure

/
├── frontend/
│   ├── apps/
│   │   ├── docs/              # Documentation site (@liam-hq/docs)
│   │   │   ├── content/       # MDX documentation files
│   │   │   └── app/            # Next.js app router
│   │   │   └── components/          # Documentation site components
│   │   └── app/          # Main web application (@liam-hq/app)
│   │       ├── app/      # Next.js app router
│   │      └── components/
│   │       └── public/       # Static assets
│   └── packages/
│       ├── cli/              # Command-line tool (@liam-hq/cli)
│       │   ├── src/
│       │   └── package.json
│       ├── configs/          # Shared configurations (@liam-hq/configs)
│       │   ├── biome/
│       │   ├── tsconfig/
│       │   └── package.json
│       ├── db-structure/     # Database structure parser (@liam-hq/db-structure)
│       │   ├── src/
│       │   │   ├── parser/
│       │   │   └── utils/
│       │   └── package.json
│       ├── erd-core/         # Core ERD functionality (@liam-hq/erd-core)
│       │   ├── src/
│       │   │   ├── components/
│       │   │   ├── hooks/
│       │   │   └── utils/
│       │   └── package.json
│       └── ui/               # UI component library (@liam-hq/ui)
│           ├── src/
│           │   ├── components/
│           │   └── styles/
│           └── package.json
└── package.json             # Root package (liam-frontend)

Packages

This section describes the main responsibilities and relationships between packages in our monorepo. Each package is designed to be modular and focused on specific functionality.

Web Application (@liam-hq/app)

Next.js App Router based web application for exploring ER diagrams. see: /docs/web

Key Responsibilities:

• Interactive ERD interface
• Schema file URL parsing
• Server Components optimization

CLI Package (@liam-hq/cli)

Command-line tool for generating static ERD visualization files. see: /docs/cli

Key Responsibilities:

• Interactive project setup via init command
• Static site generation with Vite

DB Structure Package (@liam-hq/db-structure)

Database schema parser supporting multiple formats. see: /docs/parser/supported-formats

Key Responsibilities:

• Multiple format parser implementations
• Automatic format detection
• Type-safe schema validation

ERD Core Package (@liam-hq/erd-core)

React Flow based ERD visualization components and logic. see: /docs/ui-features

Key Responsibilities:

• ERD Visualization
• UI Components
• State Management

UI Package (@liam-hq/ui)

Base UI component library.

Key Responsibilities:

• Reusable components
• Design systems

Tech Stack:

• CSS Modules
• Radix UI
• Lucide Icons

Documentation Site (frontend/apps/docs)

Built with Fumadocs.

Key Responsibilities:

• User documentation
• Contribution guides

Development Tools

• Linting & Formatting: Biome
• Testing: Vitest
• Build Tool: Turborepo