Application Fullstack : Angular 19, Node.js 22 et Java 21

🚀 Objectifs du projet

• ✅ Stack frontend / backend complète
• ✅ Compatibilité CI/CD et Docker
• ✅ Déploiement simple (Docker optionnel)
• ✅ Composants isolés et testables

---

👉 Looking for the English version? :

---

Composant	Description
Frontend	Angular 19 — SPA avec Routing, SSR, PWA, SEO
Backend Javascript (ESM)	Node.js 22 + Express — API REST avec données mockées ou BDD
Backend Javascript (CJS)	Variante CJS, même structure que la version ESM
Backend TypeScript	Node.js 22 + TypeScript — API typée avec données ou BDD
Backend Java Springboot	Java 21 + Spring Boot — API REST simple et moderne

---

🔧 Intégration Continue (CI)

Projet	Badge CI
Frontend Angular
Backend JavaScript (ESM)
Backend JavaScript (CJS)
Backend TypeScript
Backend Java Spring Boot

---

📦 Images Docker

Composant	Badge Docker
Backend JavaScript (ESM)
Backend JavaScript (CJS)
Backend TypeScript
Frontend Angular

---

📦 Stack technologique

---

📚 Table des matières

• Intégration Continue (CI)
• Images Docker
• Objectifs du projet
• Stack technologique
• Démo en ligne
• Structure du projet
• Configuration du frontend Angular
• Configuration des backends
• APIs exposées
• Démarrage rapide
• Déploiement avec Docker
• Author
• Documentation

---

🌐 Démo en ligne

🔗 Voir la démo Angular

---

📁 Structure du projet

🧩 Frontend

• frontend-angular
  Application Angular 19 (Incluant Routing, Lazy loading, SSR, PWA, SEO)

🚀 Backends

• backend-javascript ESM
  API Express.js en JavaScript (ESM) avec PostgreSQL, MySQL ou données mockées

• backend-javascript CJS
  API Express.js en JavaScript (commonJS) avec PostgreSQL, MySQL ou données mockées

• backend-typescript
  API Express.js en TypeScript avec PostgreSQL, MySQL ou données mockées

---

🔧 Configuration du frontend (Angular)

Dans frontend-angular/src/environments/environment.ts :

useDatabase: false,
backend: 'http://localhost:3000',

useDatabase	Mode
false	Données mockées côté frontend
true	Données réelles via le backend

---

🛠 Configuration des backends

Dans le fichier .env :

PORT=3000
DB_CLIENT=mock # mock | pg | mysql

DB_CLIENT	Source de données
mock	Données simulées
pg	PostgreSQL
mysql	MySQL

---

🔗 APIs exposées

Ressource	URL
Continents	http://localhost:3000/continents
Cities	http://localhost:3000/cities
Countries	http://localhost:3000/countries
Persons	http://localhost:3000/persons
Professions	http://localhost:3000/professions

---

⚙️ Démarrage rapide

▶️ Cloner le projet

git clone https://github.com/ganatan/angular-app.git
cd angular-app

▶️ Frontend Angular

cd frontend-angular
npm install
npm start
# http://localhost:4200

▶️ Backend JavaScript ESM

cd backend-javascript-esm
npm install
npm start
# http://localhost:3000

▶️ Backend JavaScript CJS

cd backend-javascript-cjs
npm install
npm start
# http://localhost:3000

▶️ Backend TypeScript

cd backend-typescript
npm install
npm start
# http://localhost:3000

---

🐳 Déploiement avec Docker

▶️ Prérequis

• Docker doit être installé sur votre machine : Installation Docker

▶️ Lancer le frontend Angular via Docker

docker pull ganatan/frontend-angular
docker run -d -p 4200:4200 ganatan/frontend-angular
# http://localhost:4200

▶️ Lancer le backend Javascript ESM via Docker

docker pull ganatan/backend-javascript-esm
docker run -d -p 8080:8080 ganatan/backend-javascript-esm
# http://localhost:8080

▶️ Lancer le backend Javascript CJS via Docker

docker pull ganatan/backend-javascript-cjs
docker run -d -p 8080:8080 ganatan/backend-javascript-cjs
# http://localhost:8080

▶️ Lancer le backend Typescript via Docker

docker pull ganatan/backend-typescript
docker run -d -p 8080:8080 ganatan/backend-typescript
# http://localhost:8080

---

👤 Author

• Danny – www.ganatan.com

---

📚 Documentation

• 🇫🇷 Tutoriels en français
• 🇬🇧 Tutorials in English