Mai Shan Yun Challenge

Inspiration After winning a previous challenge at a datathon, I was inspired to tackle a real-world problem I experienced firsthand. During my time working as a host at a restaurant, I witnessed the daily challenges that restaurant staff face—managing multiple orders, coordinating between servers and kitchen staff, and tracking table availability. This experience led me to create the Mai Shan Yun POS, a comprehensive restaurant management system that addresses these pain points and improves both staff workflow and customer experience.

What it does What we created is a full featured Point of Sale (POS) and restaurant management system that streamlines every aspect of restaurant operations. The platform provides an interactive server dashboard with real-time table status, comprehensive order management for dine in/takeout/delivery, a kitchen display system with order queues, smart reservation management, menu management with bilingual support, analytics dashboard for revenue tracking, and role-based access for managers, servers, kitchen staff, and customers.

How we built it We built our system using Next.js 16 with React 19 and TypeScript for a type-safe, modern frontend. The application uses React Context API for global state management, Tailwind CSS and Radix UI for styling and accessible components, and LocalStorage for client-side data persistence. Key features include custom authentication with role-based routing, centralized order management, calendar integration for reservations, and an interactive SVG based floor plan visualization.

Challenges we ran into Managing real-time state synchronization across multiple views (server, kitchen, manager) was challenging, which we solved with a centralized context system. Implementing the complex order workflow with proper status tracking for individual items required careful state management. Building an interactive floor plan that accurately represents table layouts with real-time updates was technically demanding, and we had to balance feature development with code quality within the hackathon timeframe.

Accomplishments that we're proud of We successfully built a fully functional restaurant management system with all core features working end-to-end, from order creation to analytics reporting. We created separate, role optimized interfaces for each user type that feel natural and efficient, and implemented real-time updates where changes in one view immediately reflect in others without page refreshes. The system includes comprehensive analytics, maintains clean modular code with TypeScript throughout, and ensures accessibility using Radix UI primitives.

What we learned We deepened our understanding of React Context API and how to structure global state management for complex applications with multiple interconnected features. We learned to leverage TypeScript's type system effectively for better code quality and improved our ability to build reusable, composable UI components. Most importantly, we discovered the importance of understanding end user workflows and designing interfaces that match their mental models and daily tasks.

What's next? Short-term improvements include migrating to a proper backend API with database integration, implementing WebSocket connections for true real-time updates, and adding payment processing integration. Future enhancements will include inventory management, employee scheduling, customer loyalty programs, multi-location support, and advanced reporting features. Our vision is to make it the go to solution for restaurants of all sizes, combining powerful features with an intuitive interface.