Frontend Architecture

The frontend is a Vue 3 Single Page Application built with Vite 7 and served by a CodeIgniter 4 PHP backend.

Project Structure

frontend/
├── client/                 # Vue 3 SPA
│   ├── index.html
│   └── src/
│       ├── components/     # Reusable UI components
│       ├── composables/    # Vue composition functions (use*)
│       ├── views/          # Page-level components
│       ├── stores/         # Pinia state management
│       ├── services/       # API service layer (Axios)
│       ├── routes/         # Vue Router definitions
│       ├── scss/           # Global styles (Bootstrap + custom)
│       └── utils/          # Utility functions
├── server/                 # CodeIgniter 4 PHP server
│   ├── app/
│   └── public/
├── vite.config.js
├── composer.json
└── package.json

Key Technologies

Concern	Library
Framework	Vue 3.5 (Composition API, <script setup>)
Build	Vite 7
State	Pinia 3 + persisted state plugin
Routing	Vue Router 4
Validation	Vuelidate 2
Styling	Bootstrap 5.3 + SCSS
Internationalization	Vue I18n 11
HTTP Client	Axios
Charts	Highcharts (highcharts-vue)

Component Patterns

The application uses the Composition API with <script setup> syntax throughout. Reusable logic is extracted into composables (composables/ directory).

INFO

For details on the component library, see Components. For state management patterns, see State Management.