ansiblenginx/app/bricolociaac/apps/modern-app

BricoLoc - Application Moderne 🛠️

Application de location d'outils démontrant une architecture microservices moderne avec Clean Architecture.

📚 Table des matières

• Stack Technique
• Architecture
• Installation
• Scripts Disponibles
• Structure du Projet
• Documentation
• Tests
• CI/CD

🚀 Stack Technique

• Frontend : Next.js 14 (App Router), React 18, TypeScript
• UI : Tailwind CSS, shadcn/ui
• Backend : Supabase (PostgreSQL, Auth, Realtime, Storage)
• State Management : Zustand, React Query
• Validation : Zod, React Hook Form
• Tests : Jest, React Testing Library, Playwright
• CI/CD : GitHub Actions, Vercel

🏗️ Architecture

Cette application suit une architecture microservices hybride avec 6 services :

• Auth Service : Authentification et gestion des utilisateurs
• Catalogue Service : Gestion des outils, catégories et recherche
• Reservation Service : Création et gestion des réservations
• Inventory Service : Gestion des stocks et disponibilités
• Payment Service : Traitement des paiements (Stripe)
• Notification Service : Envoi d'emails et notifications

Chaque service implémente Clean Architecture avec 3 couches :

• Domain Layer : Entités métier, règles business, interfaces
• Application Layer : Use Cases, services applicatifs
• Infrastructure Layer : Repositories, APIs externes, Supabase

src/
├── services/
│   ├── auth/
│   │   ├── domain/           # Entités User, règles métier
│   │   ├── application/      # Use cases (login, register)
│   │   └── infrastructure/   # Supabase Auth
│   ├── catalogue/
│   ├── reservation/
│   └── ...
├── shared/                   # Code partagé entre services
│   ├── domain/
│   ├── infrastructure/
│   └── utils/
└── components/              # Composants UI React

📦 Installation

Prérequis

• Node.js 20+
• pnpm 8+
• Un compte Supabase

Installation locale

# 1. Cloner le repository
git clone https://github.com/votre-username/bricoloc.git
cd bricoloc/apps/modern-app

# 2. Installer les dépendances
pnpm install

# 3. Configurer les variables d'environnement
cp .env.example .env.local
# Éditer .env.local avec vos credentials Supabase

# 4. Lancer le serveur de développement
pnpm dev

L'application sera accessible sur http://localhost:3000

🛠️ Scripts Disponibles

Développement

pnpm dev              # Lancer le serveur de développement
pnpm build            # Build de production
pnpm start            # Lancer le build de production

Qualité du code

pnpm lint             # Linter le code (ESLint)
pnpm lint:fix         # Corriger automatiquement les erreurs de lint
pnpm format           # Formatter le code (Prettier)
pnpm type-check       # Vérifier les types TypeScript

Tests

pnpm test             # Tests unitaires (Jest)
pnpm test:watch       # Tests en mode watch
pnpm test:coverage    # Tests avec coverage
pnpm e2e              # Tests E2E (Playwright)
pnpm e2e:ui           # Tests E2E avec interface UI

📂 Structure du Projet

apps/modern-app/
├── src/
│   ├── app/                  # Pages Next.js (App Router)
│   ├── components/
│   │   ├── ui/              # Composants shadcn/ui
│   │   ├── features/        # Composants métier
│   │   └── layouts/         # Layouts (Header, Footer)
│   ├── services/            # Microservices (Clean Architecture)
│   │   ├── auth/
│   │   ├── catalogue/
│   │   ├── reservation/
│   │   ├── inventory/
│   │   ├── payment/
│   │   └── notification/
│   ├── shared/              # Code partagé
│   │   ├── domain/
│   │   ├── infrastructure/
│   │   └── utils/
│   ├── hooks/               # Hooks React personnalisés
│   └── lib/                 # Utilitaires
├── tests/
│   ├── unit/               # Tests unitaires
│   ├── integration/        # Tests d'intégration
│   └── e2e/                # Tests E2E Playwright
├── docs/                   # Documentation
└── public/                 # Assets statiques

📖 Documentation

• Roadmap - Planning du développement
• Setup Semaine 5 - Configuration initiale
• Auth Semaine 6 - Implémentation Auth Service
• Exigences Non Fonctionnelles
• Architecture Logique
• Comparaison Styles Architecturaux
• Matrice de Choix Technologique
• Setup Supabase

🧪 Tests

Tests Unitaires (Jest)

Les tests unitaires couvrent :

• Entités du domaine
• Validateurs (Zod)
• Utilitaires (Result Pattern, Email validation)

pnpm test

Coverage actuel : 95%+ sur le domaine et les utilitaires

Tests E2E (Playwright)

Les tests E2E valident :

• Navigation sur la page d'accueil
• Parcours utilisateur complets
• Interactions avec l'UI

pnpm e2e

🚀 CI/CD

GitHub Actions

Le pipeline CI s'exécute sur chaque push/PR et effectue :

• ✅ Lint (ESLint)
• ✅ Type check (TypeScript)
• ✅ Tests unitaires avec coverage
• ✅ Build de production
• ✅ Vérification de la taille du bundle

Déploiement Vercel

• Production : Déploiement automatique sur push vers main
• Preview : Déploiement automatique pour chaque PR
• URL Production : bricoloc-moderne.vercel.app (à configurer)

🤝 Contribution

Voir CONTRIBUTING.md pour les guidelines de contribution.

📝 License

MIT

---

Développé avec ❤️ par l'équipe BricoLoc
Dernière mise à jour : 31 Octobre 2025