Structure Overview

Modern frontend code lives in /frontend/ directory, inside portal.fieldflo.com repository.

Folder structure

frontend/
├── src/              # Application source code
├── apidocs/          # OpenAPI specs for code generation
├── dist/             # Build output

Top level folder contains mostly configuration files, source folder, output directory and apidocs.

On apidocs

apidocs is a temporary solution - it's maintained by AI. We want OpenAPI spec to be automatically generated from backend types, at which point it will be removed from here.

src/

src/
├── entrypoints/      # Entry points to the application
├── core/             # Shared infrastructure
├── features/         # Feature modules
├── islands/          # Vue components embedded in legacy PHP pages
└── dev/              # Development utilities

entrypoints/

Application entrypoints - each is a separate vite input file:

• legacy.ts - entry point for code that integrates directly into the legacy frontend
• onboarding.ts - entry point for the onboarding app

core/

Shared code used across all features:

core/
├── api/              # Generated API client & models
├── components/       # Reusable UI components
│   ├── index.ts      # Barrel exports
│   ├── component-a/
│   └── button/
│       ├── index.ts          # Barrel exports
│       ├── Button.vue        # Component implementation
│       ├── Button.story.vue  # Visual documentation
│       └── variants.ts       # tailwind-variants definitions
├── composables/      # Shared Vue composables
├── layouts/          # Base layouts
├── plugins/          # Vue plugins
├── stores/           # Global Pinia stores
├── styles/           # Global CSS
└── theme/            # PrimeVue theme config

features/

Feature-based modules. There are two types of features - simple and complex.

Simple feature

Simple feature is a directory with folders for different types of modules:

features/simple-xyz/
├── components/       # Reusable components (inside the module)
├── composables/      # Other composables
├── pages/            # Full pages
├── schemas/          # Zod schemas
├── stores/           # Stores
├── layouts/          # Vue layouts
├── router.ts         # Only if needed
└── index.ts          # Barrel exports

Complex feature

Complex features simply have sub-features, like this:

features/crm/
├── feature-a/
├── feature-b/
└── feature-c/        # just a simple feature inside
    ├── components/
    ├── composables/
    └── .../

islands/

Islands are related directly to legacy frontend.

islands/
├── coi-tracking/
│   └── ...
├── crm/
│   ├── Leads.vue
│   └── Clients.vue
└── projects/
    └── PhaseAdmin.vue

TIP

Islands are a temporary measure until we migrate from legacy frontend to a new, SPA-based one.