Numa Booking System 🥐
A breakfast service tracking system for hotel guests ordering at Bonita Cafe. Staff can verify authorized rooms, check off arrivals, and view upcoming bookings to streamline operations and prevent unauthorized access. This full-stack application demonstrates expertise in both frontend UI development and backend API implementation, built with Next.js, TypeScript, and modern web technologies with AI assistance.
🛠️ 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 authorization verification
- Visual booking cards
- Interactive check-off system
- Tab-based date navigation
- Real-time status updates
📋 Key Features & Highlights
Room Verification
Verify which hotel rooms are authorized for breakfast service to prevent unauthorized 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
Color-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 & Problem Solving
🎯 The Business Need
Numa hotel guests order breakfast at Bonita Cafe, but staff needed a way to verify authorized rooms and prevent duplicate or unauthorized service. The system also needed to help staff prepare for upcoming bookings and track which guests had already been served.
🎯 Solution: Digital Booking Tracker
Before: Manual verification and tracking prone to errors
After: Digital system showing authorized rooms with visual check-off and menu information
Impact: Prevents unauthorized access, reduces service errors, helps kitchen preparation
⚙️ Full-Stack Development with AI
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. The project demonstrates ability to work across the entire stack and deliver complete solutions.
🎯 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 inspired by modern task management apps, 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 colors
Touch-Friendly: Large click targets for circles (28px) work well on tablets
Confirmation Dialog: Prevents accidental early service of tomorrow's bookings
💡 Technical 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 Errors
Challenge: Staff might accidentally serve tomorrow's breakfast early.
Solution: Implemented confirmation dialog specifically for tomorrow's bookings with 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.
🏆 Code Quality & Best Practices
📏 TypeScript Safety
Comprehensive type definitions for bookings, service data, and API responses ensure reliability.
🧩 Component Structure
Clean separation of concerns with focused functions for rendering cards, handling clicks, formatting dates.
♻️ Reusable Logic
Helper functions (formatTabLabel, getStatus, isTomorrow) keep code DRY and maintainable.
🎯 Business Logic Clarity
Clear naming and comments explain business rules like service types and date calculations.
🌟 Planned Enhancements
🚀 Production Rollout
Complete testing and deploy to production for daily staff use.
📊 Service Analytics
Track peak times, popular menu items, and service patterns for better planning.
🔔 Notifications
Alert staff about upcoming bookings or when many guests arrive simultaneously.
📱 Mobile App
Native mobile app for even better tablet and phone experience.
🏨 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.