Swedish Hospitality Chains & Delivery Networks (Ali Baba, Pronto, Snabbfood)

Snabbfood Sweden — Multi-Chain Restaurant POS & Digital Signage

Fragmented menu and pricing synchronization across Swedish restaurant branches, combined with crippling 30%+ third-party delivery commissions. Engineered an integrated ecosystem of mobile ordering apps, live driver tracking, digital TV menu displays, and Nordic payment integrations.

Vue 3Quasar 2Capacitor 7Laravel 12KlarnaSwishMySQLPWA
Snabbfood Sweden — Multi-Chain Restaurant POS & Digital Signage

Operational Benchmarks

Measurable impact achieved in production.

50,000+

Monthly Orders

4 سلاسل

Active Swedish Chains

< 1s

TV Sync Latency

30%+

Commission Savings

Operational Challenges

Critical bottlenecks prior to system deployment

  • Instantaneous menu and price sync across digital in-restaurant TV displays.
  • Native integrations with Nordic payment rails (Klarna, Swish, Revolut, Stripe).
  • Hybrid mobile app supporting voice note meal customizations.
  • Multi-tenant backend managing multiple separate restaurant brands centrally.

Operational Transformation

Direct before vs after production benchmarks

Delivery Commissions

BeforeLosing 30%+ to 3rd party delivery portals
NowDirect zero-commission customer orders

TV Menu Updates

BeforeCostly paper printing and menu drift
NowInstant multi-screen sync from dashboard

Architectural Decisions & Trade-offs

Engineered design choices, technical rationale, and evaluated trade-offs

01

Adopted Vue 3 + Quasar + Capacitor 7 for Mobile

Architectural Rationale:

Enabled unified single-codebase deployment across iOS, Android, Web, and Smart TV displays.

Calculated Trade-off:Slightly higher frame latency on very old mobile hardware compared to pure native Swift/Kotlin.
02

Engineered Digital Signage PWA for Branch TVs

Architectural Rationale:

Runs effortlessly on any smart TV or browser stick without expensive proprietary hardware.

Calculated Trade-off:Requires robust offline caching and auto-reconnect fallback logic.

Data Flow & Integration Pipeline

Live visual pipeline demonstrating real-time data exchange across services, AI engines, and databases.

B2C Web Portal
Global GDS APIs
WhatsApp Bot
Central Core API
Vector DB (RAG)
Background Tasks
Relational Database
Live Subsystems & Interfaces

Production Interfaces & Modules

Comprehensive architectural walkthrough of live dashboards, portals, and background engines.

Next.js / Tailwind CSS / Framer Motion
JunkBox Smashburgers - Brand Storefront Hero
Inspect Full Resolution

JunkBox Smashburgers - Brand Storefront Hero

White-label Restaurant Web

Dark-themed dedicated brand landing page for JunkBox smashburger restaurant featuring high-contrast hero imagery and online order CTA.

PWA / React / Tailwind CSS
Pizzeria Pronto - Dedicated White-Label Mobile PWA
Inspect Full Resolution

Pizzeria Pronto - Dedicated White-Label Mobile PWA

White-label Restaurant Mobile

Dedicated white-label mobile PWA home view for Pizzeria Pronto with delivery location header, horizontal pizza categories, and bestseller feed.

Next.js / React / Tailwind CSS
Pizzeria Pronto - Dedicated Web Storefront
Inspect Full Resolution

Pizzeria Pronto - Dedicated Web Storefront

White-label Restaurant Web

Dedicated web storefront hero for Pizzeria Pronto featuring dine-in/takeout selectors, city dropdown, and live ordering CTA.

Next.js / React / Tailwind CSS
SnabbFood Marketplace - Web Hero & Address Search
Inspect Full Resolution

SnabbFood Marketplace - Web Hero & Address Search

Marketplace Web Platform

Desktop landing hero section for the multi-restaurant delivery platform featuring automated location lookup, partner onboarding CTA, language switcher, and cart drawer trigger.

Next.js / React / Tailwind CSS
SnabbFood Marketplace - Cuisine Categories & Popular Restaurants
Inspect Full Resolution

SnabbFood Marketplace - Cuisine Categories & Popular Restaurants

