tutorialmicro-appsmaps

Build a Restaurant Recommendation Micro App on a Free Host (Step-by-Step)

hhostingfreewebsites

2026-01-25 12:00:00

10 min read

Build a restaurant recommender micro app on free hosts: Leaflet+OSM, Overpass queries, client-side scoring, and WordPress embedding.

Stop paying recurring hosting fees to test ideas — build a restaurant recommendation micro app on a free host

Decision fatigue and hosting bills are two real problems for small site owners and marketers: you want to prototype a micro app quickly, keep costs at zero, and still have a pleasant UX with maps and personalized suggestions. In this step-by-step tutorial you’ll recreate a dining recommendation micro app using free hosting, maps integration with OpenStreetMap/Leaflet, and lightweight AI-style prompts run client-side — no paid backend required. You’ll get two practical deployment paths: a static-site approach (best for performance and SEO) and a site-builder / WordPress-friendly approach (best for non-developers).

What you’ll accomplish and why this matters in 2026

By the end of this guide you’ll have a working restaurant recommender that:

Runs on a free host (GitHub Pages, Cloudflare Pages, or an embedded iframe inside WordPress.com/Wix).
Shows an interactive map using Leaflet + OpenStreetMap (no paid map API keys needed).
Fetches POIs (restaurants) using the Overpass API and ranks results client-side using user preferences.
Delivers human-friendly recommendation text using a simple prompt template — with an optional on-device small model workflow for richer language.
Is built so you can scale later to serverless functions or paid LLM APIs when you need them.

Why 2026 matters: open-source LLMs and client-side inference tools matured through late 2025, and static hosting providers continued expanding free capabilities for static apps. That means you can deliver increasingly smart micro apps without committing to monthly backend costs — if you design for rate limits, privacy, and graceful upgrades.

Quick architecture — the inverted pyramid version

Most important first: a static page contains a tiny JavaScript app. The app asks for location, queries Overpass (OpenStreetMap) for nearby restaurants, scores them against user preferences, shows them on a Leaflet map, and produces a recommendation card using a prompt template. Deploy the static files to a free host or embed them in a WordPress page via iframe.

Tradeoffs and constraints (so you don’t get surprised)

No paid backend means relying on public APIs (Overpass, Nominatim) with conservative usage or local datasets and caching.
CORS & rate limits: Overpass and some geocoders restrict access — cache results in localStorage and throttle requests.
SEO: Dynamic recommendations are user-specific and not crawlable; pre-render landing copy and structured data to keep search visibility.
Privacy: Browser geolocation stays client-side; don’t send PII to third-party analytics without consent.

Prerequisites

Basic comfort with HTML, JS, and Git (optional).
A free GitHub account (for GitHub Pages) or Cloudflare account (for Cloudflare Pages), or a WordPress.com / Wix free site.
A simple text editor.

Part A — Static site (recommended for marketers and SEOs)

Why choose static?

Blazing-fast performance on free hosts (GitHub Pages, Cloudflare Pages, Vercel).
Better control over caching and client-side logic.
Easier upgrade path to serverless functions if you add a paid API later.

Step 1 — Create a minimal app skeleton

Create an index.html with a single-page app. Below is a pared-down example showing the main pieces: requesting location, querying Overpass, scoring results, and rendering a Leaflet map.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Where2Eat — Micro Recommender</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
  <style>#map{height:60vh} .panel{padding:12px}</style>
