Client Work — Next.js + TypeScript Full-Stack
Numa Booking System
December 2025 – Present
A breakfast service tracking system for hotel guests ordering at Bonita Cafe. Staff can verify authorised rooms, check off arrivals, and view upcoming bookings to streamline operations and prevent unauthorised access. This full-stack application demonstrates expertise in both frontend UI development and backend API implementation, built with Next.js and TypeScript.
Clean breakfast tracking interface with card-based layout, visual status indicators, and intuitive check-off system.
Technical Implementation
Frontend Framework
- Next.js for full-stack development
- React with TypeScript
- Client-side state management
- Modern React patterns and hooks
- Responsive UI design
Backend & Database
- Next.js API routes
- RESTful API design
- Database integration
- Authentication middleware
- Data persistence layer
Features & Functionality
- Room authorisation verification
- Visual booking cards
- Interactive check-off system
- Tab-based date navigation
- Real-time status updates
Key Features
Room Verification
Verify which hotel rooms are authorised for breakfast service to prevent unauthorised access.
Interactive Check-off
Visual circle system for tracking individual guests as they arrive for breakfast service.
Multi-Day View
Tab navigation for today and tomorrow's bookings with automatic date management.
Menu Display
Shows menu selections and guest count for each booking to help kitchen preparation.
Visual Status
Colour-coded cards (green for complete, yellow for partial, gray for pending) for quick status recognition.
Time Tracking
Records and displays last service time for each booking to monitor flow.
Development Process
The Business Need
Numa hotel guests order breakfast at Bonita Cafe, but staff needed a way to verify authorised rooms and prevent duplicate or unauthorised service. The system also needed to help staff prepare for upcoming bookings and track which guests had already been served.
Digital Booking Tracker
Before: manual verification and tracking prone to errors.
After: digital system showing authorised rooms with visual check-off and menu information.
Impact: prevents unauthorised access, reduces service errors, helps kitchen preparation.
Full-Stack Development
This project showcases full-stack capabilities — building both the frontend React UI and the backend API routes with Next.js. Leveraged AI assistance to accelerate development while maintaining code quality and learning new patterns.
Technical Approach
Frontend: TypeScript interfaces, React state management, responsive card layout.
Backend: API routes, database queries, authentication, data validation.
AI Collaboration: used AI to accelerate development and learn best practices.
UI/UX Design Decisions
Designed the interface to be simple and intuitive for cafe staff during busy breakfast service. Used a card-based layout with visual indicators that don't require reading. The check-off circles provide satisfying visual feedback as guests are served.
Design Highlights
Visual Hierarchy: large room numbers, menu info, and clear status colours.
Touch-Friendly: large click targets (28px circles) work well on tablets.
Confirmation Dialog: prevents accidental early service of tomorrow's bookings.
Challenges & Solutions
State Management Across Components
Challenge: Managing bookings, service status, and date filtering efficiently.
Solution: React hooks (useState, useEffect) with proper dependency management and optimistic updates for responsive UI.
Data Aggregation Logic
Challenge: Grouping bookings by date, calculating service progress, handling edge cases.
Solution: Created helper functions for date grouping, service summary calculations, and status determination with clear business logic.
Preventing Service Errors
Challenge: Staff might accidentally serve tomorrow's breakfast early.
Solution: Implemented a confirmation dialog specifically for tomorrow's bookings with a clear warning message.
Authentication & Security
Challenge: Protecting booking data while keeping login simple for staff.
Solution: Password-based session storage with API middleware validation for secure yet user-friendly access.
Planned Enhancements
Production Rollout
Complete testing and deploy for daily staff use.
Service Analytics
Track peak times, popular menu items, and service patterns for better planning.
Hotel Integration
Sync with Numa's booking system for automatic updates and guest information.
Reporting
Generate daily and weekly reports for accounting and operational insights.