ATP Cloud groep 1

Appearance

Student Cloud Platform Frontend ​

This is the frontend for the Student Cloud Platform project. It is built with Vue 3 and Vite, using TypeScript and a modern component-based architecture with PrimeVue.

Main Technologies ​

  • Vue 3: Progressive JavaScript framework for building user interfaces
  • Vite: Fast build tool and dev server
  • TypeScript: Type safety for large-scale apps
  • PrimeVue: UI component library for Vue 3 (used for most UI elements)
  • Pinia: State management
  • pinia-colada: Helper utilities for Pinia stores
  • Vue Router: Client-side routing
  • Keycloak-js: Authentication (OIDC)
  • Axios: HTTP client for API calls
  • Playwright: End-to-end testing
  • Vitest: Unit testing
  • ESLint: Linting and code quality

Project Structure ​

  • src/ — Main source code

    • api/ — API clients and helpers (Axios, endpoints)
    • assets/ — Static assets (images, styles, etc.)
    • components/ — Reusable Vue components
    • composable/ — Vue composables (reusable logic, e.g. useAuth)
    • directives/ — Custom Vue directives
    • guard/ — Route guards (auth, permissions)
    • helpers/ — Utility/helper functions
    • instances/ — Singleton instances (e.g. Axios, Keycloak)
    • mutations/ — Functions for making API requests that modify data (POST, PUT, DELETE)
    • queries/ — Functions for making API requests that fetch data (GET)
    • router/ — Vue Router setup and route definitions
    • stores/ — Pinia stores (global state)
    • types/ — TypeScript type definitions
    • views/ — Page-level Vue components (routed pages)
    • shims-vue.d.ts — TypeScript shims for Vue files
    • main.ts — App entry point
    • main.spec.ts — Main entry unit test
    • App.vue — Root Vue component
    • keycloakMock.ts — Keycloak mock for testing

  • public/ — Static public files (served as-is)

  • e2e/ — End-to-end Playwright tests

Development Setup ​

Development is managed via Docker Compose for a full-stack experience (frontend, backend, database, Keycloak). See the infra/README.md for setup instructions and details.

For local-only frontend development:

sh
pnpm install
pnpm dev

Testing & Linting ​

  • Unit tests:

    sh
    pnpm test:unit
# To generate a coverage report:
pnpm test:unit -- --coverage

  • E2E tests:

    sh
    npx playwright install # first time only
pnpm build # required for CI
pnpm test:e2e

  • Linting:

    sh
    pnpm lint

Configuration Details ​

Vite ​

  • Config file: vite.config.ts
  • Used for local development and build configuration
  • Includes plugins for Vue, Vue DevTools, and Monaco Editor (for JSON editing)
  • Sets up path alias @ to src/
  • Dev server runs on port 5173 and proxies /api to the backend (port 8080)
  • Hot Module Replacement (HMR) enabled for fast feedback

Playwright ​

  • Config file: playwright.config.ts
  • E2E tests are in e2e/ (see e2e/vue.spec.ts for examples)
  • Supports running tests on Chromium, Firefox, and WebKit
  • Custom settings for base URL, timeouts, and test directory
  • Playwright HTML reports are generated in playwright-report/
  • E2E tests require public/config.js to have AUTH_MODE: 'mock' set. This enables API mocking and disables real authentication for test runs.
  • Adjust public/config.js as needed before running E2E tests to ensure the app runs in mock mode.

Vitest ​

  • Config file: vitest.config.ts
  • Unit tests are in src/ alongside code, using .spec.ts files
  • Uses Vite for fast test startup and module resolution
  • Coverage reports output to coverage/
  • Additional setup in vitest.setup.ts

ESLint ​

  • Config file: eslint.config.ts
  • Uses recommended rules for Vue, TypeScript, and Prettier
  • Lints .ts, .vue, and config files
  • Run pnpm lint to check code style and catch errors before commit

For full-stack/local dev, see infra/README.md.