Architecture - FactoriaF5-Asturias/project-p5-digital-academy-team1-restaurant-frontend GitHub Wiki

System Context

GitSushi uses a decoupled architecture. This repository contains the frontend SPA only, which consumes the backend REST API over HTTPS/JSON.

  • Frontend (This Repo): Vue 3 SPA served by Vite in development (https://localhost:5173).
  • Backend Repository: Spring Boot REST API on https://localhost:8443, endpoints under /api/v1.
  • Communication: JSON over HTTPS; session handled with httpOnly JWT cookies and an XSRF token.

Tech Stack

Language: JavaScript (ES Modules) | Modern syntax with async/await.

Framework: Vue 3.5 | Composition API and Single File Components with <script setup>.

Build Tool: Vite 8 | Dev server with HMR, local HTTPS and optimized production builds.

Routing: Vue Router 5 | Lazy-loaded views, nested admin routes and role-based guards.

State: Pinia 4 | Modular stores: auth, cart, checkout, exclusiveOffers, lastOrder.

HTTP: Axios 1 | Single configured instance shared by all services.

Styling: Tailwind CSS 4 | Utilities generated from the project's design tokens.

Testing: Vitest 5 + Vue Test Utils + jsdom | Unit and component tests, v8 coverage.

CI: GitHub Actions | Tests and coverage threshold on every Pull Request to dev / main.

Layered Architecture

The application follows a layered pattern where each layer has a single responsibility. Components never call Axios directly.

graph TD
    User[User / Browser] --> Router
    Router[Vue Router guards<br/>checks role] --> View
    View[Views<br/>route-level pages] --> Component[Components<br/>reusable UI]
    Component --> Store[Pinia Stores<br/>shared state + business rules]
    Component --> Composable[Composables<br/>async logic: loading / error / data]
    Composable --> Service[Services<br/>one per API resource]
    Store --> Service
    Service --> Api[api.js<br/>Axios instance + interceptors]
    Api -->|HTTPS JSON + cookies| Backend[(GitSushi REST API)]

    Constants[Constants<br/>roles, enums, mappings, VAT] -.-> Store
    Constants -.-> Service
    Utils[Utils<br/>formatting, validation] -.-> Component

    style User fill:#f9f,stroke:#333,stroke-width:2px
    style Backend fill:#bbf,stroke:#333,stroke-width:2px
Loading

Architectural Components:

  • Views: One per route. They compose components and contain no business logic (e.g. CestaView = CartSummary + ChannelSelector + PaymentSelector + ChefNoteField + OrderConfirmation).
  • Components: Reusable, self-contained UI pieces, grouped in subfolders by domain when they belong together (auth/, profile/).
  • Stores (Pinia): Global state and business rules. Derived values (subtotal, VAT, total, discounts) are getters, never duplicated state.
  • Composables: Encapsulate async and reusable logic with a common shape — loading, error, data and an action (e.g. useProducts, useTableDetection, usePagination, useSpeechRecognition, useDeliveryMetrics).
  • Services: The only layer that knows endpoint URLs and payload shapes. They translate between the frontend model and the API contract.
  • api.js: Single Axios instance with baseURL, credentials, XSRF headers and the session-renewal interceptor.
  • Router: Routes, role rules (guards.js) and redirects when the backend ends the session (sessionRedirects.js).
  • Constants & Utils: Business values and enum mappings (no magic numbers), plus pure helpers for currency, dates and validation.
  • Mocks: Temporary data sources with the same shape as the real API, used only while a backend endpoint does not exist yet.

Folder Layout

Tests live next to the file they test (CartSummary.vue → CartSummary.test.js).

src/
├── main.js                  # Entry point: Vue, Pinia, Router, session handlers
├── App.vue                  # Root layout: header, router-view, footer
├── style.css                # Design tokens (@theme) and base styles
├── assets/                  # Images imported from code (hero, logo)
├── components/              # Reusable UI (CartSummary, ProductCard, KitchenOrderCard, ConfirmDialog...)
│   ├── auth/                # Login, register, forgot / reset password forms
│   └── profile/             # Profile form, fields and its composable
├── composables/             # Reusable logic (useProducts, usePagination, useSpeechRecognition...)
├── constants/               # Roles, payment methods, categories, VAT, labels, navigation, admin sections
├── mocks/                   # Temporary mocks (order history)
├── router/                  # Routes, access guards and session redirects
├── services/                # API layer (api.js, authService, products, orders, kitchen, delivery...)
├── stores/                  # Pinia stores (auth, cart, checkout, exclusiveOffers, lastOrder)
├── utils/                   # Pure helpers (formatCurrency, formatDateTime, productValidation)
└── views/                   # Route-level pages
    └── admin/               # Nested admin pages (home, products, invoicing)

public/
└── products/                # 60 product images served statically
.github/workflows/tests.yml  # CI: tests + coverage on Pull Requests
⚠️ **GitHub.com Fallback** ⚠️