Back to all projects
Hospitality & Dining20243 Weeks Delivery
Stella Bistro
Elite dining, interactive digital menu discovery, and online table reservations.
Client EntityStella Bistro (Rooftop, Karachi)
My RoleFull-Stack Web Developer & UI Designer
Delivery Time3 Weeks Delivery
Tech StackNext.js 15, React + 4 more
01 // The Problem
Friction, Inefficiency & System Barriers
Guests struggled with slow, multi-megabyte PDF menus on mobile networks and dropped off before making dining plans. Third-party reservation apps charged high per-seat commissions while offering no brand cohesion.
02 // My Approach & Decisions
Architectural & UX Decisions
Architected a lightning-fast Next.js static site featuring client-side filtered menus with AVIF image optimization. Engineered a 1-tap automated WhatsApp reservation concierge that compiles party size, date, and seating preference directly into a structured message.
Application Previews & Workflow
03 // Technical Depth
Code Moment: Engineered Core
WhatsApp Concierge Payload Generator
typescript
| 1 | export function generateReservationUrl(data: ReservationInput): string { |
| 2 | const base = "https://wa.me/923208154950"; |
| 3 | const message = [ |
| 4 | "*Table Reservation Request — Stella Bistro*", |
| 5 | `• Name: ${data.guestName}`, |
| 6 | `• Party Size: ${data.partySize} Guests`, |
| 7 | `• Date & Time: ${data.date} @ ${data.time}`, |
| 8 | `• Seating: ${data.seatingPreference} (Rooftop Lounge)`, |
| 9 | data.specialRequest ? `• Notes: ${data.specialRequest}` : null |
| 10 | ].filter(Boolean).join("\n"); |
| 11 | |
| 12 | return `${base}?text=${encodeURIComponent(message)}`; |
| 13 | } |
Compiles validated reservation details directly into an encoded WhatsApp Business link, eliminating database overhead and intermediary SaaS fees.
04 // Measurable Results
Verified Production Benchmarks
1-ClickReservation Flow
98/100Mobile Performance
<0.8sMenu Load Time
-38%Bounce Rate Drop
Key Capabilities Delivered
- Responsive digital dining menu with categorized dishes, allergens, and pricing
- Direct WhatsApp automated booking and table reservation engine
- Interactive rooftop ambiance & event photo gallery with lazy prefetching
- Customer testimonials and verified Google reviews integration
Full Technology Ecosystem
Next.js 15ReactTailwind CSSWhatsApp Business APIStatic ISRAVIF Image Pipeline