Nomadica - Agence de Voyage

Projet Vue.js avec API RESTful Node.js/Express et base de données MySQL.

1. Front-end avec Vue.js (Vite)

• ✅ Vue 3 avec Composition API
• ✅ Vite comme build tool (plus moderne que Vue CLI)
• ✅ Architecture modulaire avec composants
• ✅ Single Page Application (SPA) sans rechargement

2. API RESTful avec Node.js & Express

• ✅ Backend Express.js avec routes RESTful
• ✅ Endpoints CRUD complets :
  • GET /api/forfaits - Liste des forfaits
  • POST /api/forfaits - Créer un forfait
  • PUT /api/forfaits/:id - Modifier un forfait
  • DELETE /api/forfaits/:id - Supprimer un forfait
  • GET /api/categories - Liste des catégories
• ✅ Controllers séparés pour la logique métier
• ✅ Middleware CORS configuré

3. Base de données MySQL

• ✅ Utilisation de Sequelize ORM
• ✅ Modèles définis (Forfait, Categorie)
• ✅ Relations entre tables (hasMany, belongsTo)
• ✅ Migrations automatiques avec sync()

4. Tailwind CSS (sans thème préconstruit)

• ✅ Configuration personnalisée dans tailwind.config.js
• ✅ Couleurs personnalisées
• ✅ Classes utilitaires uniquement (pas de composants préconstruits)
• ✅ Design responsive mobile-first
• ✅ Classes personnalisées via @layer components

5. Données et dépendances (important)

• ✅ Le front consomme désormais l'API backend (plus de fichiers JSON locaux)
• ✅ Fichiers supprimés: frontend/src/categories.json, frontend/src/forfaits.json
• ✅ CSS global importé via src/style.css (pas src/assets/css/tailwind.css)

6. Normes de développement

• ✅ Code propre et structuré
• ✅ Compositions sémantiques (header, nav, main, section, footer)
• ✅ Architecture MVC côté backend
• ✅ Props et emits pour la communication entre composants
• ✅ Responsive design (mobile, tablette, desktop)

🚀 Installation

Prérequis

• Node.js (v18+)
• MySQL (v8+)
• npm ou yarn

Installation du frontend

cd frontend
npm install
npm run dev

Installation du backend

cd backend
npm install
npm start

Base de données

1. Créer la base de données MySQL nomadica_db
2. Exécuter le fichier backend/database.sql pour créer les tables et insérer les données initiales

📁 Structure du projet

camille-breau-vue-js/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── CarteForfait.vue
│   │   │   ├── Catalogue.vue
│   │   │   ├── FormulaireForfait.vue
│   │   │   ├── HeroHeader.vue
│   │   │   └── MainFooter.vue
│   │   ├── views/
│   │   │   ├── Accueil.vue
│   │   │   ├── APropos.vue
│   │   │   ├── Forfaits.vue
│   │   │   └── Formulaire.vue
│   │   ├── router/
│   │   │   └── index.js
│   │   ├── App.vue
│   │   ├── main.js
│   │   └── style.css
│   ├── index.html
│   ├── package.json
│   ├── tailwind.config.js
│   └── vite.config.js
├── backend/
│   ├── app/
│   │   ├── config/
│   │   │   └── db.config.js
│   │   ├── controllers/
│   │   │   ├── forfait.controller.js
│   │   │   └── categorie.controller.js
│   │   ├── models/
│   │   │   ├── forfait.model.js
│   │   │   ├── categorie.model.js
│   │   │   └── index.js
│   │   └── routes/
│   │       ├── forfait.route.js
│   │       └── categorie.route.js
│   ├── server.js
│   ├── package.json
│   └── database.sql
└── README.md

🎨 Design

Couleurs de l'agence

• Primary: #79c7c5 (turquoise)
• Secondary: #2d5a4f (vert foncé)
• Dark: #123a2d (vert très foncé)
• Light: #e0f2f1 (turquoise clair)

🔧 Fonctionnalités

• ✅ Affichage de la liste des forfaits
• ✅ Création de nouveaux forfaits
• ✅ Modification de forfaits existants
• ✅ Suppression de forfaits
• ✅ Navigation sans rechargement
• ✅ Formulaire de création/modification avec validation
• ✅ Design responsive