Choreo Planer

Features

Choreography editor and visualization with mat-based positioning
Team and routine management
Video and PDF export with FFmpeg.wasm
Responsive design (mobile-friendly)
Internationalization (English & German)
Feature flags via Unleash
Integration with backend API
PWA support (installable)

Prerequisites

Node.js (v18 or newer recommended)
npm

Quick Start

Install dependencies:
CODE
```
npm install
```
Start the development server:
CODE
```
npm run dev
```
The app will be available at the configured localhost port by default.

Useful npm scripts

Script	Description
`npm run dev`	Start the development server with hot reload (includes icon generation)
`npm run build`	Build for production (includes docs, icons, prerendering, sitemap)
`npm run preview`	Preview the production build locally
`npm run lint`	Run ESLint with strict rules
`npm run lint:fix`	Run ESLint with auto-fix
`npm run test`	Run all tests (unit + E2E)
`npm run test:unit`	Run Vitest unit tests
`npm run test:e2e`	Run Playwright E2E tests
`npm run test:e2e:ui`	Run Playwright with UI
`npm run docs`	Generate JSDoc documentation
`npm run docs:watch`	Live-reload documentation server
`npm run format`	Format code with Prettier
`npm run format:check`	Check code formatting

Project Structure

CODE

app/
├── public/              # Static assets (icons, docs)
├── src/
│   ├── components/      # Vue components
│   ├── docsDef.js      # Documentation definitions
│   ├── i18n/           # Translation files (en.json, de.json)
│   ├── plugins/        # Vue plugin configurations
│   ├── router/        # Vue Router configuration
│   ├── services/      # API service layer
│   ├── store/          # Vuex store
│   ├── utils/          # Utility functions
│   ├── views/          # Page components
│   ├── App.vue         # Root component
│   └── main.js         # Entry point
├── tests/
│   ├── integration/    # Playwright E2E tests
│   └── unit/           # Vitest unit tests
├── vite.config.js      # Vite configuration
└── package.json

Architecture

CODE

graph TD
  User[User] -->|IPv4/IPv6,https| AWS[AWS EC2]
  AWS -->|IPv6,https| Router[Home Router]
  Router -->|port forwarding| ReverseProxy[Reverse Proxy]

  subgraph On-Premise Server
    ReverseProxy --> API[Choreo Planer API]
    ReverseProxy --> Matomo[Matomo Analytics]
    ReverseProxy --> Watchtower
    ReverseProxy --> Unleash
  end

  subgraph GitHub Pages
    User -->|https| Pages[GitHub Pages - Vue 3 App]
  end

  Pages -.->|tracking| Matomo
  API -->|nodemailer| Email[Google Mail → Brevo]
  Pages -.->|logging| BetterStack[BetterStack]
  API -.->|logging| BetterStack

  subgraph Docker Containers
    API -->|sequelize| DB[(Postgres Database)]
  end

Testing

Unit Tests (Vitest)

CODE

npm run test:unit

Coverage thresholds are set to 80% for branches, functions, lines, and statements.

E2E Tests (Playwright)

CODE

npm run test:e2e

Tests are run in 7 parallel shards in CI. To run locally with UI:

CODE

npm run test:e2e:ui

License

See LICENSE for details.

Support

For questions or support, please open an issue or contact the maintainer via the website.