Atelier Noura
A responsive architecture studio website with project galleries and a validated consultation inquiry workflow.
Built as a working showcase that can serve as a foundation for a customized business implementation.
Private repository · Implementation is documented in the case study and demo.
What I built
- Responsive studio homepage with architectural project highlights
- Categorized project index with typology filtering (Residential, Hospitality, Cultural)
- Four dedicated project case-study pages with spatial context and photography
- Studio presentation page communicating design philosophy and methodology
- Services page detailing architecture, interior design, and master planning scope
- Structured prospective-client inquiry form with multi-field project scoping
- Client and server-side Zod input validation and sanitization
- Relational Prisma schema for projects, services, inquiries, and audit records
- Protected administrative route architecture with session auth schema and inquiry status tracking
- Automated sitemap, semantic metadata, and security header configurations
A Refined Studio Needs More Than a Gallery
Architecture and interior design practices frequently rely on uncurated image galleries or generic templates that fail to communicate project context, materials, and services. Without structured presentation and dedicated inquiry pathways, prospective clients struggle to assess capabilities or initiate relevant project discussions.
Editorial Presentation & Structured Inquiry Experience
Atelier Noura unites editorial project case studies, studio philosophy, and structured service breakdowns with an intuitive consultation inquiry experience and an administrative inquiry-management foundation built with Next.js, Prisma ORM, and Tailwind CSS.
03 / PRODUCT EXPERIENCE
Core Capabilities & Workflow
Editorial Project Presentation & Filtering
A dedicated project showcase organizing architectural works with category filtering (Residential, Hospitality, Cultural), project metadata (location, year, scale), and narrative case-study pages.
Enables visitors to explore architectural works within context, highlighting design philosophy, structural decisions, and photography.
Project showcase index featuring categorized architectural case studies and metadata tags
Individual Case Study Pages & Spatial Context
Dedicated project detail pages pairing architectural photography with descriptive narrative, project location, year, and materiality insights.
Provides prospective clients with an in-depth view of how the studio resolves spatial challenges and material details.
Case study view highlighting architectural interior spatial flow and materials
Prospective-Client Inquiry Pathway
A structured inquiry form collecting project typology, project location, approximate scale, timeline expectations, and client brief details with client-side and server-side Zod validation.
Designed to guide prospective clients to provide actionable project specifications upfront, simplifying initial consultation assessment.
Inquiry flow designed to capture structured architectural requirements
Administrative Architecture & Schema
A structured administrative route architecture with session-based authentication, audit logging, and inquiry status lifecycles (New, In Review, Contacted, Closed) implemented in the codebase.
Demonstrates the complete full-stack route and schema design in the repository, while public portfolio presentation runs independently on the live deployment.
Studio presentation and administrative route architecture
04 / TECHNICAL ARCHITECTURE
Engineering Foundation & Architecture
Next.js App Router Architecture
Structured with Next.js App Router and TypeScript, separating public server-rendered presentation routes from interactive client elements and protected routes.
Prisma Relational Data Modeling
Relational schema modeling projects, ordered media galleries, services, inquiries with status enumeration, sessions, and audit logs.
Strict Input Validation with Zod
All inquiry submissions undergo strict schema validation and sanitization on both client and server boundaries before processing.
Session Security & Protected Boundaries
Hashed session tokens, role enumeration (Owner, Staff), security headers, and isolated administrative route middleware.
05 / ENGINEERING DECISIONS
Technical decisions & trade-offs
Editorial Aesthetics within Next.js Architecture
Implemented a minimalist editorial design system with bespoke typography and layout pacing using Tailwind CSS.
Architecture and design studios require a digital aesthetic that mirrors physical editorial publications rather than generic tech SaaS layouts.
Prisma ORM for Structured Inquiries & Content
Modeled structured inquiries with status lifecycles (NEW, IN_REVIEW, CONTACTED, CLOSED) and audit records directly in Prisma.
Treating prospective inquiries as relational database entities ensures incoming project leads are retained, trackable, and manageable over time.
Decoupled Public Presentation and Administration
Separated public high-performance presentation routes from authenticated session-based management views.
Public visitors enjoy fast, optimized static and server-rendered pages without administrative bundles impacting storefront performance.
06 / REFLECTIONS & LEARNINGS
What This Project Demonstrated
Designing for Spatial and Material Communication
Atelier Noura highlighted how digital layouts can translate physical architectural materiality—textures, proportion, and light—through generous whitespace and typography.
Structuring Inquiries as Business Workflows
Designing a dedicated inquiry structure reinforced that contact forms are more effective when they collect essential project parameters upfront rather than open-ended text alone.
Deployed interactive web application on Vercel
The implementation is maintained in a private repository; the architecture and engineering decisions are documented throughout this case study.
Inspect the layouts in the screenshots and demo.
Explore the architecture and decisions in this case study.
Explore the Application Live
Access the dashboard, operational modules, and interactive workflows in a safe, read-only demo environment.
🔒 Read-only environment · Synthetic data
WEB APPLICATION SHOWCASE
Interested in editorial web design and structured inquiry workflows?
Let's connect to discuss web application development, responsive interface craftsmanship, or potential engineering collaborations.
Planning a refined website for your studio or business? Discuss a business website project →