diff --git a/.cursor/rules/commands.mdc b/.cursor/rules/commands.mdc
new file mode 100644
index 0000000..564ab01
--- /dev/null
+++ b/.cursor/rules/commands.mdc
@@ -0,0 +1,147 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+# Commandes Makefile de Mangarr
+
+Toujours chercher si une commande est disponible dans [Makefile](mdc:Makefile).
+
+## Structure Générale
+Le Makefile est organisé en plusieurs sections distinctes :
+- Docker 🐳
+- Composer 🧙
+- Symfony 🎵
+- Webpack Encore 📦
+
+## Variables Principales
+```makefile
+# Exécutables Docker
+DOCKER_COMP = docker compose
+DOCKER_COMP_EXEC = $(DOCKER_COMP) exec
+
+# Conteneurs
+PHP_CONT = $(DOCKER_COMP_EXEC) php
+NODE_CONT = $(DOCKER_COMP_EXEC) node
+
+# Exécutables dans les conteneurs
+PHP = $(PHP_CONT) php
+COMPOSER = $(PHP_CONT) composer
+SYMFONY = $(PHP) bin/console
+SF_MEMORY = $(PHP) -d memory_limit=256M bin/console
+```
+
+## Bonnes Pratiques
+
+### 1. Organisation des Commandes
+- Regrouper les commandes par catégorie avec des commentaires clairs
+- Utiliser des variables pour les commandes répétitives
+- Documenter chaque commande avec `##` pour l'aide automatique
+- Préfixer les commandes internes avec `_` (exemple: `_check-deps`)
+
+### 2. Paramètres et Options
+- Utiliser la syntaxe `make command p=value` pour les paramètres
+- Documenter les paramètres possibles dans les commentaires
+- Utiliser `?=` pour les valeurs par défaut modifiables
+
+### 3. Dépendances
+- Définir clairement les dépendances entre les commandes
+- Utiliser des commandes composées pour les tâches complexes
+- Éviter les dépendances circulaires
+
+### 4. Documentation
+- Chaque commande doit avoir une description avec `##`
+- Inclure des exemples d'utilisation pour les commandes complexes
+- Utiliser la commande `help` pour afficher la documentation
+
+## Commandes Disponibles
+
+### Docker 🐳
+```makefile
+build: ## Construit les images Docker
+up: ## Démarre les conteneurs
+start: ## Démarre les conteneurs en mode détaché
+down: ## Arrête et supprime les conteneurs
+logs: ## Affiche les logs en temps réel
+sh: ## Se connecte au conteneur PHP
+```
+
+### Composer 🧙
+```makefile
+composer: ## Exécute une commande composer (c=command)
+vendor: ## Installe les dépendances
+```
+
+### Symfony 🎵
+```makefile
+sf: ## Liste/exécute les commandes Symfony (c=command)
+cc: ## Vide le cache
+migration: ## Crée une nouvelle migration
+fixtures: ## Charge les fixtures
+consume: ## Consomme les messages de la queue
+```
+
+### Webpack Encore 📦
+```makefile
+npm-install: ## Installe les dépendances npm
+npm-run: ## Lance le serveur de développement
+npm-watch: ## Surveille les changements
+```
+
+## Exemples d'Utilisation
+
+### 1. Installation du Projet
+```bash
+make install # Construit et démarre les conteneurs, installe les dépendances
+```
+
+### 2. Développement Quotidien
+```bash
+make start # Démarre les conteneurs
+make npm-watch # Lance la compilation des assets
+make consume # Démarre les workers
+```
+
+### 3. Commandes avec Paramètres
+```bash
+make composer c="require symfony/orm-pack" # Ajoute une dépendance
+make sf c="make:entity" # Crée une entité
+make test f="ScrapeChapterHandlerTest" # Lance un test spécifique
+```
+
+## Ajout de Nouvelles Commandes
+
+### 1. Structure de Base
+```makefile
+command-name: ## Description de la commande
+ @$(DOCKER_COMP) ... # Commande à exécuter
+```
+
+### 2. Avec Paramètres
+```makefile
+command-with-param: ## Description (p=value)
+ @$(eval p ?=)
+ @$(DOCKER_COMP) ... $(p)
+```
+
+### 3. Commande Composée
+```makefile
+full-install: build start vendor npm-install ## Description complète
+```
+
+## Maintenance
+
+### 1. Nettoyage
+- Supprimer les commandes obsolètes
+- Mettre à jour les descriptions
+- Vérifier les dépendances
+
+### 2. Documentation
+- Maintenir la section d'aide à jour
+- Ajouter des exemples pour les nouvelles commandes
+- Documenter les changements importants
+
+### 3. Tests
+- Tester les nouvelles commandes
+- Vérifier les dépendances
+- Valider les paramètres
\ No newline at end of file
diff --git a/.cursor/rules/front_vue.mdc b/.cursor/rules/front_vue.mdc
new file mode 100644
index 0000000..b4ca07f
--- /dev/null
+++ b/.cursor/rules/front_vue.mdc
@@ -0,0 +1,155 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Architecture Frontend Vue.js
+
+## Structure Générale
+L'application Vue.js suit une architecture hexagonale (ports & adapters) avec une séparation claire des responsabilités. Le code est organisé en domaines distincts dans le dossier `assets/vue/`.
+Pour ce qui est du style, on utilise TailwindCss, Headlessui et Heroicons.
+
+```
+assets/vue/
+├── app/
+│ ├── shared/ # Code partagé entre les domaines
+│ │ ├── components/ # Composants réutilisables
+│ │ │ ├── ui/ # Composants UI génériques (boutons, inputs, etc.)
+│ │ │ └── layout/ # Layouts réutilisables
+│ │ ├── composables/ # Composables Vue partagés
+│ │ ├── plugins/ # Plugins Vue (router, pinia, etc.)
+│ │ └── utils/ # Utilitaires partagés
+│ │
+│ ├── domain/ # Domaines métier
+│ │ ├── manga/ # Domaine Manga
+│ │ │ ├── application/ # Cas d'utilisation
+│ │ │ │ ├── commands/ # Commands & CommandHandlers
+│ │ │ │ ├── queries/ # Queries & QueryHandlers
+│ │ │ │ └── store/ # Store Pinia du domaine
+│ │ │ ├── domain/ # Cœur métier
+│ │ │ │ ├── entities/ # Entités
+│ │ │ │ ├── value-objects/# Objets valeur
+│ │ │ │ └── services/ # Services métier
+│ │ │ ├── infrastructure/ # Adaptateurs
+│ │ │ │ ├── api/ # Client API
+│ │ │ │ └── repository/ # Implémentation repository
+│ │ │ └── presentation/ # Interface utilisateur
+│ │ │ ├── components/ # Composants spécifiques au domaine
+│ │ │ ├── composables/ # Composables spécifiques
+│ │ │ └── pages/ # Pages du domaine
+│ │ │
+│ │ ├── reader/ # Domaine Reader (même structure)
+│ │ └── scraping/ # Domaine Scraping (même structure)
+│ │
+│ └── router/ # Configuration du routeur
+│ └── index.js # Point d'entrée du routeur
+```
+
+## Contrat d'API
+Le contrat d'API complet est disponible dans le fichier [api-docs.json](mdc:public/api-docs.json). Ce fichier contient la documentation OpenAPI de toutes les routes disponibles et leurs schémas.
+
+## Règles d'Architecture
+
+### 1. Règles Générales
+- Chaque domaine est isolé et ne dépend que de lui-même et du domaine `shared`
+- Les dépendances externes sont gérées via les adaptateurs dans l'infrastructure
+- L'application est une SPA (Single Page Application) sans rechargement de page
+- Utilisation de Vue Router pour la navigation côté client
+- Gestion d'état avec Pinia organisée par domaine
+
+### 2. Couche Domain
+- Contient les entités et la logique métier pure
+- Ne dépend d'aucune bibliothèque externe sauf Vue.js
+- Les entités sont des classes JavaScript standard
+- Exemple :
+```javascript
+export class Manga {
+ constructor({ id, title, description = null }) {
+ this.id = id;
+ this.title = title;
+ this.description = description;
+ }
+
+ static create(data) {
+ return new Manga(data);
+ }
+}
+```
+
+### 3. Couche Application
+- Gère les cas d'utilisation via les stores Pinia
+- Coordonne les interactions entre l'UI et le domaine
+- Transforme les données du domaine pour l'UI
+- Exemple de store :
+```javascript
+export const useMangaStore = defineStore('manga', {
+ state: () => ({
+ mangas: [],
+ loading: false,
+ error: null
+ }),
+ actions: {
+ async fetchMangas() {
+ // Logique de chargement
+ }
+ }
+});
+```
+
+### 4. Couche Infrastructure
+- Gère la communication avec l'API
+- Isole les dépendances externes
+- Exemple d'API client :
+```javascript
+export class MangaApi {
+ static async fetchAll() {
+ const response = await fetch('/api/mangas');
+ return response.json();
+ }
+}
+```
+
+### 5. Couche Présentation
+- Composants Vue.js spécifiques au domaine
+- Utilise les composants UI partagés
+- Communique avec la couche application via les stores
+- Exemple de composant :
+```vue
+
+
+
+
+
+```
+
+## Bonnes Pratiques
+
+### 1. Composants
+- Utiliser la Composition API pour la logique
+- Séparer les composants UI génériques des composants métier
+- Favoriser les props et events pour la communication parent-enfant
+- Utiliser les stores pour la communication entre composants distants
+
+### 2. État
+- Un store Pinia par domaine
+- Actions asynchrones dans les stores
+- Getters pour les données dérivées
+- État local dans les composants quand possible
+
+### 3. Router
+- Routes organisées par domaine
+- Lazy loading des composants de page
+- Navigation programmatique via le router
+- Guards pour la protection des routes
+
+### 4. Style
+- Utilisation de Tailwind CSS
+- Classes utilitaires pour le style
+- Composants Headless UI pour l'accessibilité
+- Design system cohérent via les composants partagés
+
+## Validation
+Les règles d'architecture peuvent être validées par des outils comme :
+- ESLint pour les règles de code
+- Tests unitaires pour les composants
+- Tests d'intégration pour les stores
\ No newline at end of file
diff --git a/assets/vue/app/App.vue b/assets/vue/app/App.vue
new file mode 100644
index 0000000..5f37311
--- /dev/null
+++ b/assets/vue/app/App.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/vue/app/domain/manga/presentation/components/MangaGrid.vue b/assets/vue/app/domain/manga/presentation/components/MangaGrid.vue
new file mode 100644
index 0000000..35d6b2b
--- /dev/null
+++ b/assets/vue/app/domain/manga/presentation/components/MangaGrid.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/vue/app/domain/manga/presentation/pages/HomePage.vue b/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
new file mode 100644
index 0000000..6c58719
--- /dev/null
+++ b/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ Mise à jour en cours...
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/vue/app/index.js b/assets/vue/app/index.js
new file mode 100644
index 0000000..afcac44
--- /dev/null
+++ b/assets/vue/app/index.js
@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import routes from './router'
+import '../../styles/app.scss'
+
+// Création du router
+const router = createRouter({
+ history: createWebHistory('/vue/'),
+ routes
+})
+
+// Création du store
+const pinia = createPinia()
+
+// Création de l'application
+const app = createApp(App)
+
+// Installation des plugins
+app.use(router)
+app.use(pinia)
+
+// Montage de l'application
+app.mount('#vue-app')
\ No newline at end of file
diff --git a/assets/vue/app/router/index.js b/assets/vue/app/router/index.js
new file mode 100644
index 0000000..dba1a19
--- /dev/null
+++ b/assets/vue/app/router/index.js
@@ -0,0 +1,127 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
+
+// Placeholder component for new routes
+const PlaceholderComponent = {
+ props: {
+ title: {
+ type: String,
+ required: true
+ }
+ },
+ template: `
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/vue/app/shared/components/layout/Layout.vue b/assets/vue/app/shared/components/layout/Layout.vue
new file mode 100644
index 0000000..c4eb15d
--- /dev/null
+++ b/assets/vue/app/shared/components/layout/Layout.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/vue/app/shared/components/layout/SearchBar.vue b/assets/vue/app/shared/components/layout/SearchBar.vue
new file mode 100644
index 0000000..2a85531
--- /dev/null
+++ b/assets/vue/app/shared/components/layout/SearchBar.vue
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
+
+
+ Chargement...
+
+
+
+
+
+ Mangas existants
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/vue/app/shared/components/layout/Sidebar.vue b/assets/vue/app/shared/components/layout/Sidebar.vue
new file mode 100644
index 0000000..b6496ce
--- /dev/null
+++ b/assets/vue/app/shared/components/layout/Sidebar.vue
@@ -0,0 +1,155 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/vue/app/shared/components/ui/Toolbar.vue b/assets/vue/app/shared/components/ui/Toolbar.vue
new file mode 100644
index 0000000..339f00c
--- /dev/null
+++ b/assets/vue/app/shared/components/ui/Toolbar.vue
@@ -0,0 +1,47 @@
+
+