Marketplace Web Platform

Interactive horizontal cuisine carousel (Burgers, Groceries, Salads, Charcoal Grill, Sushi, Vegetarian, Pasta, Kebab) and nearby trending restaurant cards with estimated delivery times.

Next.js / React / Tailwind CSS
Restaurant Storefront Header (Pizzeria Milano)
Inspect Full Resolution

Restaurant Storefront Header (Pizzeria Milano)

Marketplace Web Platform

Restaurant profile header displaying branded cover, operational ratings, opening hours, fulfillment mode switchers (Delivery, Pickup, Takeout), and promotional campaign banner.

Next.js / React / Tailwind CSS
Restaurant Menu Grid & Food Item Cards
Inspect Full Resolution

Restaurant Menu Grid & Food Item Cards

Marketplace Web Platform

Category-filtered menu grid (Pizza Klass 1) showing dish cards with high-res food photography, pricing in SEK, dish ingredient summaries, and instant add-to-cart buttons.

Next.js / React / Tailwind CSS
Product Customization Modal & Modifiers
Inspect Full Resolution

Product Customization Modal & Modifiers

Marketplace Web Platform

Product configuration modal for pizza items with size selection (Standard, Family, Kids), priced ingredient add-ons, loyalty reward point indicators, and quantity counters.

Next.js / NextAuth.js / OAuth
Customer Authentication & Login Portal
Inspect Full Resolution

Customer Authentication & Login Portal

Authentication & User Management

Clean customer authentication view with phone/email login, password visibility toggle, guest checkout bypass, and Google OAuth SSO integration.

Next.js / React Hook Form / Zod
Merchant Onboarding - Business & Banking Information
Inspect Full Resolution

Merchant Onboarding - Business & Banking Information

Merchant Onboarding & B2B

Merchant onboarding form capturing legal representative name, corporate registration number (Org.nr), bankgiro payout details, and restaurant address coordinates.

Next.js / React Hook Form / Tailwind CSS
Merchant Onboarding - Services & Delivery Fee Tiers
Inspect Full Resolution

Merchant Onboarding - Services & Delivery Fee Tiers

Merchant Onboarding & B2B

Partner configuration for requested digital solutions (dedicated website, mobile apps, table reservations) and multi-distance delivery fee pricing matrix.

Next.js / React Hook Form / Tailwind CSS
Merchant Onboarding - Weekly Operating Hours Schedule
Inspect Full Resolution

Merchant Onboarding - Weekly Operating Hours Schedule

Merchant Onboarding & B2B

Weekly operational schedule setup allowing merchants to define individual opening/closing time ranges for each day (Monday–Sunday) and custom remarks.

Next.js / Tailwind CSS / UI Design
SnabbFood Mobile Apps Download Banner
Inspect Full Resolution

SnabbFood Mobile Apps Download Banner

Marketing & Landing Web

Promotional banner highlighting the mobile application ecosystem with official App Store and Google Play badges and responsive 3D device preview.

Android / React Native / Google Play
Google Play Store Official App Listing
Inspect Full Resolution

Google Play Store Official App Listing

Mobile App Distribution

Published Google Play Store listing for SnabbFood - Matleverans showing active install metrics (500+ downloads), promotional graphics, and marketing copy.

iOS / React Native / App Store
Apple App Store Official Product Page
Inspect Full Resolution

Apple App Store Official Product Page

Mobile App Distribution

Official Apple App Store listing for SnabbFood (Food & Drink category, 4.3 user rating, Swedish/English localization, and iPhone UI screenshots).

Next.js / React / Tailwind CSS
Category Filtered Restaurant Directory (Pasta)
Inspect Full Resolution

Category Filtered Restaurant Directory (Pasta)

Marketplace Web Platform

Marketplace store directory filtered by 'Pasta' category, presenting live restaurant availability tags, preparation speed estimates, and customer ratings.

Next.js / React / Tailwind CSS
Category Filtered Restaurant Directory (Pizza)
Inspect Full Resolution

Category Filtered Restaurant Directory (Pizza)

Marketplace Web Platform

Restaurant discovery directory showing 28 matching stores for 'Pizza' category with brand badges, delivery times, and rating badges.

