Case Study · 2026
Hotel Management Web Application
Hôtel Lumière — a dual-interface hotel management system built for my 4th-year PFA (Projet de Fin d'Année). Staff UI uses Django server-rendered templates; client-facing side is a Vue 3 SPA consuming a REST API. Features room booking, check-in/out, dynamic pricing, Stripe payments, reviews, task management, and broadcast notifications.
DjangoDjango REST FrameworkVue.js 3PostgreSQLChart.jsStripe APIRenderVercel
2Interfaces: staff dashboard + guest SPA
DRFREST API bridging MVT and SPA
StripePayments on the booking flow
93Lighthouse Performance (mobile, Oct 2026)
01
The challenge
- Problem Cover a hotel's whole reservation lifecycle — a server-rendered Django dashboard for staff plus a Vue 3 SPA for guests — so booking, pricing and account flows are correct on both sides.
- Constraints Solo work on a 4th-year PFA; the hybrid architecture meant maintaining two frontend codebases in one project; no budget.
- Hardest blockers Reservation dates rendering backwards, password fields accepting leading/trailing spaces, and dynamic pricing not firing when a room was selected in a new reservation.
- Root cause Timezone handling was implicit, inputs were not normalised before persistence, and the reservation form was not wired to the pricing API on room selection.
- Fix Explicit timezone handling in Django settings, strip() validation on credentials, and wiring the reservation form to a dynamic pricing endpoint that re-prices against live occupancy.
02
The approach
- Architecture Django + DRF REST API on PostgreSQL; the staff dashboard stayed server-rendered (MVT) for fast CRUD, while the guest booking flow became a Vue 3 SPA.
- API layer DRF serializers define the contract between the MVT dashboard and the SPA.
- Pricing A dynamic pricing endpoint recalculates room rates from real-time occupancy and is called as soon as a room is selected.
- Data integrity Timezone-aware date handling and normalised input (trimmed credentials) at the boundary.
- Reporting Chart.js dashboards for occupancy and revenue.
- Payments Stripe for booking payments.
- Delivery Backend deployed on Render, SPA on Vercel.
Impact
Completed and presented as my 4th-year PFA — one system covering the full reservation lifecycle: search, dynamic pricing, booking, payment and check-in/out.
03
Screenshots
04
What I'd do differently
- Reservation dates rendered backwards because timezone handling was implicit. I now fix an explicit timezone contract across storage, API and rendering before writing any date logic.
- Password fields accepted stray spaces — I validate and normalise every input at the boundary instead of trusting the client.
- Running a Django MVT dashboard and a Vue SPA in one project meant two frontends. Next time I'd pick one rendering strategy and expose a single API to both.