Live Coding: Build a ‘Dining Decision’ Micro-App in One Session Using Expo and ChatGPT

Hook: Ship a working group-dining micro-app in one live session

Decision fatigue, long feedback loops, and painful platform differences slow teams and solo makers alike. What if you could prototype a useful, sharable mobile micro-app in one focused live coding session — using Expo for instant device feedback, ChatGPT for scaffolding, and a maps integration for real-world utility? In 2026 the toolchain and AI workflows make that not just possible but routine.

What you’ll get from this live-coding walkthrough

We’ll rapidly prototype a 'Dining Decision' micro-app inspired by Rebecca Yu’s Where2Eat story: a lightweight group app that recommends nearby restaurants based on simple preference matching, shows options on a map, and runs in Expo Go or Snack. This guide is tuned for a live stream format — timeboxed, feature-first, and resilient to hiccups.

Why this matters in 2026

• Micro-apps and vibe-coding are mainstream — people build ephemeral, personal apps quickly using AI-assisted tooling.
• Expo and Snack continue to be the fastest route from idea to device with instant reload and web sharing.
• LLMs in dev workflows (ChatGPT, copilots, plugin-based toolchains) accelerate scaffolding and iterative code generation — but you still need domain knowledge and structure.
• Maps & location are core differentiators for real-world micro-apps; by combining lightweight on-device logic with third-party Places APIs you can create value in an hour.

Session plan: 90–120 minute live stream

1. 0–10m: Project goals, prerequisites, and safety (privacy, API keys)
2. 10–25m: Use ChatGPT to scaffold a minimal Expo app and component skeletons
3. 25–55m: Implement preference matching engine and mock dataset
4. 55–80m: Integrate maps, show pins for candidates, and wire selection flow
5. 80–100m: Add quick voting UI, finalize UI/UX, test on device (Expo Go / Snack)
6. 100–120m: Polish, demo, share Snack link, and deploy to EAS/TestFlight if time

Prerequisites

• Node.js (LTS) and Git for local work; or just a browser for Snack
• Expo Go on your phone or use the Snack web preview
• ChatGPT access (GPT-4o or similar) for scaffolding prompts
• Optional: Google Places API key (or Foursquare / Yelp) for live search — you can start with mocked data

Live-coding first step: scaffold with ChatGPT

Use ChatGPT to quickly generate a project skeleton. Below is a prompt I use live to get a usable starting point — copy, paste, and iterate in the stream.

Prompt for ChatGPT (scaffold)

'Create a minimal Expo managed app (React Native) for a Dining Decision micro-app. Provide App.js plus components: MapScreen, RestaurantList, PreferenceForm, MatchEngine. Use React Navigation stack, expo-location for user location, and mocked restaurant data. Keep styling minimal, and return only code blocks.'
  

ChatGPT will return component files you can paste into App.js or split into separate files. The goal is working UI quickly — don’t sweat refactors during the first 30 minutes.

Core project architecture (one-file first, then split)

For rapid iteration start with a single App.js that wires screens and state. Later extract components and add a small state store (Context or Zustand) if the UI grows.

Key screens

• MapScreen — shows candidate restaurants and user location
• RestaurantList — list view with scores and quick actions
• PreferenceForm — quick inputs (cuisine, price, distance)
• MatchEngine — deterministic scoring function that aggregates group preferences

Example: Minimal matching engine

Below is a compact, actionable matching algorithm you can paste into the app. It uses weighted scoring: cuisine match, price match, distance decay, and a simple popularity boost. This runs fully on-device so privacy-friendly and fast.

// matchEngine.js

