StudentConnect

Plateforme mettant en relation des étudiants autour de leurs compétences, projets et services : profils, réseau de contacts, demandes de service, messagerie et notifications.

Stack : Spring Boot (backend) · Angular 21 (frontend) · MySQL/PostgreSQL · JWT

Membres du groupe

• BAKOUAN Hermann
• BAMOGO Appolinaire
• COMPAORE Elisée Rodolphe
• KI Armand Judicael

Sommaire

• Architecture du projet
• Backend — Démarrage
• Frontend — Démarrage
• Rôles utilisateur
• Dépannage
• Parcours utilisateur

Architecture du projet

Le projet est séparé en deux dépôts :

Dépôt	Rôle
StudentConnect	API backend Spring Boot
studentConnect-frontend2026	Interface Angular

Le backend expose son API sous http://localhost:8080/api. Le frontend tourne en local sur http://localhost:4200 et consomme cette API.

---

Backend — Démarrage

Prérequis

Outil	Version recommandée	Vérifier avec
Java	JDK 17 ou plus	java -version
Maven	3.8+ (ou wrapper mvnw)	mvn -version
Base de données	MySQL ou PostgreSQL (selon application.properties)	—
Git	dernière version	git --version
Postman (optionnel)	pour tester les endpoints	—

1. Cloner le projet

git clone https://github.com/Armand413/StudentConnect.git
cd StudentConnect

2. Configurer la base de données

Crée une base de données vide :

CREATE DATABASE studentconnect;

Ouvre src/main/resources/application.properties et renseigne tes identifiants :

spring.datasource.url=jdbc:mysql://localhost:3306/studentconnect
spring.datasource.username=root
spring.datasource.password=ton_mot_de_passe
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

ddl-auto=update permet à Hibernate de créer/mettre à jour automatiquement les tables au démarrage.

3. Configurer le JWT