Next.js / React / Tailwind CSS
Multi-Brand Local Restaurant Directory Grid
Inspect Full Resolution

Multi-Brand Local Restaurant Directory Grid

Marketplace Web Platform

Comprehensive marketplace store grid featuring local partner eateries (BBQ-Kökets, Bella Notte, Pizzeria Ali Baba, Åkes Grill, Chicken Wow, Pronto).

Next.js / React / Tailwind CSS
Store Availability States & Closed Badging
Inspect Full Resolution

Store Availability States & Closed Badging

Marketplace Web Platform

Store discovery grid demonstrating real-time restaurant operational state handling with 'För närvarande inte tillgänglig' (Currently Unavailable) status badges.

Next.js / Tailwind CSS / Framer Motion
Venedig Kolgrill - Dedicated Restaurant Landing Hero
Inspect Full Resolution

Venedig Kolgrill - Dedicated Restaurant Landing Hero

White-label Restaurant Web

Full-width hero section for the custom white-label website of Venedig Kolgrill with direct action buttons for Menu, Lunch specials, and Online Ordering.

Next.js / React / Swiper.js
Venedig Kolgrill - Daily Lunch Special Showcase
Inspect Full Resolution

Venedig Kolgrill - Daily Lunch Special Showcase

White-label Restaurant Web

Daily lunch special feature banner (Dagens Lunch - 139 kr) detailing inclusive salad buffet, soup, drink, and bread with an interactive dish carousel.

Next.js / React / Swiper.js
Venedig Kolgrill - Signature Dishes Carousel
Inspect Full Resolution

Venedig Kolgrill - Signature Dishes Carousel

White-label Restaurant Web

Featured charcoal-grill favorites carousel showcasing Super Mix skewers, Lamb racks, and Lamb skewers with high-quality photography and prices.

Next.js / React / Tailwind CSS
Venedig Kolgrill - Interactive Menu & Cart Sidebar
Inspect Full Resolution

Venedig Kolgrill - Interactive Menu & Cart Sidebar

White-label Restaurant Web

Complete online ordering interface with cuisine category navigation tabs (Kolgrill, Pide, Meze, Shawarma) and sticky real-time cart sidebar with pickup toggle.

Next.js / React / Tailwind CSS
Venedig Kolgrill - Platter Customization Modal
Inspect Full Resolution

Venedig Kolgrill - Platter Customization Modal

White-label Restaurant Web

Modifier modal for grill platter meals allowing side selection (Bulgur, Rice, French Fries) and individual ingredient checklist toggles (Bread, Grilled Tomato, Onion, Paprika).

Next.js / NextAuth.js / Tailwind CSS
Venedig Kolgrill - Branded Customer Login View
Inspect Full Resolution

Venedig Kolgrill - Branded Customer Login View

Authentication & User Management

Custom branded login card for Venedig Kolgrill customers supporting email/mobile authentication and account creation.

Next.js / Tailwind CSS
Venedig Kolgrill - About Us & Restaurant Coordinates
Inspect Full Resolution

Venedig Kolgrill - About Us & Restaurant Coordinates

White-label Restaurant Web

Branded 'About Us' section communicating the restaurant story, service vision, address in Borlänge, and regular operational schedule.

Next.js / React / CSS Grid
Venedig Kolgrill - Food Photography Gallery
Inspect Full Resolution

Venedig Kolgrill - Food Photography Gallery

White-label Restaurant Web

High-resolution photography gallery showing authentic restaurant dishes, charcoal grilled skewers, salads, and traditional platters.

PWA / React / Google Maps API
SnabbFood Mobile PWA - Map Address Selector
Inspect Full Resolution

SnabbFood Mobile PWA - Map Address Selector

Customer Mobile PWA

Interactive map-based delivery location picker with reverse-geocoded address confirmation button ('Jan Ers gata, Borlänge').

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Home Screen & Promo Feed
Inspect Full Resolution

SnabbFood Mobile PWA - Home Screen & Promo Feed

Customer Mobile PWA

Mobile home view featuring location status header, voice search, quick filter pills, coupon highlight banner (START50), and bottom app navigation.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Nearby Restaurants Feed
Inspect Full Resolution

