Overview
A hands-on full-stack project — building a real online ordering and POS platform from scratch for small local restaurants.
I started BiteBuddy after seeing restaurant owners in Vancouver struggle with scattered systems — phone orders, Instagram DMs, and outdated websites that didn’t talk to each other. I wanted to bridge that gap by building a single, user-friendly tool that connects the web, tablet POS, and Bluetooth printer into one seamless experience.
- Role: Full-stack Developer & UX/UI Designer (2-person team)
- Duration: February 2025 – Ongoing
- Stack: React / React Native / Tailwind CSS / WordPress REST API / Firebase / Stripe
- Live Demo
Mobile-friendly web ordering interface.
The Challenge
Most small restaurants relied on multiple tools that didn't integrate — leading to missed orders and manual errors. My challenge was to design a product that non-technical owners could actually enjoy using, while still delivering the reliability and scalability of a modern web app.
The idea was to make digital ordering feel as natural as taking a phone call — simple for owners, intuitive for customers.
Empowering local restaurants with simple digital ordering and better customer service.
Design & Development Approach
- Designed thumb-friendly layouts and fast repeat-order flows
- Focused on visual clarity and consistent spacing inspired by franchise-level UIs
- Streamlined checkout using Stripe's trusted payment interface
- Built tablet UI for live orders and printing feedback
- Used real-world restaurant feedback to refine navigation and state toggles
Designed with minimalism in mind while keeping the experience intuitive and accessible for everyone.
Tech & Architecture
The early version of BiteBuddy was built on WooCommerce, but it quickly hit limitations in flexibility and real-time updates. I decided to move toward a more scalable, headless structure — separating content and logic to give restaurants faster, more reliable control over their data. Migrating to a custom Stripe integration and building a React-based dashboard for live order tracking became a key technical challenge that reshaped the product’s architecture.
This transition taught me how backend constraints directly affect user experience. By combining WordPress APIs, React, and Firebase, I built a system that keeps web, tablet, and printer devices in sync — ensuring that every order is processed instantly and accurately.
| Layer | Tech | Notes |
|---|---|---|
| Frontend | React + Tailwind CSS | Responsive web ordering interface |
| Backend | WordPress (Headless CMS) | Custom REST API with JWT auth |
| Management App | React Native + Firebase (FCM) | Tablet POS + live order updates |
| Payments | Stripe API | Custom integration replacing WooCommerce checkout |
| Hardware | ESC/POS Printer | Multilingual receipt printing |
Early order flow before switching from data polling to Firebase Cloud Messaging.
Key Features
Each feature was designed to solve real operational pain points — improving order accuracy, staff workflow, and data security without unnecessary complexity.
- Real-time Menu Management — Instantly update items, modifiers, and availability across all connected devices.
- Admin Dashboard — Centralized view for live orders, refunds, printer logs, and store activity monitoring.
- Smart Recovery & Auto-Printing System — Automatically reprints lost tickets and ensures reliable receipt output, even during brief disconnections.
- Secure Data Encryption — Protects customer information with encryption and decryption standards compliant with Canadian data protection laws.
Demo & Gallery
Demo video
Results & Learnings
- Launched with pilot restaurants across Metro Vancouver, streamlining real pickup operations.
- Reduced phone orders and improved accuracy through real-time dashboards and auto-print feedback.
- Learned how to translate everyday restaurant workflows into scalable, intuitive UI patterns.
Next Steps: Continue refining the UI/UX, optimizing performance, and enhancing security to ensure long-term stability and maintainability.
Takeaway
Building BiteBuddy wasn't just about shipping features — it was about learning to design for people who don't live in tech. Working with real restaurant owners taught me that good UX starts with empathy, not just clean code.
As a developer, I learned to listen first, simplify wherever possible, and build systems that empower non-technical users to feel confident using technology.