By
@theodora
A simple, interactive world food explorer: Spin a 3D globe on desktop, pan a 2D map on mobile; tap a city, and a food card will pop up with recommended authentic food and a restaurant.
@theodora
on
World Food Explore
World Food Explorer🌍🍜
This is an interactive way to explore the world’s food.
Spin a 3D globe on desktop, pan a 2D map on mobile, tap a city and discover its signature dish and where to actually go eat it.
Live demo: https://theodora-sin.github.io/World-Food-Explore/
Features:
🌍 3D globe (desktop) / 2D map (mobile) — automatically switches based on screen width, so the experience fits any device
📍 Tap any city to open a food card: dish photo, description, cuisine type, meal course, and a recommended restaurant with address + Google Maps link
🔍 Search by city name, country, dish, or cuisine type; when it does not match, it will show “no matches”
🎲 Surprise Me — jumps to a random city (with a “spin then land” flourish on the 3D globe)
📍 Near Me — uses your device’s location to find and fly to the closest city in the dataset
★ Favourites — save cities to revisit later, stored locally in your browser
🕘 History — a running timeline of the last 10 cities you’ve explored this session
👋 Start screen with instructions and character guides, shown on first loading screen
Data Structure:
Each city in the dataset follow this shape:
cityName
country
latitude
longitude
Type of Cuisine (Chinese, Western, Italian, etc.)
dish_name
course (e.g. Main,Dessert, Brunch,B reakfast)
A photo of the famous dish
A short description of the famous dish
Name of the restaurant which served this dish
priceRange ($, $$, $$$)
address
hyperlink to Google Maps
Tech Stack:
globe.gl — 3D globe rendering (built on Three.js)
Leaflet + Leaflet.markercluster — 2D map and marker clustering
CARTO Dark Matter tiles — dark map theme matching the 3D globe’s aesthetic
Vanilla JavaScript (ES modules) — no framework or build step; every feature is a small, focused module
localStorage — persists favourites across visits
Browser Geolocation API — powers the Near Me feature
No backend, no database, no build tooling — the whole thing is static files, deployed via GitHub Pages.
AI Usage:
AI was used to assist with development — debugging code, explaining errors, and helping me think through what users would actually want from the experience. The concept, design direction, and feature decisions were all mine.
@theodora
on
World Food Explore
7h 11m 7s logged
Devlog #4
Final data were added to the Americas globe to cover the entire globe. It does not include all cities in the world, but it at least offers good representation of cuisine from around the world.
Today’s main focus was adding the timeline, the Near Me button, and the start screen with favicon— the last few features on my list before shipping.
This is the day when the project goes live. Thanks for following and supporting the project!
@theodora
on
World Food Explore
6h 21m 52s logged
Devlog #3
Added some new cities in Africa to our dataset, going further than just covering Asia and Europe.
The main highlight of today’s work was improving the 2D mobile interface, where the city card now appears with a slide-up animation from the bottom and is dismissed with a swipe-down action, not only a close button.
But I also added three new features, working simultaneously for the 2D map and 3D globe:
Search bar – search by city name, dish or cuisine
Surprise me – navigate to some random city
Favourites – mark your favourite city with a star, and open the list of saved cities (locally stored in the browser) later
That’s all for today’s developer log, will see you in the next one.
@theodora
on
World Food Explore
7h 7m 48s logged
Devlog #2
Today I started working on my project. I made a map based on Leaflet.js that people can interact with.
When people look at the site on their phones, they will see the 2D map. But if they are using a screen like a computer and the screen is wider than 768 pixels, then they will see a 3D globe instead of the 2D map.
I have been putting places on my map. Today I worked on Asia and Europe. I also drew the favicon by hand.
That’s it for today’s devlog. Thanks for reading, and see you in the next update!
@theodora
on
World Food Explore
8h 21m 14s logged
Devlog #1
Today I made a start on the project by creating a cool interactive 3D globe using Globe.gl.
The application is built around three things:
City (on the globe:)
Cuisine:
Place:
Each cuisine links to recommended places where users can try authentic local food.