</head>
<body>
  <div class="panel">
    <h2>Where2Eat (Micro App)</h2>
    <form id="prefs">
      <label>Cuisine: <input name="cuisine" placeholder="e.g. pizza, sushi" /></label>
      <label>Max minutes: <input name="maxTime" type="number" value="15" /></label>
      <button>Find</button>
    </form>
  </div>
  <div id="map"></div>
  <div id="results" class="panel"></div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>(async()=>{
    const map=L.map('map').setView([40.7,-74],13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);

    const form=document.getElementById('prefs');
    form.addEventListener('submit',async e=>{
      e.preventDefault();
      const data=new FormData(form);
      const prefs={cuisine:data.get('cuisine')||'',maxTime:Number(data.get('maxTime')||15)};

      if (!navigator.geolocation) return alert('Allow location');
      navigator.geolocation.getCurrentPosition(async pos=>{
        const [lat,lon]=[pos.coords.latitude,pos.coords.longitude];
        // Overpass query: restaurants within X meters
        const radius= (prefs.maxTime||15) * 80; // rough meters per minute by foot
        const q=`[out:json];node["amenity"="restaurant"](around:${radius},${lat},${lon});out;`;
        const url='https://overpass-api.de/api/interpreter?data='+encodeURIComponent(q);
        const res=await fetch(url); const json=await res.json();
        const items=json.elements.map(el=>({id:el.id,lat:el.lat,lon:el.lon,name:el.tags.name||'Unnamed',tags:el.tags||{}}));

        // Score items
        const scored=items.map(it=>{let score=0; if(prefs.cuisine && it.tags.cuisine && it.tags.cuisine.includes(prefs.cuisine)) score+=30; if(it.tags['outdoor_seating']) score+=5; score += Math.random()*10; return {...it,score};})
          .sort((a,b)=>b.score-a.score)
          .slice(0,8);

        document.getElementById('results').innerHTML = scored.map(s => `<div><strong>${s.name}</strong> — score ${Math.round(s.score)}</div>`).join('');
        scored.forEach(s => L.marker([s.lat,s.lon]).addTo(map).bindPopup(s.name));
        map.setView([lat,lon],15);
      })
    })
  })()
</body>
</html>

This is intentionally compact. The core steps are visible: geolocation → Overpass query → scoring → map + result cards.

Step 2 — Scoring algorithm (simple, explainable, SEO-friendly)

For a no-backend micro app keep ranking deterministic and transparent so you can explain why an item was suggested. Example scoring signals:

Match on cuisine keywords (+30)
Distance decay (closer gets + points)
Tags like outdoor_seating, wheelchair (+5 each)
Random tie-breaker (+0-10)

Because you own the logic, you can also show the scoring breakdown in the UI — good for trust and UX. If you want to formalize prompts, consider audit-ready text pipelines for prompt provenance and normalization.

Step 3 — Add human-friendly recommendation text (AI-style prompts)

Instead of calling a paid LLM, craft a prompt template and fill it with the scored data. This delivers the feel of an AI-written explanation without external API calls:

const template = (prefs, top) => `Because you selected ${prefs.cuisine || 'any cuisine'} and wanted a ${prefs.maxTime}‑minute walk, we recommend ${top.name}. It's ${Math.round(top.score)}% match — ${top.tags.cuisine || 'varied menu'}. Nearby features: ${Object.keys(top.tags).slice(0,3).join(', ')}`;

For a richer experience, you can optionally run a tiny on-device LLM (WebAssembly) to polish that template into a friendlier sentence. By 2026 many open-source projects make running small models in the browser feasible — treat that as an optional upgrade for power users.

Step 4 — Deploy to a free host

Push your static files to a GitHub repo named username.github.io — GitHub Pages will serve it for free.
Or deploy to Cloudflare Pages (drag-and-drop or connect repo) for global edge performance and free previews.
Set up a brief README and add structured data (JSON-LD) describing the app landing page for SEO.

Part B — Site-builder & WordPress walkthrough (non-dev friendly)

If you run WordPress.com, Wix, or another site-builder on a free plan, you can still ship the micro app without backend changes. The recommended pattern is host the app as a static micro-site and embed it via an iframe into your builder page. This keeps the host's plugin restrictions out of the way.

Step 1 — Host your static app on GitHub Pages or Cloudflare Pages

Follow the steps in Part A to produce a small index.html and assets, then deploy. You’ll get a public URL like https://yourproject.pages.dev or https://username.github.io/project

Step 2 — Embed into WordPress.com or Wix

Create a new page in your site-builder.
Add a Custom HTML block and paste an iframe that points to the URL above: <iframe src="https://yourproject.pages.dev" style="width:100%;height:700px;border:0;"></iframe>.
Publish. The micro app runs inside the page; the rest of your site keeps its SEO and CMS features.

Why an iframe? Because WordPress.com free tiers rarely allow arbitrary server-side files or plugins. An iframe isolates resources, avoids JavaScript conflicts with the builder, and is the simplest no-backend integration path.