export function scoreRestaurants(restaurants, aggregatedPrefs, userLocation) {
  // weights — tweak live during the stream
  const weights = { cuisine: 0.4, price: 0.2, distance: 0.25, popularity: 0.15 };

  function distanceKm(a, b) {
    // Haversine (approx)
    const toRad = x => (x * Math.PI) / 180;
    const R = 6371; // km
    const dLat = toRad(b.lat - a.lat);
    const dLon = toRad(b.lon - a.lon);
    const lat1 = toRad(a.lat);
    const lat2 = toRad(b.lat);
    const sinDLat = Math.sin(dLat/2);
    const sinDLon = Math.sin(dLon/2);
    const c = 2 * Math.asin(Math.sqrt(sinDLat*sinDLat + Math.cos(lat1)*Math.cos(lat2)*sinDLon*sinDLon));
    return R * c;
  }

  return restaurants.map(r => {
    const d = distanceKm(userLocation, { lat: r.lat, lon: r.lon });
    const distanceScore = Math.max(0, 1 - d/10); // prefer within 10km

    const cuisineScore = aggregatedPrefs.cuisines.includes(r.cuisine) ? 1 : 0;
    const priceScore = Math.max(0, 1 - Math.abs(aggregatedPrefs.price - r.price) / 2);
    const popularityScore = Math.min(1, r.popularity / 100);

    const total = cuisineScore*weights.cuisine + priceScore*weights.price + distanceScore*weights.distance + popularityScore*weights.popularity;

    return { ...r, score: total };
  }).sort((a,b) => b.score - a.score);
}
  

Maps integration — pragmatic options for a live stream

For a fast live demo use one of two routes:

1. Mocked map using image or static coordinates — fastest and zero API keys. Plot coordinates on a simple SVG or use a static map image with clickable overlays.
2. react-native-maps + Google Places — full experience with live search and pins. Requires a Google API key and a small billing setup. For a live stream prepare the API key in advance and show how to store it in environment variables.

Example MapView usage for Expo (conceptual snippet you can demo if keys are ready):

