SYSTEM DESIGN

Dragon Den Web App

Tools: React, JavaScript, CSS, Git/GitHub

Challenge

The challenge was designing a restaurant ordering experience that could scale beyond its initial version without becoming harder to understand or use.

Rather than treating it as a set of individual pages, I needed to structure it as a system — one that could support growing menus, evolving features, and different user paths while maintaining clarity.

The difficulty wasn’t visual — it was ensuring that as the product expanded, the experience would remain intuitive without relying on explanation.

This project reflects my approach to design — focusing on clarity, structure, and systems that hold up beyond the first version.

Goal

The goal of this project was to design and develop a production-ready restaurant web application that demonstrates UX-led systems thinking, clear component ownership and thoughtful tradeoffs between design intent and techical constraints.

Rather than optimizing for visual polish alone, the focus was on creating a scalable maintainable front-end system that could realistically support user interaction , state changes and deploy in a real environment.

Role

I acted as the sole product developer and front-end developer, owning the project end-to-end.

My responses include:

UX and interaction design.
Component and layout system design.
Front-end implementation in React.
State and feedback handling.
Accessibility considerations.
Deployment and production debugging.

This role required making design and engineering decisions holistically, treating UX, implementation and system reliability as interconnected concerns rather than separate phases.

Impact

⁰¹ System-First Architecture

Established a component-based React foundation that supports reuse, interaction, and future expansion beyond a static website.

⁰² Production-Grade Interactions

Implemented accessible, state-driven UI patterns including cart logic, responsive navigation, and a fully keyboard-accessible reservation modal.

⁰³ Responsiveness as Core Behaviour

Treated mobile and desktop as equal citizens through a full responsive audit, resolving layout and interaction issues systematically.

⁰⁴ Scalable Product Vision

Defined a clear path from customer-facing web experience to a planned React Native companion app for internal staff workflows.

Lessons Learned & Next Steps

This project reinforced the importance of treating front-end work as a systems design rather than isolated screens.

Key lessons included:

Designing components with clear boundaries reduces complexity and future rework.
UX decisions directly affect technical reliability and maintainability.
Real production issues often emerge only after deployment, requiring real adaptability and debugging discipline.
Clear user feedback is critical for trust in interactive systems.

Future iterations of Dragon Den would extend the system beyond a customer-facing experience into operational workflow.

React Native staff application for managing orders and tickets, allowing kitchen or staff users to track preparation status, update order progress and handle operational flow in real time.
Backend integration to support persistent data, authentication and role-based access.
Expanded data modeling to support larger menus and more complex ordering scenarios.
Performance and accessibility optimizations as the system scales across platforms.

This evolution positions Dragon Den not just as a restaurant website, but as a multi-surface product system, demonstrating how UX , front-end architecture and operational needs intersect across web and mobile contexts.