CultureClash

Home Page
Fused Recipes
Recipe Modal

Inspiration

The hackathon's theme, "When Worlds Collide," immediately made us think of food. Cuisine is one of the most beautiful and accessible ways cultures have merged for centuries, from Silk Road spices bringing new flavours to Europe, to the modern fusion restaurant on your street corner.

We were inspired by this idea of a "flavour collision." We've all been stuck in a "food rut," eating the same five or six dishes. We wanted to build a tool that sparks culinary creativity in a fun, simple way. What happens if you take the comfort of your favourite dish and collide it with the unknown flavours of another culture? CultureCash is our answer: a way to discover your next great flavour fusion.

What it does

CultureClash is an interactive web application that helps users explore global cuisines through AI-powered fusion recipes. Here's how it works:

Choose Your Worlds: Select two cuisines from 28+ countries (American, Japanese, Mexican, Indian, Italian, and more)
AI Magic: Our Google Gemini AI analyses traditional dishes from both cuisines and creates 3 unique fusion recipes
Detailed Recipes: Each fusion recipe includes:
- A creative name blending both cultures
- Ingredients with origin tracking (which cuisine each ingredient comes from)
- Step-by-step cooking instructions
- Prep time, cook time, and servings
- Cultural notes explaining how the fusion honors both traditions
- Visual flag fusion images showing both countries
Save & Explore: Mark your favorite dishes, track your explored world combinations, and view your search history of past fusions

The app transforms the intimidating task of "what should I cook tonight?" into an exciting culinary adventure. It's not just recipes—it's a bridge between cultures through food.

How we built it

We built CultureClash as a full-stack application using modern web technologies:

Frontend:

Next.js 15 with App Router for server-side rendering and dynamic routing
TypeScript for type safety and better developer experience
Tailwind CSS v4 for responsive, beautiful styling with custom animations
shadcn/ui components for accessible, reusable UI elements
Framer Motion for smooth animations and transitions
Lucide React for crisp, modern icons

Backend & APIs:

Next.js API Routes for serverless backend endpoints
Google Gemini AI (gemini-1.5-flash) for intelligent fusion recipe generation
TheMealDB API for authentic cuisine data and meal information
FlagCDN for high-quality country flag images
Custom SVG generation for diagonal-split flag fusion visuals

Data & State Management:

React Hooks (useState, useEffect, useRef) for state management
localStorage for persistent user data (favorites, history, explored worlds)
Structured TypeScript interfaces for type-safe data handling

Key Implementation Details:

Dynamic routing with /worlds/[world1]/[world2] pattern
Comprehensive error handling with user-friendly messages
Accessibility-first approach with ARIA labels, keyboard navigation, and focus management
Optimised AI prompts to generate structured JSON responses
Real-time fusion recipe generation on page load

Challenges we ran into

AI Response Parsing: Getting consistent, structured JSON responses from Google Gemini AI was challenging. The AI would sometimes include markdown code blocks or extra text. We solved this by:

Crafting precise prompts with explicit JSON format requirements
Implementing robust parsing logic to extract JSON from various response formats
Adding retry mechanisms with improved error messages

Flag Fusion Visual Design: Creating visually appealing flag fusion images required experimentation. We tried several approaches:

Started with simple side-by-side flags
Evolved to diagonal splits for more dynamic visual impact
Implemented SVG with base64-embedded images for better browser compatibility

User Experience Flow: Balancing simplicity with feature richness was tricky. We wanted users to:

Get recipes immediately without extra clicks
Still have access to history and favorites
Navigate easily between different world combinations We solved this by auto-generating recipes on page load while keeping navigation intuitive.

Accessibility Implementation: Making the app fully keyboard-navigable and screen-reader friendly required careful attention:

Modal focus trapping and escape key handling
Proper ARIA labels for dynamic content
Managing focus state when modals open/close

Data Persistence: Structuring localStorage data to support favorites, history, and explored worlds while keeping it efficient and queryable required thoughtful schema design with the BridgeProfile interface.

Accomplishments that we're proud of

🤖 AI Integration Excellence: We successfully integrated Google Gemini AI to generate creative, culturally-respectful fusion recipes with detailed ingredient tracking and cooking instructions. The AI consistently produces high-quality, authentic-feeling recipes.

🎨 Beautiful, Accessible UI: Built a stunning interface with smooth animations, gradient effects, and visual flag fusions—while maintaining full accessibility with keyboard navigation and ARIA labels.

⚡ Smooth User Experience: The app feels fast and responsive. Recipes generate automatically, errors are handled gracefully, and the entire flow from world selection to viewing recipes is seamless.

💾 Robust Data Management: Implemented a comprehensive localStorage system that tracks favorites, history, and explored worlds—all persisting across sessions with proper data structure.

🏴 Creative Visual Elements: The diagonal-split flag fusion images add a unique visual identity to each recipe, making the cultural collision tangible and engaging.

🚀 Complete Full-Stack Application: In a hackathon timeframe, we built a production-ready app with:

3 API routes
Dynamic routing system
Multiple complex UI components
AI integration
Data persistence
Full accessibility support

📚 Rich Recipe Details: Each fusion recipe includes ingredient origins (world1, world2, or both), cultural notes, and honors both traditions—showing respect for the cultures being blended.

What we learned

AI Prompt Engineering: We learned that the quality of AI outputs heavily depends on prompt structure. Being explicit about format requirements, providing context, and iterating on prompts made a huge difference in response quality.

Next.js 15 App Router: Deepened our understanding of server components, API routes, and dynamic routing patterns. The App Router's file-based routing made structuring the app intuitive.

Accessibility Isn't Optional: Implementing proper accessibility from the start—rather than as an afterthought—improved the overall user experience for everyone, not just users with disabilities.

TypeScript Type Safety: Strong typing with interfaces like FusionRecipe, BridgeProfile, and SearchHistoryItem caught bugs early and made refactoring safer and faster.

User Flow Matters: Small UX decisions (like auto-generating recipes vs. requiring a button click) significantly impact how the app feels. We learned to prioritise the "happy path" user journey.

Error Handling is UX: Comprehensive error handling with friendly messages and retry options transforms frustrating failures into manageable hiccups.

GitHub Copilot as a Pair Programmer: Copilot accelerated development by suggesting patterns, catching edge cases, and helping implement complex features faster—especially valuable in a time-constrained hackathon.

What's next for CultureClash

🖼️ AI-Generated Dish Images: Add visual representations of the fusion dishes using AI image generation (DALL-E, Midjourney API, or Stable Diffusion) so users can see what their fusion might look like.

👥 User Authentication: Implement user accounts so people can:

Save favorites across devices
Share their fusion discoveries with friends
Rate and review fusion recipes

🗄️ Database Integration: Move from localStorage to a proper database (Vercel Postgres or Supabase) for: f

Cross-device sync
Community features
Better data management

🎲 "Surprise Me!" Feature: Add a randomise button that picks two cuisines automatically for adventurous users who want unexpected combinations.

🔄 Recipe Refinement: Allow users to click "Refine" to regenerate recipes with different flavour profiles or dietary restrictions (vegetarian, vegan, gluten-free).

⭐ Community Features: