Job Application Tracker — Frontend

A bilingual (EN/FR), responsive Vue 3 SPA for tracking job applications.

Tech Stack

• Vue 3 (Composition API) + TypeScript
• Vite 6 — build tool
• Pinia — state management (JWT tokens)
• Vue Router 4 — routing with auth guards
• vue-i18n — internationalization (English / French)
• Tailwind CSS 4 — utility-first styling
• @faicel/job-tracker-api-client — official API client

Prerequisites

• Node.js ≥ 18
• Docker (for backend)
• Access to the private npm registry (configured in .npmrc)

Quick Start

# Install dependencies
npm install

# Start the Docker backend
docker pull code.bhk-itsolutions.com/faicel/job-tracker-dev:dev
docker run -p 3000:3000 code.bhk-itsolutions.com/faicel/job-tracker-dev:dev

# Configure environment
cp .env.local.example .env.local
# Edit .env.local if needed (default: VITE_API_BASE_URL=http://localhost:3000)

# Start the dev server
npm run dev

The app is available at http://localhost:5173.

Available Scripts

Command	Description
npm run dev	Start Vite dev server
npm run build	Production build
npm run test:unit	Run Vitest unit tests
npm run test:e2e	Run Playwright E2E tests (requires Docker backend)
npm run lint	Run ESLint

Environment Variables

Variable	Description	Default
VITE_API_BASE_URL	Backend API base URL	http://localhost:3000
VITE_APP_NAME	Application display name	Job Application Tracker

Testing

Unit Tests (Vitest)

Unit tests run with mocked API client — no backend required.

npm run test:unit

E2E Tests (Playwright)

E2E tests run against the real Docker backend. The backend must be running on localhost:3000.

# Ensure backend is running
npm run test:e2e

Project Structure

src/
├── application/         # Application domain (CRUD, status, documents)
│   ├── pages/           # List, Create, Detail views
│   ├── service-api.ts   # Application API service
│   └── status.ts        # Status utilities
├── user/                # User domain (auth, profile)
│   ├── pages/           # Login, Register, Profile views
│   ├── service-api.ts   # Auth API service
│   └── validation.ts    # Zod validation schemas
├── components/          # Shared UI components
│   ├── applications/    # Application-specific components
│   ├── documents/       # Document management components
│   ├── header/          # AppHeader
│   ├── language/        # LanguageSwitcher
│   ├── dialog/          # ConfirmDialog
│   └── ...
├── composables/         # Vue composables (useApplications, useDocuments)
├── helpers/             # Utilities (error-mapper, form-draft)
├── stores/              # Pinia stores (auth, locale)
├── router/              # Vue Router configuration
├── i18n/                # vue-i18n setup
└── locales/             # EN/FR translation files

Documentation

Full specification and design documents are in specs/004-vue-job-tracker/.

For the complete development setup guide, see specs/004-vue-job-tracker/quickstart.md.