Dans le même fichier, ajoute (si ce n'est pas déjà présent) :

jwt.secret=une_cle_secrete_longue_et_aleatoire
jwt.expiration=86400000

4. Lancer l'application

# Avec Maven installé
mvn spring-boot:run

# Avec le wrapper (sans Maven installé)
./mvnw spring-boot:run

# Sur Windows
mvnw.cmd spring-boot:run

5. Vérifier que ça fonctionne

Le serveur démarre sur http://localhost:8080, toutes les routes API sont préfixées par http://localhost:8080/api.

Test rapide :

GET http://localhost:8080/api/skills

Réponse attendue :

{
  "success": true,
  "data": []
}

6. Tester avec authentification

1. Créer un compte : POST /api/auth/register
2. Se connecter pour récupérer un token JWT : POST /api/auth/login
3. Pour toutes les routes protégées, ajouter l'en-tête :

Authorization: Bearer <ton_token>

7. Connexion avec le frontend

Le frontend doit pointer vers http://localhost:8080/api. Vérifie :

• côté frontend : src/app/core/services/api.config.ts
• côté backend : que CORS est bien activé dans le package config

Structure du projet backend

src/main/java/com/studentconnect/backend
├── auth/          inscription, connexion, JWT
├── user/          profils étudiants
├── skill/         compétences et endorsements
├── project/       portfolio de projets
├── connection/    réseau entre étudiants
├── service/       offres/demandes de services
├── review/        avis
├── message/       messagerie
├── notification/  notifications
├── security/      filtres JWT
├── config/        CORS, configuration générale
├── exception/     gestion globale des erreurs
└── common/        ApiResponse, BaseEntity

---

Frontend — Démarrage

Frontend Angular 21 servant d'interface principale : partie publique pour découvrir la plateforme, et espace connecté pour gérer profil, compétences, projets, services et échanges.

Installation

git clone git@github.com:MannoBak/studentConnect-frontend2026.git
cd studentConnect-frontend2026
npm install
npm start

Puis ouvre http://localhost:4200.

Le frontend consomme l'API configurée dans src/app/core/services/api.config.ts.

Navigation publique

Sans connexion, layout public avec menu du haut :

• Découvrir : page d'accueil publique
• Fonctionnalités : page des services (/services)
• À propos : ancre interne sur la landing page
• Se connecter / S'inscrire

Flux recommandé : landing page → consulter Fonctionnalités → créer un compte ou se connecter.

Espace connecté

Après authentification, layout avec sidebar à gauche et barre de recherche en haut.

Menu	Description
Accueil	Tableau de bord
Mon profil	Consultation du profil
Compétences	Ajout et gestion des compétences
Projets	Présentation des projets
Services	Consultation et publication des services
Découvrir	Recherche d'étudiants
Mon réseau	Réseau de contacts
Demandes	Demandes reçues et envoyées
Messagerie	Échanges de messages
Notifications	Suivi des notifications

• La barre de recherche en haut est prévue pour la recherche globale.
• Déconnexion ferme la session et renvoie vers l'accueil public.
• Complète ton profil invite à enrichir le profil avant d'utiliser les fonctionnalités avancées.

Pages principales

Tableau de bord — résume l'activité (services publiés, demandes reçues, compétences validées, projets) et donne accès aux actions rapides : ajouter une compétence, présenter un projet, découvrir des étudiants.

Profil — consultation des informations publiques ; une page d'édition permet de mettre à jour les données personnelles et la disponibilité pour collaboration.

Compétences — ajout de compétences au profil ou proposition de nouvelles compétences.

Projets — publication et présentation de projets pour renforcer la crédibilité du profil.

Services — consulter les services publiés, filtrer par mot-clé/ville/catégorie, publier un nouveau service, demander un service disponible.

Découverte — rechercher des étudiants par nom, école, ville, niveau ou filière.

Réseau, demandes, messages, notifications — centralisent respectivement les relations établies, les requêtes envoyées/reçues, les conversations et les événements liés au compte.

Rôles utilisateur

Le projet distingue plusieurs rôles : ETUDIANT, CLIENT, ENSEIGNANT, ADMIN.

• Un utilisateur standard utilise surtout le dashboard, le profil, les compétences, les projets et le réseau.
• Un utilisateur qui publie des services peut gérer ses offres et répondre aux demandes.
• Un administrateur est redirigé vers le même dashboard, avec une logique de chargement spécifique.

Configuration API (frontend)

Si le backend n'est pas sur l'adresse attendue, adapte la base API dans src/app/core/services/api.config.ts.

Vérifications utiles :

• le backend doit être démarré avant de tester les pages connectées ;
• l'authentification doit être valide pour accéder à /app/... ;
• les routes publiques et privées utilisent des gardes Angular.

Points d'entrée du code frontend :

• src/app/app.routes.ts
• src/app/layouts/public-layout/public-layout.html
• src/app/layouts/app-shell/app-shell.html
• src/app/layouts/app-shell/app-shell.ts

---

Dépannage

Backend

Problème	Solution
Access denied for user	Vérifie le username/password dans application.properties
Port 8080 already in use	Ferme l'application qui occupe le port ou change server.port
Table doesn't exist	Vérifie spring.jpa.hibernate.ddl-auto=update
401 Unauthorized sur toutes les routes	Vérifie que le token JWT est bien envoyé dans l'en-tête Authorization
CORS error côté frontend	Vérifie la configuration CORS dans le package config

Frontend

• Page vide → vérifie l'état de connexion et la disponibilité du backend.
• Données qui ne chargent pas → contrôle src/app/core/services/api.config.ts et les réponses de l'API.
• Route qui ne fonctionne pas → vérifie src/app/app.routes.ts.

---

Parcours utilisateur

L'application est organisée en deux zones :

• une zone publique pour découvrir la plateforme et s'authentifier ;
• une zone privée pour gérer l'activité quotidienne.

Le parcours normal : se connecter → compléter son profil → publier ses compétences et projets → utiliser les services, la découverte et le réseau pour interagir avec les autres étudiants.