Lab - Frameworks coté Serveur

Application Web de gestion d’annonces immobilières

Ce TP a pour but de mettre en œuvre un projet complet de développement web full-stack avec les technologies modernes de l’écosystème TypeScript.
L’application visée est un site de gestion d’annonces immobilières, intégrant :

• un backend géré par Next.js (App Router) avec rendu côté serveur (SSR),
• un modèle de données géré par Prisma connecté à une base SQL,
• une authentification complète via NextAuth (email / mot de passe),
• et une interface utilisateur dynamique et réactive.

Ce TP servira de base à la poursuite du cours sur les Web Services et la présentation des données (data visualisation).

User Story

Un site de gestion d’annonces immobilières permet de publier, consulter et gérer des annonces selon les rôles utilisateurs :

Rôles et droits

• Visiteur (non connecté)
  • Peut consulter les annonces publiées.
  • Ne peut pas poser de question ni créer d’annonce.
• Utilisateur connecté (client)
  • Peut poser des questions sur une annonce.
  • Peut enregistrer des annonces comme “favoris”.
• Agent immobilier
  • Peut créer, modifier ou supprimer ses annonces.
  • Peut répondre aux questions posées par les utilisateurs.
  • Peut choisir de publier ou dépublier une annonce.

Contenu d’une annonce

Chaque annonce contient les informations suivantes :

• titre de l’annonce,
• type de bien (vente ou location),
• statut de publication (publiée ou non publiée),
• statut du bien (disponible, loué, vendu),
• description détaillée,
• prix (vente ou location),
• date de disponibilité,
• liste de photos (upload ou glisser-déposer),
• questions et réponses associées.

Objectifs pédagogiques

Ce TP vise à mobiliser l’ensemble des compétences suivantes :

• Modéliser et manipuler des données avec un ORM moderne (Prisma).
• Mettre en place une authentification sécurisée (NextAuth + PrismaAdapter).
• Construire une application Web SSR avec Next.js et TypeScript.
• Implémenter des fonctionnalités CRUD cohérentes avec les rôles utilisateurs.
• Soigner l’interface (design réactif, formulaires accessibles, UX correcte).

Organisation du projet

Structure recommandée

src/
├── app/
│   ├── annonces/
│   │   ├── page.tsx            → Liste des annonces
│   │   ├── [id]/page.tsx       → Détail d’une annonce
│   │   ├── new/page.tsx        → Création d’une annonce (agents)
│   │   └── edit/[id]/page.tsx  → Modification d’une annonce
│   ├── login/page.tsx          → Connexion
│   ├── register/page.tsx       → Inscription
│   └── layout.tsx, page.tsx    → Structure globale du site
├── lib/
│   └── prisma.ts               → Initialisation du client Prisma
├── prisma/
│   └── schema.prisma           → Modèle de données
└── public/                     → Images et assets

Étapes à suivre

Étape 1 — Modélisation et base de données

• Définir le modèle de données Prisma :
  • User, Annonce, Photo, Question, Session.
  • Ajouter un champ role dans User (USER, AGENT, ADMIN).
• Générer la base et effectuer les migrations avec Prisma.
• Créer un script seed.ts pour insérer des données de test (quelques utilisateurs et annonces).

Étape 2 — Authentification et rôles

• Configurer NextAuth avec un provider Credentials (email / mot de passe).
• Stocker les utilisateurs et les sessions dans la base via PrismaAdapter.
• Créer les pages :
  • /login (connexion),
  • /register (inscription avec hachage du mot de passe).
• Implémenter la logique de rôles :
  • USER → lecture / questions,
  • AGENT → gestion des annonces,
  • ADMIN → tout accès.

Étape 3 — CRUD des annonces

• Créer les pages :
  • /annonces → liste des annonces publiées,
  • /annonces/[id] → détail d’une annonce + affichage des questions,
  • /annonces/new → formulaire de création (réservé aux agents),
  • /annonces/edit/[id] → édition / suppression.
• Gérer la validation des formulaires côté serveur.
• Ajouter la possibilité de charger plusieurs images (drag & drop ou multi-upload).

Étape 4 — Interaction utilisateur

• Permettre aux utilisateurs connectés de poser une question sur une annonce.
• Permettre aux agents d’y répondre.
• Afficher les questions/réponses sous chaque annonce.
• Mettre en place la protection des routes selon le rôle (middleware ou garde).

Étape 5 — UX / UI

• Rendre l’application agréable à utiliser :
  • Navigation cohérente (header, footer, boutons de connexion).
  • Mise en page claire, formulaires accessibles.
  • Design responsive.

Étape 6 — Tests

Objectif

Valider la fiabilité et la cohérence de l’application en testant :

1. Les fonctionnalités métiers :
   • Création, lecture, mise à jour, suppression d’une annonce.
   • Authentification / déconnexion d’un utilisateur.
   • Restrictions d’accès selon le rôle.
2. Les interactions avec la base de données :
   • Vérifier que Prisma renvoie les bons résultats.
   • Tester les relations (annonce → agent, question → annonce).
3. Les routes et API Next.js :
   • Vérifier les statuts de réponse HTTP (200, 401, 403…).
   • S’assurer que les endpoints protégés renvoient une erreur pour les utilisateurs non autorisés.

Hébergement et rendu

Ce projet à réaliser en binome devra être hébergé sur la forge universitaire :
https://www-apps.univ-lehavre.fr/forge/

Dès le début du TP, envoyez un mail à
yoann.pigne@univ-lehavre.fr
avec pour objet :
[M2 IWOCS WEB] Projet Annonces Immo

Incluez :

• vos noms et prénoms,
• vos numéros d’étudiant,
• vos login,
• et l’URL du projet.

Ajoutez-moi en tant que developer sur la forge.

Évaluation

Le projet devra être rendu avant le 1er novembre 2025 (délai impératif).
Il servira de support à un oral technique le 4 novembre 2025.

Les aptitudes évaluées sont détaillées dans le tableau du silabus : </teaching/WebDev2/#evaluations-et-aptitudes>

Le travail est à réaliser en binôme.
Chaque membre doit pouvoir présenter l’ensemble du projet.

Pistes d’amélioration (optionnel)

• Implémenter un système de favoris par utilisateur.
• Ajouter une carte interactive (ex. Leaflet ou Mapbox) pour localiser les biens.
• Ajouter une visualisation (nombre d’annonces publiées, prix moyens, etc.).
• Ajouter une page “tableau de bord agent” avec ses statistiques.

Conseil : gardez une approche itérative. Commencez par la structure (modèles, routes, CRUD minimal), puis ajoutez progressivement l’authentification, les rôles et les fonctionnalités avancées. ```