Atelier Noura
Un site responsive de studio d’architecture avec galeries et formulaire de consultation validé.
Conçu comme une démonstration fonctionnelle pouvant servir de base à une solution métier personnalisée.
Code privé · L’implémentation est présentée dans l’étude de cas et la démo.
Ce que j’ai construit
- Page d'accueil responsive avec mise en valeur des réalisations phares
- Répertoire de projets avec filtres typologiques (Résidentiel, Hôtellerie, Culturel)
- Quatre fiches d'études de cas détaillées avec contexte spatial et visuels
- Page de présentation du studio affirmant la philosophie et la démarche
- Page des prestations détaillant architecture, design d'intérieur et maîtrise d'œuvre
- Formulaire de contact qualifié avec sélection des paramètres de projet
- Validation et assainissement Zod côté client et serveur
- Schéma relationnel Prisma pour projets, prestations, demandes et audit
- Architecture d'administration protégée avec schéma d'authentification par session et suivi des demandes
- Sitemap automatisé, métadonnées sémantiques et en-têtes de sécurité
Une Agence d'Architecture a Besoin de Plus Qu'une Simple Galerie
Les agences d'architecture s'appuient souvent sur de simples galeries d'images ou des modèles génériques qui n'expliquent ni le contexte des projets, ni les matériaux, ni les prestations. Sans parcours structuré, les prospects peinent à appréhender l'expertise du studio et à formuler une demande adaptée.
Présentation Éditoriale & Parcours de Contact Qualifié
Atelier Noura associe des fiches projets éditoriales, la philosophie du studio et le détail des prestations à une expérience de prise de contact fluide et une interface administrative de gestion développées avec Next.js, Prisma ORM et Tailwind CSS.
03 / EXPÉRIENCE PRODUIT
Fonctionnalités & Parcours Utilisateur
Présentation Éditoriale des Réalisations & Filtres
Un répertoire de projets structuré organisant les réalisations avec filtrage par catégorie (Résidentiel, Hôtellerie, Culturel), métadonnées détaillées (lieu, année, typologie) et fiches narratives.
Permet aux visiteurs de découvrir les réalisations dans leur contexte, mettant en valeur la vision architecturale, les choix de conception et la photographie.
Répertoire des projets présentant les études de cas architecturales et métadonnées
Fiches Projets Détaillées & Storytelling Spatial
Des pages de détail dédiées associant visuels immersifs, descriptions de conception, localisation, année de réalisation et détails des matières.
Offre aux clients potentiels une vision approfondie de la manière dont le studio traite l'espace, la lumière et les matériaux.
Vue d'une étude de cas illustrant la circulation spatiale et les matières
Parcours de Demande de Projet Qualifié
Un formulaire de contact structuré recueillant la typologie de projet, la localisation, la surface estimée, le calendrier souhaité et le message client avec validation Zod.
Conçu pour inciter les porteurs de projet à préciser leurs besoins dès la prise de contact, facilitant ainsi l'étude préalable.
Interface de prise de contact conçue pour qualifier les besoins du projet
Architecture Administrative & Modèle de Données
Une architecture d'administration avec authentification par session, journal d'audit et cycle de vie des demandes (Nouveau, En revue, Contacté, Clôturé) implémentée dans le code.
Démontre la structure complète des routes et du schéma dans le code, tandis que la vitrine publique fonctionne de manière autonome en ligne.
Présentation du studio et architecture des routes d'administration
04 / ARCHITECTURE TECHNIQUE
Fondations Techniques & Architecture
Architecture Next.js App Router
Conçu avec Next.js App Router et TypeScript, séparant les pages publiques rendues côté serveur des composants interactifs et des routes protégées.
Modélisation Relationnelle Prisma
Schéma relationnel modélisant projets, galeries d'images ordonnées, services, demandes de contact avec statuts, sessions et journaux d'audit.
Validation Stricte des Données avec Zod
Toutes les soumissions de formulaires sont validées et assainies par schémas Zod côté client et serveur avant traitement.
Sécurisation des Sessions & Espaces Protégés
Jetons de session hachés, contrôle des rôles (Owner, Staff), en-têtes de sécurité et isolation des routes administratives.
05 / DÉCISIONS TECHNIQUES
Choix techniques et compromis
Direction Artistique Éditoriale sous Next.js
Mise en place d'un design épuré et éditorial avec une typographie soignée et une mise en page aérée via Tailwind CSS.
Les studios d'architecture et de design requièrent une identité visuelle proche de l'édition d'art plutôt qu'un modèle SaaS standardisé.
Prisma ORM pour les Demandes et le Contenu
Modélisation des demandes avec cycle de vie (NEW, IN_REVIEW, CONTACTED, CLOSED) et historique d'audit directement sous Prisma.
Traiter les prises de contact comme des entités relationnelles permet de conserver, qualifier et suivre chaque opportunité avec rigueur.
Découplage Espace Public & Administration
Séparation stricte des pages publiques haute performance et de l'interface d'administration sous session sécurisée.
Les visiteurs bénéficient d'un chargement rapide et optimisé sans que les modules administratifs n'alourdissent la consultation publique.
06 / ENSEIGNEMENTS & RETOUR D'EXPÉRIENCE
Ce que ce projet a démontré
Conception pour la Valorisation Spatiale et Matérielle
Ce projet a montré comment la mise en page web peut retranscrire la matérialité architecturale—textures, proportions et lumière—par le vide et la typographie.
Structuration des Prises de Contact en Processus Métier
La conception de ce parcours a confirmé qu'un formulaire est bien plus efficace lorsqu'il cadre les paramètres clés du projet dès l'amont plutôt qu'un simple champ libre.
Déploiement direct accessible en temps réel sur Vercel
L'implémentation est maintenue dans un dépôt privé ; l'architecture et les choix techniques sont documentés dans cette étude de cas.
Consultez les mises en page dans les captures et la démo.
Découvrez l’architecture et les choix de cette étude de cas.
Explorer l'Application en Direct
Accédez immédiatement au tableau de bord et aux fonctionnalités dans un environnement de test sécurisé.
🔒 Environnement en lecture seule · Données de test
APPLICATION WEB ÉDITORIALE
Intéressé par le design web éditorial et les parcours de contact qualifiés ?
Échangeons sur le développement d’applications web, le soin apporté aux interfaces responsives ou de futures opportunités d'ingénierie.
Vous envisagez un site vitrine ou une plateforme pour votre agence ? Discuter d'un projet de site web →