MaiPOS

• 

  MaiPOS Landing Page

• 

  Table Layout

• 

  Kitchen Printer

• 

  Table Order System

• 

  Menu

• 

  Analytics

Inspiration

The inspiration for our project came from the restaurant's name itself because it means Wheat Mountain Cloud in English, which is what our entire app is themed around.

What it does

It is a Point of sale system developed for modern needs with key improvements over the model that Mai Shan Yun is using now, such as the ability to have a completely customizable table layout, have editable orders even after the order has been placed, the ability to have multiple separate checks at the same table, and the ability to have dynamic tickets print every time an edit to an order is made.

How we built it

We built the app using Next.js (React) with TypeScript, styled with Tailwind CSS, and developed entirely in VS Code. State management is handled with React Context to keep table status, orders, and tickets in sync across the app.

For design and planning, we relied heavily on Figma throughout the entire process. We used FigJam to choose our track, brainstorm ideas, conduct research, and plan features using sticky notes and visual grouping. We then created wireframes and high-fidelity UI designs in Figma, and leveraged Figma Dev Mode to translate designs directly into code by copying layout styles and components into our React app. Finally, we reused our design assets and components in FigSlides to create a cohesive presentation that matched our product!

Challenges we ran into

One of our biggest challenges was syncing real-time updates between tables, orders, and kitchen tickets without breaking the UI. Managing complex state across multiple views and generating dynamic layout thumbnails also required careful coordination. Lastly, adding flex in Figma DevMode layouts and replacing auto generated svgs with downloaded svg files ate up a lot of our time, but were worth it in the end.

Accomplishments that we're proud of

We’re proud of creating a fully themed, end-to-end POS experience in under 24 hours as a first time hackers. The interactive table grid, live-updating kitchen tickets, analytics dashboard, and layout-saving system all came together into a cohesive product tailored specifically to Mai Shan Yun.

What we learned

We learned how important user research is when designing real-world systems, especially for small businesses. This project also strengthened our skills in React state management, UI architecture, and translating real operational needs into thoughtful design solutions.

What's next for MaiPOS

Next, we’d like to add employee roles and permissions, deeper analytics insights, real printer integrations, and cloud-based persistence so restaurants can use the system long-term across multiple devices.

Built With

• github
• next.js
• react
• vscode