Bilhälsning.se — license plate letter service
Joakim Mörling
9931061cb6
- Scaffold via npm create vite@latest --template vue-ts (create-vue interactive prompts require manual selection; create-vite supports non-interactive flags) - Dependencies: vue-router (SPA routing, createWebHistory for clean URLs), pinia (centralised state management), vitest + @vue/test-utils + jsdom (unit testing with browser DOM simulation) - Dev tooling: eslint (v10 flat config) + eslint-plugin-vue + @vue/eslint-config-typescript + @vue/eslint-config-prettier (ESLint-Prettier integration via vueTsConfigs), prettier (semi: false, singleQuote, trailingComma: all), jiti (bridges ESLint with TypeScript config files) - vite.config.ts: dev server on port 3000, @ alias resolving to src/, vitest with jsdom environment - eslint.config.ts: defineConfigWithVueTs wraps tseslint.config with Vue SFC support (vue-eslint-parser, <script setup lang="ts">), vue/multi-word off - tsconfig.app.json: path alias @/* -> src/* for TypeScript module resolution - src/router/index.ts: single route mapping / to HomePage - src/pages/HomePage.vue: minimal <script setup lang="ts"> placeholder - src/main.ts: bootstraps app with Pinia plugin + Vue Router - src/App.vue: delegates rendering to <RouterView /> - src/__tests__/HomePage.spec.ts: smoke test verifying component mounts - Directory structure: src/stores/, src/api/, src/composables/ with .gitkeep placeholders matching AGENTS.md convention (PascalCase pages, camelCase stores/composables) - index.html: lang="sv", title BilHälsning (Swedish UI convention) - Cleaned up: HelloWorld.vue, style.css, template boilerplate SVGs/PNGs - Update AGENTS.md + CODING_GUIDELINES.md: .js extensions → .ts across all file naming examples (useXxx.ts, authStore.ts, orders.ts, client.ts) - Verification: npm run dev serves blank page on http://localhost:3000, npm run lint passes (0 errors, 0 warnings), npm test passes (1 test, 1 file) |
||
|---|---|---|
| backend | ||
| frontend | ||
| .env.example | ||
| .gitignore | ||
| AGENTS.md | ||
| CODING_GUIDELINES.md | ||
| opencode.json | ||
| README.md | ||
| REQUIREMENTS.md | ||
BilHej / Bilhälsning.se
Send a physical letter to a Swedish car owner — just by knowing their license plate.
The user enters a registration number, composes a letter (from a template or free text), pays, and BilHej handles the rest: owner address lookup via Transportstyrelsen, printing and mailing via PostNord. The sender never sees the recipient's name or address.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | Vue.js 3 (Composition API), Vite, Pinia |
| Backend | Java 21, Spring Boot 4 |
| Database | PostgreSQL 16 |
| Auth | Spring Security + JWT |
| Payments | Stripe (cards + Swish) |
| Deployment | Docker, Docker Compose |
Prerequisites
- Docker & Docker Compose
- Java 21 (for local IDE development)
- Node.js 20+ (for local frontend dev)
- A Stripe account (test mode for development)
Quick Start
git clone <repo-url> bilhej
cd bilhej
cp .env.example .env # fill in your keys
docker compose up -d
The app will be available at:
- Frontend:
http://localhost:3000 - Backend API:
http://localhost:8080 - PostgreSQL:
localhost:5432
Environment Variables
Copy .env.example to .env and fill in:
| Variable | Description |
|---|---|
POSTGRES_DB |
Database name (default: bilhej) |
POSTGRES_USER |
Database user |
POSTGRES_PASSWORD |
Database password |
JWT_SECRET |
Secret key for JWT signing |
STRIPE_SECRET_KEY |
Stripe secret key |
STRIPE_WEBHOOK_SECRET |
Stripe webhook signing secret |
STRIPE_PRICE_ID |
Stripe price ID for single letter |
Project Structure
bilhej/
├── frontend/ # Vue.js 3 SPA
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── composables/ # Shared composition functions
│ │ ├── layouts/ # Page layouts
│ │ ├── pages/ # Route-level page components
│ │ ├── router/ # Vue Router config
│ │ ├── stores/ # Pinia stores
│ │ ├── api/ # API client and endpoints
│ │ ├── assets/ # Static assets, CSS
│ │ ├── App.vue
│ │ └── main.js
│ ├── index.html
│ ├── vite.config.js
│ └── package.json
├── backend/ # Spring Boot 3
│ ├── src/main/java/se/bilhalsning/
│ │ ├── BilHejApplication.java
│ │ ├── config/ # Security, CORS, Stripe config
│ │ ├── controller/ # REST controllers
│ │ ├── dto/ # Data transfer objects
│ │ ├── entity/ # JPA entities
│ │ ├── repository/ # Spring Data repositories
│ │ ├── service/ # Business logic
│ │ └── security/ # JWT filter, user details
│ └── src/main/resources/
│ ├── application.yml
│ └── db/migration/ # Flyway migrations
├── docker-compose.yml
├── docker/
│ ├── backend.Dockerfile
│ └── frontend.Dockerfile
├── .env.example
├── README.md
├── REQUIREMENTS.md
├── CODING_GUIDELINES.md
└── ARCHITECTURE.md
Development
Frontend (dev server with HMR)
cd frontend
npm install
npm run dev
Backend (IDE or CLI)
cd backend
./gradlew bootRun
Stripe Webhooks (local testing)
stripe listen --forward-to localhost:8080/api/webhooks/stripe
Related Documents
- REQUIREMENTS.md — Full product requirements and business model
- CODING_GUIDELINES.md — Code conventions and standards
- ARCHITECTURE.md — Detailed architecture and data flow