Logo
  1. Home
  2. Portfolio
  3. Lucha Tacos

© Joshua R. Lehman

Full Stack Developer

Crafted with passion • Built with modern web technologies

2025 • All rights reserved

LUCHA TACOS

Bring the dynamic and lively flavors of Mexico to your dining experience. A fast, mobile-friendly ordering experience focused on clear menu presentation and effortless checkout — designed for small food businesses that prioritize speed and conversions.

Mobile-first UXFast CheckoutAccessible
Lucha Tacos — Menu

PROJECT DETAILS

Lucha Tacos is a deliberately simple, performant ordering frontend built to minimize friction for customers. The design emphasizes legibility, quick menu scanning, and a no-nonsense checkout flow that works well on slow mobile connections.

Background

Built as a turnkey ordering frontend for small restaurants and pop-ups, the intention was to provide an experience that required minimal setup, was resilient on poor networks, and prioritized conversion on small screens.

Problem

Many small food businesses rely on clunky third-party ordering UIs that are slow, overcrowded, and confusing on mobile. The project sought to reduce friction in the ordering path and remove non-essential distractions that slow customers down.

Approach

Focus on progressive enhancement and server-side rendering so the critical ordering flow works immediately. Keep interactions small and predictable, surface only the options customers need, and use optimistic UI for cart actions to make the app feel snappy.

FOOD & E-COMMERCEORDERING EXPERIENCE
JAVASCRIPTTAILWINDCSSBABELWEBPACKGITCI/CD

What I built

  • Mobile-first order flow with clear, accessible UI for quick conversions.
  • Customizable menu system with modifiers and add-ons.
  • Server-side rendering for fast first paint and reliable SEO.
  • Lightweight client interactions and optimistic UI on cart actions.

Implementation highlights

  • Server-rendered menu pages for instant content and SEO.
  • Progressive enhancement so critical actions work without JS fallback.
  • Optimistic UI for add/remove cart interactions to keep flow snappy.
  • Simple, accessible form controls and semantic markup for screen readers.
  • Minimal client JS bundle—only what’s required for cart & checkout UX.

Design & Performance (expanded)

Prioritized semantic HTML, accessible controls, and minimal client-side JavaScript for the critical ordering path. The product uses progressive enhancement so essential functions work without JavaScript where possible.

Accessibility

  • Keyboard-navigable menus and cart controls.
  • Proper aria roles for menus, dialogs, and form fields.
  • High-contrast focus states and readable type scale on mobile.

Performance

  • SSR for initial content, with hydration for interactive bits.
  • Image optimization and lazy loading for non-critical screenshots.
  • Small runtime JS: critical path under 30–50KB gzipped in typical builds.

SCREENS

Lucha Tacos — Menu
Lucha Tacos — Cart & Checkout
Lucha Tacos — Item Detail

Testing, Outcomes & Next Steps

Testing & QA

  • Unit tests for critical cart logic and price calculations.
  • End-to-end tests covering order flow and payment integration.
  • Accessibility audits and keyboard navigation checks.

Outcomes

  • Lean interaction model led to faster add-to-cart and checkout flows in user tests.
  • Improved perceived performance through SSR and optimistic updates.
  • Accessible patterns reduced friction for keyboard and assistive tech users.

Future work

  • Integrate local pickup/delivery scheduling with dynamic fulfillment windows.
  • Add analytics-driven menu optimization (A/B testing for promotions).
  • Implement PWA features for offline resilience and fast repeat ordering.
CODELIVE