Build a Micro Dining App in 7 Days: A Developer’s Sprint Using ChatGPT and Claude
7-day developer bootcamp to build a micro dining app with ChatGPT and Claude—prompts, React scaffolding, and serverless deployment.
Beat decision fatigue and ship an MVP in a week
Pain point: You have an idea, limited time, and a need to prototype fast—without wasting days debating stack choices, or rewriting the same UI code. This 7-day, developer-focused sprint reproduces Rebecca Yu’s micro app approach for 2026: a pragmatic, prompt-engineered, code-first bootcamp using ChatGPT and Claude to accelerate design, scaffolding, and iteration.
Why this matters in 2026
Late 2025 and early 2026 marked a maturity leap: models are more reliable at code scaffolding, multimodal tool use is mainstream, and serverless edge platforms made tiny apps faster and cheaper to run. For developers and infra teams, that means you can:
- Rapidly prototype a full-stack MVP with fewer context switches.
- Use prompt engineering to ask models to produce production-ready snippets and tests.
- Leverage edge serverless functions and lightweight DBs (SQLite, Neon, Supabase) for low-cost hosting.
What you’ll build
A micro dining app (Where2Eat-style): users give preferences, the app suggests restaurants, the group can vote, and options are shown on a small map. The app is designed to be personal, shareable, and disposable—perfect for an MVP or portfolio piece.
High-level stack (favored for a 7-day sprint)
- Frontend: React + Vite + TypeScript + Tailwind CSS
- Backend: Serverless edge functions (Vercel or Cloudflare Workers)
- DB: Supabase (Postgres) or SQLite with Prisma for local-first simplicity
- AI: ChatGPT + Claude for prompts, code review, and iterative UX text
- Deployment: Vercel / Cloudflare Pages + GitHub Actions for CI
Bootcamp overview — Day by day
Each day has a clear goal, deliverables, and a short prompt template you can reuse. Follow the sequence and treat each day as a micro-OKR.
Day 0 — Prep (2 hours)
Goal: Remove friction so the week is about building, not tooling.
- Create GitHub repo and branch protection rules.
- Provision a Supabase project (or a free Neon Postgres) and generate API keys.
- Sign up for Vercel / Cloudflare Pages and connect GitHub.
- Open ChatGPT and Claude accounts, and prepare an API key manager (1Password/Secret Manager).
Deliverables: repo, remote DB, deployment account.
Day 1 — Design the minimal domain and UX (4–6 hours)
Goal: Define the MVP and capture UI wireframes + API surface.
- Define user stories (3–5): e.g., "I can enter dining preferences," "I can view suggestions," "I can vote/choose."
- Sketch 3 screens: Home (preferences), Suggestions (list + map), Invite/Share modal.
- Use ChatGPT/Claude for UX copy and a data model sketch.
Prompt template (for ChatGPT/Claude):
System: You are an experienced product designer and backend architect. I need a 3-screen micro dining app MVP. Provide: 3 user stories, React component list with props, a minimal Postgres schema, and basic API endpoints (CRUD). Keep everything minimal for a 7-day prototype.
Deliverables: user stories, component list, DB schema, API list.
Day 2 — Scaffold frontend and CI (6 hours)
Goal: Ship an initial React app scaffold and wire up CI so every push previews on Vercel/Pages.
- Bootstrap with Vite + TS + Tailwind.
- Create base routes and stub components for the three screens.
- Add ESLint, Prettier, and a basic GitHub Actions workflow or rely on Vercel previews.
Commands:
npm create vite@latest where2eat -- --template react-ts
cd where2eat
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Minimal folder structure:
- src/pages/Home.tsx
- src/pages/Suggestions.tsx
- src/components/PreferenceForm.tsx
- src/lib/api.ts (fetch wrappers)
Prompt to generate components from ChatGPT:
Prompt: Generate a TypeScript React component with props: initialPreferences and onSubmit(preferences). Include Tailwind classes and minimal accessibility. Return a single .tsx file.
Deliverables: working Vite app with routes and previews enabled.
Day 3 — Build serverless API and database models (6–8 hours)
Goal: Create serverless endpoints to save and fetch preferences, and a simple ranking endpoint.
- Decide DB: For speed, use Supabase Postgres. If you prefer local-first, use SQLite + Prisma and push to a small Postgres later.
- Create these endpoints: POST /api/preferences, GET /api/suggestions, POST /api/vote.
- Wire serverless functions on Vercel or Cloudflare Workers.
Example Postgres schema (SQL):
CREATE TABLE users (id uuid PRIMARY KEY DEFAULT gen_random_uuid(), name text);
CREATE TABLE sessions (id uuid PRIMARY KEY DEFAULT gen_random_uuid(), name text, created_at timestamptz DEFAULT now());
CREATE TABLE preferences (id uuid PRIMARY KEY DEFAULT gen_random_uuid(), session_id uuid REFERENCES sessions(id), user_id uuid REFERENCES users(id), cuisine text[], radius_km int, created_at timestamptz DEFAULT now());
CREATE TABLE suggestions (id uuid PRIMARY KEY DEFAULT gen_random_uuid(), session_id uuid REFERENCES sessions(id), name text, metadata jsonb, score int DEFAULT 0);
Sample serverless endpoint (Vercel / Node):
export default async function handler(req, res) {
if (req.method === 'POST') {
const { sessionId, preferences } = req.body;
// Validate and insert
await db('preferences').insert({ session_id: sessionId, ...preferences });
return res.status(201).json({ ok: true });
}
return res.status(405).end();
}
Prompt for Claude to design queries:
Prompt: Given the schema above, provide optimized SQL queries to fetch top 20 restaurants within radius based on cuisine preferences and session votes. Include index suggestions.
Deliverables: API endpoints + working DB migrations.
Day 4 — Add AI-assisted suggestion engine (6–8 hours)
Goal: Use ChatGPT/Claude to generate candidate restaurants from preferences and then rank them with simple heuristics.
Two approaches (pick one):
- Use an external Places API (Google Places, Yelp Fusion) + local heuristics for diversity and votes.
- Use a small LLM prompt to expand preferences into candidate queries, then enrich with Places API for details.
Prompt engineering sample (hybrid approach):
System: You are an assistant who converts compact user preferences into 10 search queries for a Places API. Each search should specify cuisine, vibe, and an offset for pagination.
User: Preferences: {cuisines: ["Thai","Mexican"], price: "$", vibe: "cozy"}
Assistant: Return JSON: [{query: "cheap cozy Thai near downtown"}, ...]
Flow:
- Collect preferences from frontend.
- Call your serverless endpoint which runs the prompt to generate queries.
- Execute Places API calls in parallel, dedupe results, score by recency/votes/distance.
Ranking heuristics (simple and fast):
- Votes + session preference match = primary score.
- Distance penalty for > radius_km.
- Boost for diversity by reducing score of duplicate cuisines.
Deliverables: suggestion engine returns a ranked list of 10-20 enriched restaurants.
Day 5 — UX polish and sharing flow (4–6 hours)
Goal: Make the app feel usable and sharable—invites and a simple stateful session link.
- Implement a session model: /s/:sessionId
- Add shareable invite link creation (create session in DB + return URL)
- Polish UI with Tailwind and add small animations (Headless UI or Framer Motion)
- Use ChatGPT to refine microcopy and UX prompts.
Prompt for microcopy (ChatGPT):
Prompt: Provide concise, friendly microcopy for buttons and empty states for a dining suggestions app: submit preferences, waiting for results, no matches found, share link copied.
Deliverables: shareable sessions, improved UI, copy updates.
Day 6 — Testing, metrics, and privacy checks (4–6 hours)
Goal: Add basic tests, instrumentation, and a privacy review.
- Add unit tests for critical functions (suggestion scoring), and basic integration tests for endpoints (Jest + Testing Library).
- Instrument events: "session_created", "preferences_submitted", "suggestions_viewed", "voted" — send to a lightweight analytics target (Plausible, PostHog).
- Privacy checklist: ensure no PII is leaked to third-party prompts, protect API keys, add rate limiting. See guidance on consent & safety for designing privacy-aware flows.
Sample Jest test (scoring function):
import { score } from './scorer';
test('higher votes increase score', () => {
const a = score({ votes: 10, distanceKm: 1 });
const b = score({ votes: 2, distanceKm: 1 });
expect(a).toBeGreaterThan(b);
});
Deliverables: tests, telemetry, privacy notes.
Day 7 — Deploy, monitor, and present (4 hours)
Goal: Final deploy, cook a demo, and record a short walkthrough for friends or interviewers.
- Run final lint, tests, and push to main to trigger Vercel/Pages preview -> production.
- Set environment variables in your hosting dashboard (DB URL, Places API key, OpenAI/Claude keys).
- Enable basic monitoring: Sentry for errors, PostHog for events.
- Record a 3–5 minute demo and create a README with setup steps for others.
Deliverables: live app, README, 3–5 minute demo video, public repo (if you want).
Prompt engineering patterns for developers
In a developer sprint, prompts are your rapid spec and code-review tools. Use structured system prompts, examples, and constraints to get reliable output.
Core patterns
- Spec from examples: Provide 2–3 input/output examples so the model understands format and edge cases.
- Constrain output: Ask for only JSON or only a single file to reduce hallucinations.
- Iterative refinement: Ask the model to output tests for the code it wrote, then run and fix failures.
Example prompt — generate a React component
System: You are a senior React engineer. Return only the contents of a single TSX file named PreferenceForm.tsx. Use Tailwind classes and no external CSS.
User: Create a form with checkboxes for cuisines, a radius slider, and a submit button. Props: initialPreferences: { cuisines: string[]; radiusKm: number }, onSubmit: (p)=>void.
Assistant:
Example prompt — backend API contract
System: You are an API designer. Provide OpenAPI 3.0 YAML for three endpoints: POST /preferences, GET /suggestions, POST /vote. Include request/response schemas and a short description for each. Keep payloads minimal for an MVP.
Real-world tips and trade-offs
- Keep it small: Limit features to the 3 core flows. Feature creep is the enemy of a 7-day sprint.
- Prefer managed services: Supabase or Neon lets you skip infra; edge functions reduce cold start pain.
- Protect secrets: Never embed API keys in prompts. Use a server-side function to call models when sensitive data is present.
- Beware of hallucinations: Use LLMs for scaffolding and transformation—not authoritative data. Always enrich with a deterministic data source (Places API) before showing results.
- Testing matters: Have the model generate unit tests for critical logic and run them in CI.
Metrics to track for a micro app
- Sessions created per day
- Preferences submitted per session
- Average suggestions viewed
- Conversion (vote → final choice) rate
- Error rate and latency for the suggestion endpoint
2026 trends you can leverage (quick guide)
- Multimodal toolchains: Models that accept structured inputs (JSON, code) and return executable snippets make scaffolding faster.
- Edge runtimes optimized for JS/TS: Most serverless providers improved runtime cold-starts and global distribution in 2025 — see tips on edge containers & low-latency architectures.
- Model-assisted testing: Use AI to generate tests and then run them in CI for quick feedback loops.
- Composable managed DBs: Lightweight serverless Postgres instances make per-app or per-user DBs feasible for small teams.
Common pitfalls and how to avoid them
- Over-reliance on LLMs for authoritative content: Enrich and verify before presenting to users.
- Not planning for scale: Micro apps can go viral; use quotas and rate limits on APIs to avoid surprise bills — governance and observability playbooks help here (policy-as-code & edge observability).
- Poor key management: Rotate keys and use short-lived credentials where possible.
Tip: Treat prompts as tests. If the prompt describes the expected output precisely (and includes examples), the model behaves like a reliable teammate.
Example repo checklist (README to include)
- How to run locally (env vars, DB migrations)
- How to run tests
- Deployment steps (Vercel/Cloudflare link + environment variables)
- Privacy considerations and AI usage notes
Actionable takeaways
- Day-scope: Break your 7 days into Design, Scaffold, API, AI logic, UX polish, Tests, Deploy.
- Prompt-first: Use system prompts + examples to produce precise code and tests.
- Edge-first: Deploy small functions on edge platforms to minimize ops overhead.
- Enrich LLM output with deterministic APIs for reliable results.
Next steps (try this now)
- Create the repo and paste the Day 1 prompt into a new ticket.
- Bootstrap Vite and commit the initial scaffold today.
- Use the AI prompts in this article as templates you can paste directly into ChatGPT or Claude to generate components, schemas, and tests.
Final thoughts
Micro apps are not just for non-developers anymore. In 2026, developers can leverage better models, faster serverless platforms, and composable services to ship focused, high-value MVPs quickly. Rebecca Yu’s week-long energy is replicable—with careful scope, pragmatic tooling, and smart prompt engineering, you can build a portfolio-ready micro dining app in seven focused days.
Call to action
Ready to run the sprint? Fork a starter template, use the prompts above, and tweet your Day 7 demo with #microappSprint. If you want a starter repo and checklist I use for client sprints, click to download the template and setup script in the repo linked in the README—then start Day 1 tonight.
Related Reading
- Playbook 2026: Merging Policy-as-Code, Edge Observability and Telemetry for Smarter Crawl Governance
- Deploying Offline-First Field Apps on Free Edge Nodes — 2026 Strategies for Reliability and Cost Control
- Cloud‑First Learning Workflows in 2026: Edge LLMs, On‑Device AI, and Zero‑Trust Identity
- Edge Containers & Low-Latency Architectures for Cloud Testbeds — Evolution and Advanced Strategies (2026)
- Launching a Podcast as a Beauty Brand: Lessons from Ant & Dec’s New Show
- Weekly Reset Routine Inspired by Sports Stats: Use a Pre-Game Checklist for Your Week
- French Cinema Goes Global: What Unifrance Rendez-Vous Means for Indian OTT Buyers
- From Profile Data to Predictions: Secure Feature Pipelines for Identity Signals
- When Cheap Smart Gadgets Are OK: A Breeder’s Guide to Buying Discount Tech Without Sacrificing Safety
Related Topics
thecode
Contributor
Senior editor and content strategist. Writing about technology, design, and the future of digital media. Follow along for deep dives into the industry's moving parts.
Up Next
More stories handpicked for you