room-booking.html
Laura.OS › Bureau › RoomBook
La liste des salles de RoomBook sur un écran d'ordinateur rose : une carte de Genève avec des repères et la fiche de l'Espace du Rousseau

RoomBook

juin 2026

RoomBook est une application web de réservation de salles, réalisée en React dans le cadre du Bachelor Développement Web & Application au CREA. N'importe qui peut parcourir les salles sur une carte, filtrer par capacité ou par équipement et consulter les disponibilités d'une salle sans compte. Une fois connecté, on réserve un créneau depuis le calendrier, on suit ses réservations et on peut les annuler jusqu'à 24 h avant.

Côté administrateur, un tableau de bord montre les réservations de la semaine et du mois. On y crée des salles (l'adresse est géocodée automatiquement), on gère leurs photos, leurs horaires récurrents et leurs exceptions, et on confirme ou refuse les demandes, avec une notification en direct pour celles en attente.

Voir le site

La page d'une salle sur un écran d'ordinateur rose : description, équipements, galerie de photos et calendrier de disponibilités
La liste des salles : filtres, carte interactive de Genève et fiches des sallesLa page de l'Espace du Rousseau avec son calendrier de juin 2026 et le bouton « Réserver · 9h – 18h »

Programmation

Stack

React 19
Interface en composants, avec des hooks pour les filtres et les disponibilités
React Router 7
Routes publiques, protégées pour les utilisateurs et réservées aux administrateurs
Zustand
État global de la connexion et de la réservation en cours
Supabase
Base PostgreSQL, authentification et stockage des photos des salles
Leaflet
Carte interactive synchronisée avec la liste des salles
Recharts
Graphiques du tableau de bord, par semaine et par mois
Formik
Formulaires d'inscription, de profil et de création de salle
Tailwind CSS 4 + Vite
Styles et build
Vitest
Tests des composants avec Testing Library, rapport de couverture

De la salle à la réservation

  1. Salle crééeadministrateur
  2. Disponibilitéshoraires et exceptions
  3. Créneau choisicalendrier
  4. Demande envoyéeutilisateur
  5. Confirmationadministrateur