micro appsproject guidebeginner

Build a Dining Decision Micro‑App in 7 Days (No Prior Dev Experience)

ccodeacademy

2026-01-21

10 min read

Build a dining recommender micro‑app in 7 days using ChatGPT scaffolding and simple web tools — no prior dev experience needed.

Stop arguing in group chats: build a dining recommender micro‑app this week

Decision fatigue about where to eat is a real problem for groups, students, and busy people. If you’ve ever spent 20 minutes scrolling while your friends wait, this project is for you. In seven focused days — using nothing more than simple web tools and ChatGPT to scaffold code — you’ll build a lightweight dining recommender inspired by Rebecca Yu’s Where2Eat. No prior developer experience required.

What you’ll ship (and why it matters)

Deliverable: a deployable single‑page micro‑app that stores a short list of restaurants, lets users set preferences, and returns ranked dining suggestions with a “vibe” shuffle. It runs in the browser and can be shared via a URL.

This is practical: it solves group decision friction, teaches you modern prototyping workflows, and is intentionally tiny — a true micro app that you can modify or discard. By 2026, personal micro apps are a mainstream way people solve real day‑to‑day problems without complex backends, and this project shows you how to join that movement.

Why build a micro‑app in 2026?

From late 2024 through early 2026, two trends accelerated: powerful LLM code assistants (ChatGPT, open LLMs) and affordable static hosting with edge functions. That convergence made it possible for non‑developers to create useful apps quickly. Rebecca Yu’s week‑long Where2Eat is one example of the new “vibe‑coding” wave that spawned many personal micro apps.

“Once vibe‑coding apps emerged, I started hearing about people with no tech backgrounds successfully building their own apps.” — Rebecca Yu (paraphrase; see her Substack and TechCrunch coverage)

For learners, micro apps are low risk: they’re cheap to host, fast to iterate, and easy to share. You’ll learn fundamentals that scale: UI, client logic, simple persistence, and deployment — all transferable to bigger projects.

7‑day plan (focused weekend sprints + polish)

Day 1 — Sprint (Weekend): Plan & scaffold with ChatGPT
Day 2 — Sprint (Weekend): Basic UI + local data
Day 3: Preferences & matching algorithm
Day 4: Improve UX & randomness (vibe shuffle)
Day 5: Persistence & sharing (localStorage + export)
Day 6: Optional integrations (Yelp/Google) & privacy
Day 7: Deploy, test with friends, and iterate

Each day’s section below gives precise prompts, code snippets, and checklist items. If you only have a weekend, complete Days 1–2 and Day 7 to get a usable prototype.

Tools — minimal, friendly, and free

ChatGPT (or similar LLM): for scaffolding HTML/CSS/JS and troubleshooting prompts.
Code editor: VS Code, or the browser‑based Replit / Glitch if you prefer no local install.
Version host / deploy: GitHub + GitHub Pages, Netlify, or Vercel (free tiers work).
Optional APIs: Yelp Fusion, Google Places, Foursquare — only if you want live restaurant data (requires keys).
Browser dev tools: essential for quick debugging.

Day 1 — Plan & scaffold with ChatGPT (2–3 hours)

Start with a clear prompt for ChatGPT. Ask for a tiny single‑page app scaffold: HTML, CSS, and JavaScript that renders a list and a “Pick for me” button. Keep the first iteration extremely simple.

Use this exact prompt (copy/paste):

Build a minimal single‑page web app called Where2Eat. No frameworks. It should have:
- A header and brief description
- An editable list of restaurants (name + tags like "spicy", "vegan", "cheap")
- A preferences section where the user can toggle tags
- A "Suggest a Place" button that returns a ranked suggestion based on matching tags and a small random factor
- Use localStorage to persist restaurants and preferences
- Keep CSS simple and mobile‑first
Return a single HTML file with embedded CSS and JS and brief comments.

