Home

Welcome to the lago-front wiki!

Local Environment Setup

Please refer to the main Lago Wiki for full app installation instructions.

Technology Stack

Main Libraries

Library	Purpose
React 18	UI framework with TypeScript
Apollo Client 3	GraphQL state management
React Router DOM	Navigation (legacy routes)
Material UI 5	Component library
TailwindCSS	Utility-first CSS framework
Vite	Build tool and dev server
Luxon	Date/time handling
Tanstack form + Zod	Form management and validation

Development Tools

Tool	Purpose
ESLint + Prettier	Code formatting (configs from lago-configs package)
Jest + Testing Library	Unit testing
Cypress	End-to-end testing
GraphQL Code Generator	Auto-generate TypeScript types from GraphQL schemas
Husky	Git hooks

Monorepo Structure

This project uses pnpm workspaces with packages in packages/*:

lago-front/
├── packages/
│   ├── configs/          # Shared ESLint, TypeScript, Tailwind configs
│   └── design-system/    # Shared UI components, icons, and themes
├── src/                  # Main application source
├── cypress/              # E2E tests
└── translations/         # i18n JSON files

Key Development Commands

⚠️ Always use pnpm - never use npm or yarn

Command	Description
pnpm dev	Start development server
pnpm lint	Check code style
pnpm lint:fix	Fix code style issues
pnpm test	Run Jest unit tests
pnpm test:coverage	Run tests with coverage report
pnpm test:e2e	Open Cypress for E2E tests
pnpm codegen	Generate GraphQL types (run after schema/query changes)
pnpm translations:add	Add new translation keys

Note: Linting and tests run automatically during PR pipelines.

GraphQL Code Generation

We use GraphQL Code Generator to automatically generate TypeScript typings from our GraphQL queries and mutations.

Workflow

1. Write your query/mutation using Apollo's gql tag:

import { gql } from "@apollo/client";

export const GET_CUSTOMER = gql`
  query getCustomer($id: ID!) {
    customer(id: $id) {
      id
      name
      email
    }
  }
`;

2. Run the codegen command:

pnpm codegen

3. Import and use the generated typed hook:

import { useGetCustomerQuery } from "~/generated/graphql";

const { data, loading, error } = useGetCustomerQuery({
  variables: { id: customerId },
});

Important: Always run pnpm codegen after modifying:

• GraphQL schemas
• Queries or mutations
• Fragments

Project Structure

Refer to the Folder Architecture section

Component Organization

Components are organized by business domain (e.g., /components/customers/, /components/invoices/).