This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
The Comfort Atlas is a spinning 3D globe of comfort food from ~100 countries.
Virtually travel the globe and have a taste of the comfort foods from 100~ countries. Moussaka in Greece, Jollof Rice in Nigeria, Pho in Vietnam. There is also a "featured dish of the day" that rotates deterministically so it's the same for everyone visiting that day. And the fun feature: visitors can type in their own comfort dish and generate a downloadable, passport-stamp-style card in one of three color styles.
Demo
https://comfort-atlas.netlify.app/
Journey
I started with a flat SVG world map, clickable countries, keyboard support, a hover tooltip on the map, all built on real
So i decided to try something i have never done before. Make a globe! I used cobe which promised a 3D globe out of the box. First attempt rendered absolutely nothing but floating dots. 😂 With a lot of the help of my friend claude, we found out that their docs are outdated, and there is a createGlobe() that draws exactly one synchronous frame and expects you to drive a requestAnimationFrame loop calling .update() yourself.
Two things on the globe I'm proud of, because neither had any library support: a hover tooltip that tracks a marker in 3D space, and a fading "trail" of great-circle arcs between the countries you've visited. Both came down to translating the projection math out of a minified bundle into something readable.
What I would do next: dark mode, enrich the content, comfort food battles per country.
What I learned: a lot about accessibility in 3D/canvas, which is so much more difficult than the 2d one, one check for a11y is never enough. Maps are hard, and getting something to track a moving 3D object from regular DOM is even harder.
Licensed under MIT
Fun fact: I don't like Moussaka, even though i am greek, my comfort food is Pizza or Giouvetsi. xD
Top comments (7)
Super cool and fun idea! I enjoyed browsing through countries to look for delicious food around the world! 😋 I hope you will develop the project and add more dishes to the map. Also, it would be super cool to have a picture of a given dish.
Good luck with the challenge!
Thank you, i find it was very difficult to find the comfort foods from each country than building the actual app :D I will keep it in mind for next iteration!
How about researching using AI?
AI gave me an initial list, but most of them where either celebratory food or the most popular food, I guess it couldn't understand very well what comfort food is. We went with a lot of back and forth but I had to also research a lot myself.
I thought this was super neat to explore and it's a great way of discovering new foods around the world. I enjoy these types of projects.
Glad you enjoy it 🤗
Some comments may only be visible to logged-in visitors. Sign in to view all comments.