Skip to content

🧑‍💻 Develop

Everything you need to contribute to the Panoramax frontend: architecture, dev workflow, tests, linting and build steps.

🏗️ Architecture at a Glance

Layer Description
app/ Front-office (public website). Contains Vue components, routes, stores and views.
admin/ Back-office (admin dashboard). Same structure as app.
shared/ Shared utilities, components, services, locales… consumed by both app and admin.

The repository uses pnpm workspaces to manage dependencies efficiently across these packages.

📂 Typical Folder Layout (app/ & admin/)

  • components/ – Reusable Vue components
  • views/ – Route-level pages
  • router/ – Vue Router configuration
  • store/ – Pinia stores (only when needed)
  • tests/ – Unit tests (Vitest + Vue Test Utils)
  • App.vue – Root component
  • main.ts – Application entry point (mounts Vue app)

⚡ Development Workflow

Run front-office (app)

pnpm dev:app

Run back-office (admin)

pnpm dev:admin

✅ Unit Tests (Vitest)

Scope pnpm
All workspaces pnpm test:unit
App only pnpm test:unit:app
Admin only pnpm test:unit:admin
Shared only pnpm test:unit:shared

Tests are located under each package (app/src/tests, admin/src/tests, shared/tests).

🧹 Linting

pnpm lint

ESLint is configured with Vue + TypeScript presets and Prettier integration. Fix issues before opening a PR.

📦 Build & Deploy

pnpm build:deploy

This command runs pnpm build and copies dist/app/index.html to dist/404.html. The output is served by server.js (Express) in production environments:

node server.js

📚 Documentation

  • Remember to generate the doc sometimes with pnpm docs:generate
  • Markdown docs live in the docs/ folder.
  • During pnpm docs:generate or pnpm build, they’re converted to HTML and appear in dist/docs/.

Note

Want to add new sections? Drop a NN_Title.md file in docs/ and it’ll show up automatically (thanks to the markdown pipeline).

🔗 See Also