Nettdetektivene Frontend

This repository contains the frontend for Nettdetektivene, built with Vue 3, Vite, TypeScript, Pinia, Vue Router, and Tailwind CSS. It is the client application for the game and teacher flows, and is intended to run together with the backend services from the main nettdetektivene repository.

Getting started

Use Node.js 20.19+ or 22.12+, then install dependencies:

npm install

For local development, this frontend should normally be run together with the backend through Docker Compose in the main repository:

Backend and shared local setup: nettdetektivene
Start the backend stack from that repository as described there.
Run this frontend locally with:

npm run dev

By default, Vite proxies /api and /assets requests to http://backend:8080, which matches the Docker Compose setup. If needed, you can override this with VITE_API_BASE_URL or VITE_API_PROXY_TARGET.

Available scripts

npm run dev

Starts the Vite development server.

npm run build

Runs type-checking and creates a production build.

npm run type-check

Runs vue-tsc across the project.

npm run lint

Runs Oxlint and ESLint with fixes.

npm run format

Formats the src/ directory with Prettier.

Testing

Run unit tests with:

npm run test:unit -- --run

Run end-to-end tests with:

npm run test:e2e

Before pushing changes, it is a good baseline to run:

npm run type-check
npm run test:unit -- --run

For changes affecting navigation, login, or full user flows, also run:

npm run test:e2e

Project structure

src/app/ contains app-level setup such as router, layouts, audio, styles, and shared bootstrapping.
src/auth/, src/classrooms/, src/map/, src/stops/, src/mystery/ and similar folders are organized by feature.
Most feature folders contain their own api/, components/, model/, pages/, and routes.ts where relevant.
src/shared/ contains cross-feature components and utilities.
src/locales/ contains localized strings.
Tests live close to the code, for example in __tests__/ folders and feature-specific test directories.
e2e/ contains Playwright tests.

Notes

Use Vite environment variables for backend configuration, such as VITE_API_BASE_URL.
Do not commit secrets or local test artifacts.
The functional scope is defined primarily by the wiki and project documents, even if the current code does not yet cover everything.

idatt2106-v26-04/frontend

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Contributors 6

Languages