SnabbFood Mobile PWA - Nearby Restaurants Feed

Customer Mobile PWA

Mobile restaurant discovery cards highlighting distance (0.03 km), preparation time (30-50 min), pickup badge ('Endast avhämtning'), and 50 kr discount badges.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Offers & Promotions Tab
Inspect Full Resolution

SnabbFood Mobile PWA - Offers & Promotions Tab

Customer Mobile PWA

Dedicated deals section ('Erbjudanden') displaying all active restaurant-specific discount promotions and voucher offers.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Category Filtered Stores (Pizza)
Inspect Full Resolution

SnabbFood Mobile PWA - Category Filtered Stores (Pizza)

Customer Mobile PWA

Filtered category store list for Pizza with coupon requirement indicators (START50 - Minsta utgift: 180 kr) and 'First Delivery Free' tags.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Store Profile (Sham Grillen)
Inspect Full Resolution

SnabbFood Mobile PWA - Store Profile (Sham Grillen)

Customer Mobile PWA

Mobile restaurant storefront view with in-store search bar, delivery/info tabs, distance calculations, and coupon validity alerts.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Menu Category List (Pronto)
Inspect Full Resolution

SnabbFood Mobile PWA - Menu Category List (Pronto)

Customer Mobile PWA

Mobile food menu category view (Pizzor Klass 1) showing Margherita, Bussola, Capricciosa with ingredients, pricing, and fast add button.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Item Modifier Bottom Sheet
Inspect Full Resolution

SnabbFood Mobile PWA - Item Modifier Bottom Sheet

Customer Mobile PWA

Mobile bottom sheet for meal customization with multi-tier size options (Standard, Family, Double crust, Kids), gluten-free crust add-ons, and mandatory sauce selection.

PWA / React / Tailwind CSS
SnabbFood Mobile PWA - Free Delivery Filter Results
Inspect Full Resolution

SnabbFood Mobile PWA - Free Delivery Filter Results

Customer Mobile PWA

Filtered restaurant list with active 'Free delivery!' filter pill enabled, highlighting venues offering 0 kr delivery.

PWA / React / Tailwind CSS
SnabbFood Multi-Restaurant Customer PWA
Inspect Full Resolution

SnabbFood Multi-Restaurant Customer PWA

Customer Mobile PWA

High-fidelity mobile web application overview with dynamic restaurant promotional banners, cuisine cards, and responsive navigation.

Next.js / React / Tailwind CSS
SnabbFood Multi-Restaurant Web Marketplace
Inspect Full Resolution

SnabbFood Multi-Restaurant Web Marketplace

Marketplace Web Platform

Desktop web marketplace homepage with Swedish localization ('PIZZA. LEVERERAT.'), address geocoding search, and partner registration entry points.

React / PWA / Electron / CSS Grid
In-Store TV Digital Signage Menu Board PWA
Inspect Full Resolution

In-Store TV Digital Signage Menu Board PWA

Digital Signage & In-Store Tech

Full-screen high-contrast TV menu board application for in-restaurant television displays with multi-column pizza categories (Grupp Pizzor 1-4, Oxfile Pizzor), size pricing matrix (Barn, Pan S/M, Familje), and automated slideshow pagination.

Next.js / Tailwind CSS / Framer Motion
Venedig Kolgrill - Charcoal Grill Brand Landing Page
Inspect Full Resolution

Venedig Kolgrill - Charcoal Grill Brand Landing Page

White-label Restaurant Web

Visual brand landing page for Venedig Kolgrill with authentic charcoal skewer backdrop, catering services link, direct phone contact, and lunch menu links.

Next.js / React / Tailwind CSS
Venedig Kolgrill - Dedicated Online Ordering Storefront
Inspect Full Resolution

Venedig Kolgrill - Dedicated Online Ordering Storefront

White-label Restaurant Web

Dedicated online ordering hero for Venedig Kolgrill ('KOLGRILL. LEVERERAT.') with Takeout ordering mode, location selector, and active cart counter.

Architectural Lessons Learned
"If rebuilt, I would embed direct Network ESC/POS thermal printer protocols deeper inside the PWA to accelerate kitchen ticket dispatch."

— Mahmoud Talaat, Founder & Lead Systems Architect