Skip to content

Latest commit

 

History

History
137 lines (104 loc) · 5.03 KB

README.md

File metadata and controls

137 lines (104 loc) · 5.03 KB

Mon Logement Etudiant - Client

Plateforme qui aide les etudiants a trouver un logement.

Stack

  • Next.js (App Router)
  • React 19
  • React-DSFR
  • React Query (TanStack)
  • nuqs (URL state)
  • React Hook Form + Zod
  • Leaflet
  • tss-react
  • Biome

Installation

pnpm install

Commandes

pnpm dev        # Dev local
pnpm build      # Build production
pnpm start      # Start production
pnpm lint       # Lint (Biome)

Architecture

src/
  app/
    layout.tsx                  # Root layout (providers : DSFR, i18n, React Query, nuqs)
    (public)/                   # Routes publiques (header + footer)
      trouver-un-logement-etudiant/   # Recherche logements
      preparer-sa-vie-etudiante/      # Contenu editorial
    (authenticated)/            # Routes authentifiees
      mon-espace/               # Espace etudiant
      bailleur/                 # Espace bailleur
    (widget)/                   # Widget iframe (layout minimal, pas de header/footer)
      widget/logements/         # Grille de residences embarquable
  components/
    find-student-accomodation/  # Composants recherche logement (cards, filtres, autocomplete)
    widget/                     # Composants specifiques widget
    map/                        # Carte Leaflet
    ui/                         # Composants generiques (skeleton, footer, header)
    shared/                     # Composants partages (badges)
  hooks/                        # Hooks (useAccomodations, useTerritories, useSearchCities)
  server-only/                  # Fonctions serveur (getAccommodations, getTerritories)
  schemas/                      # Schemas Zod (accommodations, territories)
  providers/                    # Providers React (TanStack Query)
  dsfr/                         # Config DSFR (provider, head, color scheme)
  utils/                        # Utilitaires
public/
  widget/
    embed.js                    # Script d'embed pour les partenaires
    test.html                   # Page de test du widget

Widget iframe

Widget embarquable qui affiche une grille de résidences etudiantes sur des sites partenaires.

Integration

Une seule ligne a fournir au partenaire :

<script src="https://monlogementetudiant.beta.gouv.fr/widget/embed.js" data-city="Paris"></script>

Le script crée automatiquement l'iframe et gère le redimensionnement dynamique.

Parametres

Attribut Description Exemple
data-city Ville (resolue en bbox automatiquement) data-city="Paris"
data-bbox Bounding box manuelle (west,south,east,north) data-bbox="2.2,48.8,2.5,48.9"
data-prix Budget max en euros data-prix="800"
data-crous CROUS uniquement data-crous="true"
data-colocation Colocation uniquement data-colocation="true"
data-accessible Logements PMR data-accessible="true"
data-filters Afficher/masquer les filtres (visible par defaut) data-filters="false"
data-page Page de pagination data-page="2"
data-target ID de l'element ou deposer l'iframe data-target="widget-container"

Si data-city ou data-bbox est fourni, le champ de recherche de localisation est masque.

Les filtres sont visibles par defaut. Pour les masquer, utiliser data-filters="false".

Comportement du widget

  • Pagination : 6 residences par page
  • Titre dynamique : "Trouver un logement a [ville]" avec contractions francaises (au Mans, aux Lilas, a Paris). Sans ville : "Trouver un logement etudiant"

Exemples

<!-- Paris, budget max 800€ -->
<script src="https://monlogementetudiant.beta.gouv.fr/widget/embed.js" data-city="Paris" data-prix="800"></script>

<!-- Lyon, CROUS uniquement, sans filtres -->
<script src="https://monlogementetudiant.beta.gouv.fr/widget/embed.js" data-city="Lyon" data-crous="true" data-filters="false"></script>

<!-- Bbox manuelle, colocation -->
<script src="https://monlogementetudiant.beta.gouv.fr/widget/embed.js" data-bbox="2.2,48.8,2.5,48.9" data-colocation="true"></script>

<!-- Iframe deposee dans un element specifique -->
<div id="mon-widget"></div>
<script src="https://monlogementetudiant.beta.gouv.fr/widget/embed.js" data-city="Toulouse" data-target="mon-widget"></script>

Test local

pnpm dev
open /tmp/widget-test.html bun   # ou copier public/widget/test.html en dehors du projet

Ouvrir le fichier test en file:// (pas via localhost) pour simuler un vrai contexte cross-origin.

Fonctionnement technique

  • Le widget est servi via la route group (widget) avec un layout minimal (pas de header/footer/nav/Matomo)
  • embed.js cree l'iframe et ecoute les postMessage pour ajuster la hauteur dynamiquement
  • Le body de l'iframe a overflow: hidden — pas de double scrollbar, le scroll est gere par la page parente
  • Les cards ouvrent la page detail sur le site principal dans un nouvel onglet
  • Les headers X-Frame-Options et Content-Security-Policy: frame-ancestors * sont configures dans next.config.mjs pour autoriser l'embedding

Maintainers