HyperSaaS
FrontendGetting Started

Project Structure

Directory layout and file organization.

Top-Level Structure

frontend/
├── public/                  # Static assets (favicon, images)
├── src/
│   ├── app/                 # Next.js App Router (pages, layouts, API routes)
│   ├── components/          # React components by feature
│   ├── config/              # Site, dashboard, and marketing configuration
│   ├── content/             # MDX content for blog (content-collections)
│   ├── hooks/               # Custom React hooks
│   └── lib/                 # Core utilities, types, auth, validations
├── .env.local               # Environment variables
├── next.config.ts           # Next.js configuration
├── tailwind.config.ts       # Tailwind configuration
├── tsconfig.json            # TypeScript config with path aliases
└── package.json

App Directory

src/app/
├── (auth)/                  # Authentication pages (login, register, reset)
├── (marketing)/             # Public pages (home, pricing, blog, legal)
├── (dashboard)/             # Protected dashboard area
│   └── dashboard/
│       ├── page.tsx         # Dashboard home (workspace list)
│       ├── profile/         # User profile
│       ├── settings/        # Account settings
│       └── workspaces/
│           └── [workspaceId]/
│               ├── page.tsx           # Workspace home
│               ├── details/           # Workspace settings
│               ├── chat/              # AI chat sessions
│               │   ├── page.tsx       # New chat
│               │   ├── history/       # Chat history
│               │   └── [chatId]/      # Chat session
│               ├── documents/         # Document management
│               ├── knowledge-bases/   # Knowledge base management
│               ├── teams/             # Team management
│               └── settings/          # Workspace settings
├── (workspaces)/            # Workspace list/creation
├── (invitations)/           # Invitation acceptance
├── (chats)/                 # Public shared chat sessions
├── api/                     # API route handlers (backend proxy)
└── layout.tsx               # Root layout (theme, fonts, toaster)

Components Directory

src/components/
├── ai-elements/             # AI chat UI primitives (28 components)
│   ├── message.tsx          # Message container with avatar
│   ├── prompt-input.tsx     # Advanced input with attachments
│   ├── chain-of-thought.tsx # Expandable reasoning steps
│   ├── citation-sources.tsx # RAG source display
│   └── ...
├── auth/                    # Login, register, reset forms
├── billing/                 # Subscription management
├── chat/                    # Chat interface (session UI, messages, settings)
├── dashboard/               # Dashboard layout components
├── documents/               # Document upload, viewer, table
├── fragments/               # Small reusable pieces
├── knowledge-base/          # KB list, create, detail
├── marketing/               # Marketing page sections
├── sections/                # Page section layouts
├── teams/                   # Team management components
├── ui/                      # shadcn/ui primitives (44+ components)
└── workspaces/              # Workspace management components

Library Directory

src/lib/
├── auth/                    # Authentication utilities
│   ├── providers.ts         # NextAuth configuration
│   ├── utils.ts             # Token validation, refresh
│   ├── session.ts           # Server-side session helpers
│   └── actions.ts           # Login/logout server actions
├── types/                   # TypeScript type definitions
│   ├── auth.ts              # User, token types
│   ├── chat.ts              # ChatSession, Message types
│   ├── documents.ts         # Document, KnowledgeBase types
│   ├── workspaces.ts        # Workspace, Team, Membership types
│   ├── billing.ts           # Subscription, Plan types
│   ├── common.ts            # Shared base types
│   └── nav.ts               # Navigation config types
├── validations/             # Zod schemas
│   ├── auth.ts              # Login, register, reset schemas
│   ├── chat.ts              # Chat session, message schemas
│   ├── documents.ts         # Document, KB schemas
│   ├── workspaces.ts        # Workspace, team schemas
│   ├── billing.ts           # Subscription schemas
│   └── common.ts            # Base schema, enums
├── actions/                 # Server actions
│   └── data.ts              # Generic fetch with validation
├── hooks/                   # Library hooks
├── billing/                 # Pricing utilities
├── chat/                    # Chat utilities
├── workspaces/              # Workspace data fetching
├── roles-permissions.ts     # Permission context and checks
├── utils.ts                 # Common utilities (cn, fetch, format)
└── formatters.ts            # Data formatting helpers

Config Directory

src/config/
├── site.ts                  # App name, URLs, API paths
├── dashboard.ts             # Dashboard navigation structure
└── marketing.ts             # Marketing site navigation

Path Aliases

Configured in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "content-collections": ["./.content-collections/generated"]
    }
  }
}

All imports use the @/ alias:

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { siteConfig } from "@/config/site";

On this page