Skip to main content

Frontend

Technology Stack​

  • JavaScript Framework: Vue
  • Programming Languages: mainly TypeScript and standard HTML within Vue components
  • UI Library: Vuetify
  • Package Manager: Yarn -- Instructions for the most important yarn commands can be found in the README.md in the repository.
  • Tooling: ESLint, Prettier, GraphQL Codegen

Components​

Besides the various views to interact with the system, there are two important components in the frontend: The Pinia store and the GraphQL client.

The Pinia store​

The role of the Pinia Store in Vue is to manage the state of the application in a centralized and reactive manner, facilitating state manipulation and sharing across components.

The store manages:

  • login state
  • the active user role
  • the user's shopping cart
  • the notification queue

The GraphQL client​

The GraphQL client is the interface to the backend services. All communication with the backend is done through the GraphQL client. It provides functions for sending queries and mutations to the backend and receiving responses.