🌍 Meal Globe Website

A captivating interactive experience to explore global cuisines! Users can spin through a 3D globe of meal dishes and click on any to view full recipes fetched from TheMealDB API. Built with React, WebGL (WebGL2 + gl-matrix), and CSS animations.

🚀 Live Demo

Check it out here: https://meal-globe-website.netlify.app/

Created using React JS

🔧 Features

3D rotating globe of dishes with smooth mouse drag rotation using a custom Arcball control in WebGL2.
Dynamic fetching of recipe listings by cuisine (e.g., “Indian”, “American”)
Click a dish to seamlessly fetch & display full recipe details — including ingredients, instructions, and images
Clean, responsive UI to present the globe, spinner, recipe card, and cuisine-selection navbar.

🛠️ Tech Stack

🔹 React (Functional Components, Hooks)
🔹 WebGL2 + GLSL + gl-matrix — for 3D instanced graphics
🔹 Axios — for API calls
🔹 CSS — for layout, responsive design, and visual effects

⚙️ Installation

Clone the repo

git clone https://github.com/harshsankhla18/Meal-Globe-Website.git
cd Meal-Globe-Website

Install dependencies
```
npm install
```
Start Development server*
```
npm start
```
Open your browser and visit http://localhost:3000

🧩 Project Structure

src/
├── Components/
│ └── InfiniteMenu/ # Main spinning globe + recipe modal
├── Navbar/ # Cuisine selector component
├── App.jsx # Main application entry & state handling
└── index.js # React DOM bootstrap

public/
└── index.html

👉 Usage

Select a cuisine from the navbar (e.g., "Indian").
The globe populates with dishes from that cuisine.
Drag or rotate your mouse to spin and inspect.
Hover shows the dish title; click the 🔍 icon to reveal the recipe.
The recipe card displays instructions, ingredients, and more.
Click the X in the card to close it and return to the globe.

🏗️ Custom Implementation Highlights

InfiniteGridMenu handles instanced WebGL rendering of circular disks (disc geometry).
Arcball rotating via pointer events, with inertia and snapping to highlight dishes.
Texture atlas creation using an offscreen canvas to pack dish images efficiently.
React state controls selected dish and fetches recipe details with Axios.
Pure CSS modals for recipe overlay, hover animations, and responsive UI.

Made with ❤️ by Harsh Sankhla
BTech @ IIIT Bhagalpur

harshsankhla18/Meal-Globe-Website