---
id: kb-011
title: Technical Documentation - Frontend (atoms.tech)
scope:
  type: project
  id: 4sgm
purpose: technical-documentation-frontend
tags:
  - frontend
  - nextjs
  - react
  - documentation
topics:
  - engineering
  - typescript
  - web-development
version: 1
created: 2025-11-26
updated: 2025-11-26
author: droid-agent
status: final
related_ids:
  - kb-010
  - kb-012
external_refs: []
---

# Technical Documentation - Frontend (atoms.tech)

## Technology Stack

- **Framework**: Next.js 16 (App Router), React 19, TypeScript 5.8.3.
- **Styling**: Tailwind CSS 3.4.17, Shadcn/Radix UI, Framer Motion.
- **State Management**: Zustand 5.0.3 (client-side), TanStack React Query 5.74 (server-side).
- **API Layer**: tRPC 11.7.1 for type-safe server communication.
- **Database**: Supabase (PostgreSQL) with Row-Level Security (RLS).
- **Authentication**: WorkOS AuthKit 2.11.1 (Enterprise SSO/SAML).
- **Caching**: Upstash Redis (REST API) + Next.js Cache Components.

---

## File Structure

- **/app**: Next.js App Router pages (Auth, Public, Protected, API).
- **/components**: 553 UI components categorized into custom business logic and UI primitives (Shadcn).
- **/hooks**: 101 custom React hooks for auth, data fetching, and feature-specific logic.
- **/lib**: 531 utility modules for auth, caching, database queries, and third-party integrations.
- **/store**: Zustand stores for auth, UI state, and domain-specific data.
- **/server**: Server-side logic including tRPC routers, repositories, and background jobs.

---

## Key Features

- **Enterprise SSO**: Integrated with WorkOS for robust multi-tenant authentication.
- **AtomsAgent Interface**: Dedicated UI for interacting with the backend agent service.
- **Traceability**: Comprehensive tools for requirement traceability and document analysis.
- **Marketplace**: Interface for discovering and managing MCP servers.
- **Real-time Collaboration**: Enabled via Supabase Realtime and concurrent editing locks.

---

## Installation & Development

1. **Install dependencies**: `bun install`.
2. **Environment**: Configure `.env.local` with WorkOS, Supabase, GCP, and Redis credentials.
3. **Run Dev**: `bun run dev` (starts on port 3000).
4. **Lint & Format**: `bun run lint`, `bun prettier src --write`.