// MapScreen.js (abbreviated)
import React from 'react';
import { View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

export default function MapScreen({ restaurants, userLocation }) {
  return (
    
      
        {restaurants.map(r => (
          
        ))}
      
    
  );
}
  

Using ChatGPT to scaffold specific components live

Here are example prompts to use in the stream for specific tasks. Paste them into ChatGPT and adjust the results live.

• PreferenceForm prompt

  'Generate a React Native PreferenceForm component that collects cuisine preferences (checkboxes), max distance (slider), and price preference (1-3). Export the state as an object to the parent.'
        

• RestaurantList prompt

  'Create a RestaurantList React Native component that accepts a list of restaurants with {name, score, cuisine, price} and renders a FlatList with compact rows showing name, score as percent, and a button to 'vote' or 'dismiss'.'

• Map prompt

  'Produce a MapScreen using react-native-maps that shows the user position and restaurant markers. When a marker is tapped, scroll RestaurantList to that item.'

Prototyping tips for live streams

• Timebox features. If map integration is eating time, finish with a static map and schedule a follow-up for live Places API.
• Start with mocked data. You can add real API calls later; mocked data helps validate UI and match logic quickly.
• Use Expo Snack for sharing. Snack is a live-coding frontend that viewers can fork instantly. Keep external keys out of public Snack — use mocked data there.
• Commit frequently and use branches. In a live setting, small commits help you revert when something breaks.

Concurrency & group matching UX patterns

The app’s core value is group decision-making. Use these patterns during the live build:

• Instant voting — lightweight upvote/downvote per restaurant; aggregate on-device and sync via a simple backend (or share a short link with encoded state). Consider micro-incentives or micro-payments for engagement patterns explored in micro-drops.
• Preference aggregation — compute a single aggregated preference profile by taking mode for categorical fields (favorite cuisine) and average for numeric fields (price tolerance). For related design ideas see work on developer onboarding flows that emphasize preference-managed experiences.
• Conflict resolution — if no clear winner, present top 3 and let the group flip a coin (or run a randomize-with-weight option). For examples of local pop-up trust signals and place-aware UX, see Micro-Popups & Local Presence.

Data & privacy: a quick checklist

• Ask for location permission with a clear, contextual reason string. In-stream, demo both allowed and denied flows.
• Avoid sending raw chat data to third parties. For ephemeral micro-apps, client-only logic is a win; think about edge identity and trust signals covered in Edge Identity Signals.
• If you use Places APIs, explain data-sharing and store API secrets securely (EAS secrets, env vars on server).

Live debugging checklist

• Console logs in Snack and use the browser devtools console for web previews.
• Hot reload vs full reload: if state misbehaves, tell viewers to hard reload the app.
• If MapView fails, switch to the mocked map fallback immediately to keep momentum. Keep a small mock dataset and static map images ready.

Deploy options after the stream

1. Snack share link. Easiest and immediate. Viewers can fork and run in a browser/device.
2. expo publish to share a QR for Expo Go — quick and persistent.
3. EAS Build for TestFlight / Google Play distribution if you want to test on multiple devices beyond Expo Go. Note: EAS requires a short setup time; prepare this as a later follow-up livestream. For performance and edge-first deployment tips see Edge-Powered Landing Pages.

2026 trends & future predictions — why micro-apps and LLMs keep pairing well

By 2026 we’re seeing several sustained trends that make this workflow worth mastering:

• LLMs as prototyping copilots. ChatGPT-style models have matured to produce safer, more context-aware scaffolds. During live sessions, developers can iterate UI + business logic quickly.
• Edge and offline-first patterns. More micro-apps run local-first logic for privacy; lightweight match engines like our scoring function will be common.
• Platform-agnostic dev experiences. Tools like Expo and Snack keep improving hot-reload and web parity, shortening feedback loops compared with raw native builds.
• Creator tooling for streams and studios. If you plan to run regular streams, kit your setup using the practical advice in reviews of compact field kits, tiny at-home studios, and smart lighting to keep the vibe consistent.

Real-world example & inspiration

Rebecca Yu built Where2Eat in a week to solve group dining indecision — an excellent example of how personal micro-apps add real value. Her story is emblematic of the vibe-coding and micro-app movement that mixes curiosity, pragmatic engineering, and AI assistance. For trends in restaurant and local discovery that tie into Where2Eat, see coverage of the Evolution of Food Delivery in 2026.

Example follow-up roadmap (post-stream)

• Swap mocked data for Google Places or Foursquare, add server-side caching for quota management.
• Introduce ephemeral rooms and WebRTC or simple WebSocket sync for real-time voting.
• Add a tie-breaker microflow (randomized weighted pick) and an optional deep link to Maps for routing directions.
• Measure: add small analytics to learn which features drive decisions and adjust match weights.

TL;DR — Actionable takeaways

1. Start with Expo/Snack and ChatGPT-scaffolded micro-apps: momentum > perfection in a live session.
2. Use mocked data first and a simple, local match engine; add Places API later.
3. Timebox map integration; always keep a static-map fallback to avoid losing the audience.
4. Make privacy-first choices: local match logic avoids unnecessary data sharing. For identity and edge trust approaches see Edge Identity Signals.

Live session checklist (copy for your stream)

• Screen share: code editor and mobile preview
• Snack ready with forkable project
• ChatGPT prompts prepared in a separate tab
• API keys and environment notes (hidden from public if needed)
• Fallback assets: mocked dataset and static map image

Final notes & call-to-action

Building a useful Dining Decision micro-app in a single live session is not just a demo trick — it’s a replicable workflow for shipping small, high-value tools. Use Expo and Snack for instant preview, ChatGPT to scaffold and iterate, and a simple match engine to make decisions transparent and tweakable.

Ready to try it now? Fork the starter Snack, paste the MatchEngine above into your project, and run the app on Expo Go. Join my next live stream to watch a full 90-minute build — bring an idea and we’ll prototype it together.

If you want the starter template I used in this article or the full code after the stream, subscribe and I’ll share the GitHub and Snack links. Happy prototyping — ship small, validate fast, and keep the experience delightful for users.

Related Reading

• Build a Micro-App Swipe in a Weekend: A Step-by-Step Creator Tutorial
• Review: Tiny At-Home Studios for Creators (2026 Kit)
• Edge-Powered Landing Pages for Short Stays: A 2026 Playbook
• The Evolution of Food Delivery in 2026: Ghost Kitchens, Sustainability, and Last‑Mile AI
• Sustainability and Scent: Will Advanced Fragrance Science Make Perfumes More Eco-Friendly?
• Edge AI at Home Labs: Hosting Large GenAI Models on Raspberry Pi 5 with AI HAT+ 2
• Script Templates and 5 Episode Ideas for Hijab Microdramas on Vertical Video Apps
• How to Spot a Deal on Tech That Actually Helps Your Low‑Carb Routine
• How to Monetize a Marathi Podcast: Revenue Streams, Sponsorships and Platform Choices