ChatGPT will return a long single file scaffold. Paste that into your editor or Replit and open the page in a browser. You now have a functioning baseline.

Day 2 — Build the UI and local data model (3–4 hours)

Refine the interface for clarity: make add/remove restaurant flows simple and make tags editable. Focus on usability — non‑developers should be able to add places quickly.

Data model (client‑side)

Use a small JavaScript structure stored in localStorage:

const restaurants = [
  { id: 'r1', name: 'Mama Pizza', tags: ['italian','cheap','family'] },
  { id: 'r2', name: 'Green Bowl', tags: ['vegan','healthy','mid'] }
];
const preferences = { includeTags: ['italian','vegan'], excludeTags: [] };

Provide a simple UI to add a restaurant with tag chips. Keep tag suggestions short and accessible.

Accessibility & UX tips

Large touch targets for buttons.
Keyboard accessible forms and aria labels.
Provide examples for tags to reduce decision friction.

Day 3 — Implement the matching algorithm (2–3 hours)

Keep the algorithm simple and explainable: a score equals the number of matching tags minus penalties for excluded tags, plus a small random offset to avoid repeated results.

function scoreRestaurant(rest, prefs) {
  const match = rest.tags.filter(t => prefs.includeTags.includes(t)).length;
  const exclude = rest.tags.filter(t => prefs.excludeTags.includes(t)).length;
  const randomBias = Math.random() * 0.3; // small shuffle
  return match - exclude + randomBias;
}

function suggest(restaurants, prefs) {
  return restaurants
    .map(r => ({ r, score: scoreRestaurant(r, prefs) }))
    .sort((a,b) => b.score - a.score)
    .map(x => x.r);
}

Use this function in the button handler. Show the top 3 suggestions and include a “Shuffle vibe” control to change the randomBias seed.

Day 4 — Improve UX: show reasons and let users vote

Make recommendations persuasive. Display why a restaurant was chosen — e.g., “Matches: vegan, cheap.” Add a thumbs up/down to allow light feedback, which adjusts recommendation weights locally.

// Simple feedback adjustment
function applyFeedback(restaurantId, delta) {
  // store feedback scores in localStorage
  const feedback = JSON.parse(localStorage.getItem('feedback')||'{}');
  feedback[restaurantId] = (feedback[restaurantId]||0) + delta;
  localStorage.setItem('feedback', JSON.stringify(feedback));
}

function scoreRestaurant(rest, prefs) {
  const feedback = JSON.parse(localStorage.getItem('feedback')||'{}');
  const feedbackBias = (feedback[rest.id]||0) * 0.2;
  const match = rest.tags.filter(t => prefs.includeTags.includes(t)).length;
  const exclude = rest.tags.filter(t => prefs.excludeTags.includes(t)).length;
  const randomBias = Math.random() * 0.3;
  return match - exclude + randomBias + feedbackBias;
}

Small feedback loops make the app feel personal and improve results quickly.

By now everything runs in the browser. Add two sharing features:

Export/Import JSON: let users export restaurants + prefs so friends can import the same dataset.
Deployment: publish to GitHub Pages or Netlify so you can share a URL.

Export example:

function exportData() {
  const data = { restaurants: getRestaurants(), preferences: getPreferences(), feedback: getFeedback() };
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'where2eat-data.json';
  a.click();
}

Deploy steps (quick): push your project to GitHub, then connect the repository to Netlify or enable GitHub Pages in settings. Both will give you a URL in minutes.

Day 6 — Optional: plug in live data or add LLM re‑ranking

If you want to level up, add an optional integration with Yelp/Google Places. Note: these require API keys and may have rate limits. For privacy and simplicity, keep them optional behind a settings toggle.

Example pattern:

Fetch candidates from an API (within API rate limits).
Map their categories to your tag schema.
Use your local scoring function or send candidate summaries to ChatGPT for an LLM re‑rank (small prompt, no user data if privacy matters).

