webart
/
strava-frontend
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
strava-frontend/.roo/memory-bank/techContext.md

3.4 KiB
Raw Blame History

Tech Context — Strava Frontend

Stack

  • Vue 3 (3.5) + TypeScript 5.8 (strict mode, noEmit)
  • Vite 5 (dev server, bundler) with @vitejs/plugin-vue 5 and @intlify/unplugin-vue-i18n/vite
  • Pinia 3 — state management (options-style stores; vue ≥3.3 required)
  • vue-router 4 — history-mode routing
  • vue-i18n 9 — i18n (composition mode, default/fallback ru)
  • Vuestic UI 1.9 — component library (+ @vuestic/tailwind)
  • Tailwind CSS 3.4 + PostCSS + autoprefixer — utilities/styling
  • Sass — global styles
  • Axios 1.x — HTTP client (client-side via injected instances, server-side in server/api.ts)
  • Chart.js 4 + vue-chartjs 5 (+ zoom/geo/adapter-moment plugins) — charts
  • vue-yandex-maps — Yandex Maps integration
  • Express 4 — SSR server (server/, port 3001)
  • tsx — TypeScript runner for the SSR server (in dependencies, not devDependencies)

Tooling

  • ESLint 9 flat config (eslint.config.mjs) with vue, typescript-eslint 8, prettier plugins
  • Prettier 3 — formatting
  • Husky + lint-staged — pre-commit lint of src/**/*.{ts,js,vue}
  • vue-tsc 2 — type checking at build

Scripts (package.json)

  • yarn dev — Vite dev server
  • yarn build — vue-tsc --noEmit && vite build
  • yarn lint — eslint --fix over src
  • yarn format — prettier --write
  • yarn build:ci / yarn start:ci — CI build + static serve
  • yarn server:dev — run SSR server via tsx server/index.ts
  • yarn server:build — compile SSR server (tsc -p tsconfig.server.json)
  • yarn server:start — run compiled SSR server

Environment

  • API host is a hardcoded constant HOST in src/main.ts (no .env-driven base URL). Yandex Maps API key and GTM keys are hardcoded / env-driven (VITE_APP_GTM_ENABLED, VITE_APP_GTM_KEY).
  • Locales: br, cn, es, gb, ir, ru (default ru).
  • SSR: SSR_PORT (default 3001), SSR_BASE_URL (default https://cycle-rider.ru), VITE_APP_API_URL (backend API for server-side fetches).
  • Deploy: Dockerfile (multi-stage, node:20-alpine: build stage + runtime stage with nginx) + nginx.conf (SSR proxy + SPA fallback); run.sh local runner.
  • Dev environment requires Node ≥18.19 (vite 5); Docker uses node:20-alpine.

UI Verification (MCP Browser)

  • Playwright MCP (@playwright/mcp) configured in Zoo Code MCP settings (mcp_settings.json) as server web-browser.
  • Browser: Chromium (headless), already installed at ~/.cache/ms-playwright/chromium-1234.
  • Node 22 required (via nvm: ~/.nvm/versions/node/v22.14.0/). MCP config uses absolute path to npx.
  • Tools available: browser_navigate, browser_snapshot, browser_click, browser_fill_form, browser_take_screenshot, browser_evaluate, browser_network_requests, etc.
  • Usage: after yarn build passes, launch dev server (yarn dev) and use MCP browser tools to verify UI routes and interactions.
  • Auth: set localStorage.token / localStorage.user via browser_evaluate before navigating to auth-required pages.

Constraints

  • No test framework configured (no vitest/jest/cypress). Verification = yarn lint + yarn build + MCP browser spot-checks.
  • Backend API contract: /api/v0/*, JWT Bearer auth, error envelope may be { code, message, detail } (see backend app/web/errors.py).
  • Keep vue-tsc clean — build fails on type errors.