Test the World

Inspiration

As someone from Northeast Assam , I grew up surrounded by a rich and diverse food culture where every community has its own unique traditional dishes, ingredients, and cooking techniques. Food has always been more than just a meal—it is a way of preserving history, culture, and identity. I was inspired by the idea that every country has similar culinary stories waiting to be discovered. With globalization, many traditional recipes are becoming harder to explore, so I wanted to create a fun and interactive way for people to discover authentic dishes from around the world. This led to the idea of Test the World, where users can spin a virtual globe and instantly experience global cultures through food.

What it does

Taste the World lets you spin an interactive 3D globe — built with Three.js and wrapped in a real satellite Earth texture — to randomly land on one of 60+ countries. The app then fetches a traditional, authentic recipe from that country filtered by meal type (Breakfast, Lunch, or Dinner). You get full step-by-step cooking instructions, ingredients, difficulty level, cultural tips, and serving size. Users can save recipes to a personal cookbook, star their favourites, and browse their culinary history. Guests can explore freely without an account, while registered users unlock their full cookbook experience.

How we built it

I built a full-stack MERN application from scratch over the hackathon period.

Frontend: React + Vite with Tailwind CSS v4 for styling and Framer Motion for animations. The centrepiece globe is a Three.js WebGL scene — a sphere with a real satellite Earth texture, atmospheric glow layers, a starfield of 1,800 points, and animated country pins that pulse on the surface. Redux Toolkit manages all global state (auth, recipe, guest mode) with localStorage persistence so sessions survive page refreshes.

Backend: Node.js + Express REST API with MongoDB Atlas as the database. Spoonacular's recipe API is the primary source, with a country→cuisine mapping layer to translate country names into Spoonacular's cuisine labels. When Spoonacular returns nothing, Groq's LLaMA 3 (70B) model generates a culturally authentic recipe as structured JSON via a carefully engineered system prompt. A MongoDB TTL index caches recipes for 7 days, so popular country combinations load instantly without burning API credits.

Auth: JWT-based authentication with bcrypt password hashing. Three access tiers: authenticated users, guest mode (localStorage flag), and protected routes for the cookbook and favourites.

Challenges we ran into

Spoonacular's cuisine system doesn't map 1:1 to country names — it uses labels like "Middle Eastern" or "Scandinavian" rather than specific countries. Building a reliable 60+ country mapping and handling edge cases where searches returned zero results took significant iteration.

Groq JSON consistency was another challenge. Getting LLaMA 3 to reliably return clean, parseable JSON with the exact schema we needed — without markdown fences, preamble, or hallucinated fields — required careful prompt engineering and a robust parsing and validation layer.

Three.js country pins needed to track the earth's rotation in real time. Keeping the pin sprite glued to the correct geographic point on a spinning sphere, while also applying a separate float animation, required computing the rotated 3D position every animation frame rather than setting it once.

Tailwind CSS v4 introduced a CSS-first configuration approach that differs significantly from v3, requiring us to relearn the theming system mid-build using @theme directives instead of tailwind.config.js.

Accomplishments that we're proud of

I'm proud of creating a complete end-to-end experience that combines cultural exploration, food discovery, and AI assistance in a single platform. The interactive globe experience makes discovering recipes engaging, while the AI-powered guidance transforms complex recipes into easy-to-follow cooking instructions. I'm especially proud of successfully integrating multiple technologies into a polished application that delivers value beyond a traditional recipe website.

What we learned

• Three.js in React requires careful cleanup — every geometry, material, and renderer must be manually disposed in the useEffect cleanup function to prevent memory leaks.
• Prompt engineering matters — the difference between getting clean JSON and getting Markdown-wrapped text from an LLM comes down to explicit, repeated instructions in the system prompt.
• API abstraction pays off — wrapping Spoonacular and Groq in their own client modules made swapping, testing, and adding fallback logic straightforward.
• Redux Toolkit dramatically reduces boilerplate compared to vanilla Redux, and createAsyncThunk handles loading/error states in a predictable, scalable way.
• Guest mode UX is underrated — letting users experience the core value of an app before asking them to register significantly lowers the barrier to engagement.

What's next for Taste the World

• User spin history map — a visual world map showing every country the user has cooked from, turning the cookbook into a personal culinary passport.
• Recipe ratings & notes — let users rate dishes and add personal cooking notes to saved recipes.
• Weekly cooking challenges — a "Country of the Week" feature that encourages the community to cook the same dish and share results.
• Dietary filters — integrate dietary restrictions (vegetarian, gluten-free, halal) into the spin so the globe only lands on compatible recipes.
• Social sharing — shareable recipe cards with the country flag and dish name for Instagram and WhatsApp.
• Offline mode — cache the last 10 recipes with a service worker so users can cook even without internet.

Built With

• claude
• express.js
• groqai
• javascript
• jwt
• mongodbatlas
• node.js
• react
• redux/toolkit
• spoonacular
• tailwindcss
• three.js
• vite