Skip to main content

Frontend – Get Started

This document summarizes how the CallPilot frontend is organized and what you need to get started working on it.

Stack​

  • Framework: React + TypeScript
  • Bundler: Vite
  • UI: [Shadcn / Tailwind / MUI] (adjust based on what we actually use)
  • State Management: React Query / Redux Toolkit / Context (depending on the module)
  • Routing: React Router / TanStack Router
  • Testing: Vitest + React Testing Library
  • Package Manager: pnpm / yarn / npm (adjust accordingly)

Note: Replace the bracketed items with what CallPilot actually uses.

Prerequisites​

  • Node.js (recommended version: ≥ 18)
  • pnpm / yarn / npm installed globally
  • Access to the CallPilot repository (GitHub/GitLab)
  • Access to DEV environment variables (see env-variables.md)

Basic Project Structure​

The CallPilot frontend follows a modular and organized folder structure:

src/
  assets/        # Static files (images, fonts, icons, etc.)
  components/    # Reusable UI components shared across modules
  helpers/       # Generic helper functions and utilities
  hooks/         # Reusable custom React hooks
  icons/         # Centralized icon components
  interfaces/    # TypeScript interfaces and shared types
  modules/       # Feature-based modules (campaigns, flows, reporting, etc.)
  providers/     # App-level providers (auth, theme, API clients)
  routes/        # Route definitions and navigation configuration
  services/      # API services / HTTP clients
  store/         # Global store (Redux, Zustand, or equivalent)