Dashboard analytics connecté à une boutique Shopify fictive. Projet portfolio full-stack démontrant des interactions DOM avancées et une architecture de production.
🔗 Démo en ligne — cliquer "Explorer la démo" ou utiliser
john@example.com/password123
- Gridstack + Vue 3 — drag & drop, resize, persistance layout (pattern Vue-first +
makeWidget()) - Temps réel SSE — reconnexion automatique, backoff exponentiel, watchdog
- Auth session cookie HttpOnly — pas de JWT côté client, lazy delete des sessions expirées
- Single origin — NestJS sert le SPA, pas de CORS
- Données mockées réalistes — générateurs avec gestion de stock cohérente et distribution pondérée
- Export CSV — BOM UTF-8, échappement complet, 3 types
- Tests à 3 niveaux — unitaire (134 tests), intégration (29 tests), E2E (3 flows)
| Couche | Technologie |
|---|---|
| Frontend | Vue 3, Pinia, PrimeVue, ECharts, Gridstack, Vite |
| Backend | NestJS, Prisma, PostgreSQL |
| Tests | Jest, Vitest, Playwright |
| Infra | Docker Compose, GitHub Actions, Render, Supabase |
Ce projet a été conçu et réalisé avec l'assistance de deux LLM travaillant en parallèle. Chaque décision d'architecture a été cadrée avant d'être codée : analyse des options, trade-offs documentés, choix verrouillés. Les propositions des deux modèles étaient systématiquement confrontées et challengées avant validation.
L'objectif était d'explorer une démarche de développement assisté où le développeur garde le rôle de décideur et de garant de la qualité.
pnpm installpnpm docker:upcd apps/api
export DATABASE_URL="postgresql://dashboard:dashboard_dev_password@localhost:5432/shopify_dashboard"
npx prisma migrate deploy
npx tsx prisma/seed.ts
cd ../..pnpm devOuvrir http://localhost:5173
pnpm testIntégration backend (Docker requis)
pnpm -C apps/api exec jest -c jest.integration.config.cjs --runInBand src/__tests__E2E (serveurs dev requis)
pnpm test:e2eDétails des stratégies de test dans docs/testing.md