Project overview
Intended market
Guests of C-ZAN Guest House & Lounge and the hospitality staff responsible for reservations, accommodation presentation, promotional content and guest communication.
Engineering responsibility
Responsive hospitality UI/UX, reservation workflow, booking administration, media and promotional-content management, payment-flow integration, SMS receipt integration, location guidance and Vercel deployment.
Problem or opportunity
The business needs one digital channel that can present rooms and hospitality services professionally, convert visitor interest into structured reservations, keep promotional media current, and give staff a practical interface for managing bookings and website content.
Objectives
- Present accommodation and lounge services through a premium responsive experience
- Convert guest interest into structured room reservations
- Give staff a dedicated booking-management workflow
- Allow hero, gallery and events-billboard media to be managed without editing page code
- Support payment and receipt workflows after reservation submission
- Provide direct location guidance for guests
Challenges and constraints
- Hospitality content must remain easy for staff to update after deployment
- Booking, payment and communication flows must work coherently across mobile and desktop
- Media-heavy presentation must remain usable on responsive layouts
- Production deployment must preserve operational data and uploaded content reliably
Engineering approach
A Next.js App Router application was structured around a guest-facing experience and a separate administrative workspace. Public pages consume server-side API routes for bookings, gallery, billboard and settings data, while booking administration supports status changes, payment-state handling and operational follow-up. External integrations are separated into payment, messaging and location concerns.
Architecture
Architecture narrative
Next.js full-stack hospitality application with a public guest experience, admin workspace and route-handler APIs. The repository separates reservation, media, settings, payment and messaging concerns while deploying the application through Vercel.
frontend
Next.js 16.1.6, React 19.1, TypeScript and Tailwind CSS 4
backend
Next.js App Router route handlers for bookings, gallery, billboard, settings, uploads, payment and messaging workflows
infrastructure
Vercel deployment
services
Configurable hero media, gallery, billboard, reservation and booking-management services
integrations
Paystack payment flow, Twilio SMS receipt flow and Google Maps location guidance
Engineering decisions
Separate guest experience from administrative operations
Reason: Guests need a focused booking and discovery flow while staff need operational controls.
Engineering benefit: Clearer UX boundaries and simpler day-to-day management.
Make hero, gallery and billboard content configurable
Reason: Hospitality imagery and promotions change frequently.
Engineering benefit: Staff can refresh public-facing media without modifying page code.
Model booking status as an operational workflow
Reason: Reservations continue after the initial form submission.
Engineering benefit: Staff can move bookings through pending, confirmed, checked-in, checked-out or cancelled states.
Core capabilities
- Responsive hospitality website
- Cinematic hero image/video presentation
- Room and accommodation presentation
- Guest reservation submission
- Booking management dashboard
- Booking lifecycle/status management
- Gallery image/video management
- Events billboard management
- Configurable hero media
- Payment workflow integration
- SMS receipt integration
- Google Maps location guidance
- Administrative content management
- Vercel deployment
Challenge, response, outcome
Hospitality information and promotional media can become stale when every update requires code changes.
Response: The admin workspace manages hero media, gallery content, billboard slides and visibility settings.
Verified outcome: Operational staff can maintain key public content through the application interface.
Unstructured booking enquiries make reservation follow-up difficult.
Response: A dedicated booking form captures guest, stay, room and contact details and feeds an admin booking workflow.
Verified outcome: Reservations enter a trackable operational process instead of remaining informal enquiries.
Guests need clear next steps after reservation submission.
Response: The booking flow connects to payment handling, receipt communication and location guidance.
Verified outcome: The customer journey extends beyond discovery into reservation follow-up.
User experience
The public experience uses a cinematic hospitality presentation, room/service highlights, responsive media galleries, an events billboard, a structured booking form, direct location guidance and a post-reservation payment flow designed for mobile and desktop guests.
Technology architecture
Frontend
Next.js 16.1.6 · React 19.1 · TypeScript · Tailwind CSS 4
Deployment
Vercel
Server/API
Next.js App Router route handlers
Integrations
Paystack · Twilio SMS · Google Maps
Current status
Production
Engineering insights
For hospitality systems, the strongest portfolio value comes from connecting presentation, conversion and operations: visual discovery should lead directly into a structured reservation process, and staff should be able to maintain high-change content without developer intervention.
Request a similar build
Tell Frontier DevConsults about the outcomes and engineering requirements you need.
Request a Similar Build