Marston’s – Order & Pay Platform

A mobile-first web application enabling customers to browse menus, customise items, and place orders directly from their table. Built with Next.js and TypeScript, the platform supports real-world ordering scenarios in high-traffic pub environments.

Context

Developed for Marston’s as part of a small frontend team, this was a production application built and iterated on over an extended period. I worked alongside a senior frontend engineer, contributing to feature development across the core ordering journey.

My Role

• Frontend engineer in a two-person team, collaborating closely with a senior engineer
• Delivered features across the core ordering journey, including menu browsing, product customisation, and basket flows
• Owned analytics implementation using Google Tag Manager across key user interactions
• Implemented complex form validation and UI logic using react-hook-form and Yup
• Worked within an established architecture, contributing to component structure and maintainable styling using CSS Modules
• Collaborated closely with backend and product teams to deliver features end-to-end

Tech Stack

Next.js, TypeScript, React, Context API, react-hook-form, REST APIs

Key Features

• Menu browsing with dynamic availability and filtering
• Product customisation with complex form validation
• Basket management and checkout flow
• Search functionality with debounced input
• Analytics tracking across key user interactions using Google Tag Manager

Challenges & Decisions

Managing a multi-step ordering flow

The ordering journey involved multiple steps, including menu browsing, item customisation, basket management, and checkout. I worked on ensuring data remained consistent across these steps while keeping the experience intuitive for users on mobile devices.

This required careful handling of shared state across components to avoid inconsistencies during navigation and user interaction.

Handling complex form interactions

Product customisation required dynamic forms with validation rules. Using react-hook-form and schema validation, I helped ensure user inputs were handled reliably while keeping the UI responsive.

Performance and user experience

Given the mobile-first nature of the platform, performance and usability were key considerations. I worked within established patterns to ensure components remained efficient and responsive, particularly in form-heavy and basket-related flows.

Impact

Delivered a production-ready ordering platform used in live environments, supporting real customer interactions. The application provided a streamlined ordering experience while enabling ongoing feature development through a maintainable and scalable frontend.