SudoSOS Frontend Monorepo

This monorepo contains all the frontend projects and common code for the SudoSOS.

Projects

1. sudosos-nginx-proxy: Nginx proxy configuration for the SudoSOS stack.
2. sudosos-frontend-common: Common code components, helper functions, services, and Pinia stores for frontend applications.
3. sudosos-themese: Primevue themes for the SudoSOS frontend.
4. sudosos-point-of-sale: Frontend application for the SudoSOS POS system built with Vue 3 and TypeScript.
5. sudosos-dashboard: Dashboard frontend application for SudoSOS, rewritten in Vue 3.

Contributing

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please open an issue on the issue tracker.

Development quick start

You can quickly start development directly in your browser by using Codespaces. Otherwise you can use a local code editor such Jetbrains Webstorm (free via the university) or VSCode.

GitHub Codespaces

Step 1: Setting up the environment

• Click here to create a codespace for this repository
• After this, all of the dependencies, development environment and set up command should be run and ready.

Step 2: Launching dashboard/point-of-sale

• Run yarn dev-dashboard or yarn dev-pos to start the development environment.
• There should be a pop up to open the website in the bottom right corner, changes to the code are directly reflected on this site.
• You can also open this site using the ports tab in the same window as the terminal.

Warning

Login via GEWIS does not work on Codespaces, you will need to sign in using your m-account in the local login.

Tip

You can also use the Jetbrains IDE if you prefer that over the default Codespaces IDE. More information can be found here.

Tip

Use yarn dev-dashboard:local, yarn dev-dashboard:test, or yarn dev-dashboard:prod to switch between backends. The test and prod environments correspond to sudosos.test.gewis.nl and sudosos.gewis.nl, respectively. The local option is for running your own backend.

Local set up

Step 0: Prerequisites

• Node.js Version 18+
• Git and possibly a Git manager
• (VSCode: Vue extension)
• Yarn version 4 (enable this by running corepack enable && yarn set version berry after installing node)

Step 1: Installing

• Use git to clone the repository.
• Run yarn install
• Copy the .env.example file to .env file in the apps/dashboard and apps/point-of-sale directories
• Run yarn build-libraries to have the SudoSOS libraries also ready

Step 2: Running the dashboard/point-of-sale

• Run yarn dev-dashboard or yarn dev-pos to start the development environment.
• You can access the dashboard and point of sale at localhost:5173 and localhost:5174 respectively.

Short note on ESLint and Prettier

We use linting and prettier throughout the project, these are an extension on the central JS-Configs. You can check this by running yarn lint and yarn format (in the root for all packages, or in each package). Some lint issues can be fixed by running yarn lint-fix, but some require manual work. All prettier can be fixed using yarn format-fix. This will also be enforced by the CI on GitHub when creating a pull request.

Proxying requests to different backends

You can switch between different backends in development using the following yarn commands:

For Dashboard:

• yarn dev-dashboard or yarn dev-dashboard:test - Uses the test backend (https://sudosos.test.gewis.nl/api/v1) - default
• yarn dev-dashboard:prod - Uses the production backend (https://sudosos.gewis.nl/api/v1)
• yarn dev-dashboard:local - Uses a local backend (http://localhost:3000)

For Point of Sale:

• yarn dev-pos or yarn dev-pos:test - Uses the test backend (https://sudosos.test.gewis.nl/api/v1) - default
• yarn dev-pos:prod - Uses the production backend (https://sudosos.gewis.nl/api/v1)
• yarn dev-pos:local - Uses a local backend (http://localhost:3000)

Contributors

This project exists thanks to all the people who contribute code.