Maps integration: Leaflet + OpenStreetMap vs. paid providers (2026 lens)

In 2026 the map landscape favors flexibility and cost control:

Leaflet + OpenStreetMap: Free, open, and ideal for micro apps. Styling is basic but acceptable — good for prototyping and long-term cost control.
Mapbox & Google Maps: Rich visuals and geocoding, but pricing and API key management can be prohibitive when you scale. If you need their advanced features, plan for a billing switch later.
Geocoding: Use Nominatim/Overpass for basic needs. For production-grade geocoding with SLA consider Mapbox or a paid provider later.

Privacy, rate limits, and polite API use

Keep geolocation client-side. Don't store precise coordinates on third-party servers without consent.
Cache Overpass/OSM responses in localStorage for 24 hours to lower rate pressure and speed up UX.
Implement exponential backoff for failed Overpass queries and show friendly error UI.

SEO & discoverability for a micro app

Micro apps are often interactive and user-specific, but you can still optimize:

Add a clear landing page with crawlable content: explain what the app does, include screenshots, and add target keywords like micro app tutorial, restaurant recommender, and free hosting. Follow a 30-point SEO checklist to make sure basics are covered.
Include JSON-LD describing the page and your organization to help search engines understand it (AEO & structured data).
For dynamic recommendations, pre-render or surface example recommendations as static content so search engines can index useful pages.

Upgrade path — how to add paid features later

Design with these hooks so you can upgrade without a complete rewrite:

Abstract data layer: swap Overpass calls with serverless functions (Cloudflare Workers) that proxy paid APIs and hide API keys.
Plug-in LLMs: start with template-based prompts; add a serverless call to OpenAI/Anthropic or a hosted LLM when you need richer text generation or personalization.
Analytics & A/B: add event hooks so you can measure which recommendations convert before you invest in paid scaling.

Examples, real-world tips, and lessons learned

“I built Where2Eat in a week using Claude and ChatGPT for idea generation — vibe coding is real.” — anecdote from the micro app trend

From experience building similar micro apps and advising marketers, these tactics matter:

Show the matching rationale. Users trust an app that explains why it picks a place.
Optimize for mobile first — people choose restaurants on phones.
Keep fallback content for crawlers and email previews: when you share the page, social cards should render useful info.
Measure friction points: if users don’t allow geolocation, offer a quick manual-input fallback (zip/postcode or a map click).

2026 trends & future predictions (brief)

Client-side small LLMs will increasingly power micro personalization without per-request API billing; expect better in-browser text polishing tools in 2026 and beyond (run local LLMs).
Static-first architectures will dominate low-cost prototypes — free hosts will keep adding edge features to attract creators.
Privacy and zero-party data will become a differentiator: micro apps that explicitly avoid harvesting PII will build more trust.

Checklist: Get this live in under 2 hours

Create a repo and copy the index.html skeleton from Part A (starter skeleton).
Test locally (open file in browser or run a tiny HTTP server).
Deploy to GitHub Pages or Cloudflare Pages.
Create a WordPress.com page and embed via iframe (if using a site-builder).
Test on mobile, verify geolocation and map markers work, and add a small privacy note.

Actionable takeaways

Start with OpenStreetMap + Overpass + Leaflet to avoid upfront API bills.
Keep ranking client-side and explain the scoring to your users for trust.
Embed via iframe if you’re using WordPress.com or another site-builder on a free plan.
Design for graceful upgrades so you can add serverless APIs and paid LLMs later without a full rewrite.

Final notes & call-to-action

Micro apps are a low-cost way to test ideas, delight users, and learn what features matter before you invest. You don’t need a paid backend to get a useful restaurant recommender live — pick the static route for speed and SEO, or embed a hosted micro-site inside your WordPress page for a no-code friendly path.

Ready to ship? Clone the starter skeleton, tweak the scoring to match your audience, and deploy on GitHub Pages. If you want a step-by-step starter repo or a WordPress iframe template tailored to your brand, reach out or sign up for our free template pack — build faster, spend less, and learn what works before you scale.

hostingfreewebsites

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

Micro Apps on Free Sites: Add Fast, Single-File Features That Boost Engagement

SEO•10 min read

Entity-Based SEO for Small Sites on Free Hosts: How to Rank with Limited Resources