Prompt example for re‑ranking (use cautiously):

Rank these 5 restaurant summaries for a group that likes: vegan, cheap, and spicy. Return a JSON list with id and score.
[...list of summaries...]

By early 2026, many teams use LLMs for re‑ranking short candidate lists. It’s powerful, but be mindful of costs and privacy.

Day 7 — Deploy, test, and iterate with friends

Deploy the app and run a small usability test: invite 3–5 friends, ask them to add a few restaurants, pick preferences, and try the suggestion flow. Watch for confusion points:

Do tags feel intuitive?
Is the “why” text clear?
Are add/edit flows simple?

Collect feedback, iterate quickly (fix the top 3 friction points), and redeploy. Micro apps shine because iteration is fast.

Security, privacy, and ethical considerations

Because the app holds personal preferences, be transparent: if you add external APIs, document which data is sent off‑device. For a personal micro‑app, keep data local by default. If you implement LLM re‑ranking, consider using anonymized prompts and a limited dataset.

Common issues and debugging tips

If localStorage looks empty: open the app console and run localStorage.clear() only for debugging—don’t do it in production.
If CSS looks off on mobile: add a viewport meta tag and test tap targets.
If suggestions repeat: increase the random bias or implement a short history blacklist so recent picks aren’t suggested again immediately.

Advanced ideas once you’re comfortable

Share lists via a short URL (encode JSON in URL hash) so friends can open identical datasets without uploading data.
Add a “group mode”: let multiple people vote and weight suggestions based on aggregated preferences.
Use an edge function (Netlify/Vercel) to store a tiny database for cross‑device sync.
Turn it into a PWA so you can add it to your phone home screen.

Real‑world examples & inspiration

Rebecca Yu’s Where2Eat is a great case study of the micro‑app mindset: build for your own needs, iterate fast, and stop over‑engineering. Tech press in late 2025 highlighted a wave of personal apps built with LLM help and simple hosting — the same pattern you’re following here.

Checklist: shipable prototype

Basic single‑page app renders on mobile
User can add/edit/remove restaurants and tags
Preferences toggle for include/exclude tags
Suggest button returns ranked list with reasons
Feedback (thumbs up/down) affects local scores
Export/import JSON and/or short URL share
App deployed to a public URL

Sample ChatGPT prompts for concrete help

Use these followups when you hit a wall:

“Refactor this function to be more readable and add comments: [paste function].”
“Help me convert this localStorage code into an export/import JSON flow.”
“I get CORS errors when fetching Yelp API from client — how do I use a serverless function to proxy securely?”

Why this project teaches core dev skills

Despite being small, you practice the essential loop: design → build → test → deploy → iterate. That loop is exactly how modern software is made — whether it’s a micro app or a full product. Plus, using ChatGPT for scaffolding teaches you how to prompt engineers do repetitive work while you focus on product decisions.

Final thoughts and next steps

Micro‑apps are the antidote to over‑engineering. Build for the problem you have and ship something that helps. In 2026, with better LLM assistants and frictionless hosting, anyone can make a little tool that changes their day. Rebecca Yu’s approach is instructive: start small, iterate fast, and keep the app personal.

Actionable takeaways

Start with a one‑file scaffold from ChatGPT and iterate in the browser.
Keep logic on the client and persist with localStorage for privacy and simplicity.
Use simple, explainable scoring for recommendations and add a small random shuffle.
Deploy early — a shared URL invites useful feedback.

Ready to build? Follow the day‑by‑day plan above, copy the sample code into a Replit, and invite friends to test on Day 7. If you want help scaffolding or a review, paste your code into ChatGPT with the prompt templates above.

Call to action

Start now: spin up a Replit or create a new GitHub repo, ask ChatGPT for the scaffold with the exact prompt above, and dedicate two weekend sprints to get your first prototype live. Share your URL and a sentence about one tough UX choice you made — I'll help you iterate.

codeacademy

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.