🍕 Pizza Slice Customizer

Revolutionizing How We Share Pizza — One Slice at a Time

An interactive pizza builder built with React, TypeScript, and Next.js, allowing users to customize individual pizza slices using drag-and-drop toppings, real-time pricing, and realistic SVG-based visuals.

---

🚀 Features

• 🧩 Per-Slice Customization – Add unique toppings to each slice
• 💸 Real-Time Pricing – Dynamic total updates based on toppings
• 🖱️ Drag & Drop Interface – Move toppings naturally across slices
• 📱 Responsive Design – Works beautifully on tablets and mobile
• 🍽️ Fair Cost Splitting – Ideal for shared orders with friends
• 🧠 Math + UI Precision – Geometry-based slice detection and placement

---

🧰 Tech Stack

Category	Technology
Frontend Framework	React + TypeScript
Routing / SSR	Next.js App Router
Styling	Tailwind CSS v4
Graphics & Interactivity	SVG + HTML5 Drag & Drop
State Management	React Hooks / Context
Pricing Logic	Dynamic per-topping-per-slice algorithm

---

🎨 UI/UX Design

• Custom SVG renderings for toppings (cheese, pepperoni, veggies, etc.)
• Smooth drag-and-drop and click-to-place topping interactions
• Touch-friendly and responsive layout for tablets
• Minimal, restaurant-ready interface designed for real-world usability

---

⚙️ Core Logic

• Geometric Slice Detection – Calculates slice boundaries and angles
• Coordinate Mapping – Places toppings with precision
• Collision Detection – Ensures toppings stay within slice limits
• Dynamic Order Summary – Aggregates slice toppings and costs

---

🌍 Why It Matters

🍕 Encourages portion control and reduces food waste
🥗 Promotes healthier, personalized eating choices
💡 Enhances group dining experiences
🏪 Helps restaurants digitize and upsell through customization

---

🖥️ Installation & Setup

# Clone repository
git clone https://github.com/yourusername/pizza-slice-customizer.git

# Enter folder
cd pizza-slice-customizer

# Install dependencies
npm install

# Run development server
npm run dev
Visit http://localhost:3000 to start customizing your pizza!

🧩 Project Timeline
📅 Jun 2025 – Jul 2025
Designed and developed as an exploration in frontend geometry, interactivity, and user experience engineering.

💬 Feedback
Would you like to see apps like this in restaurants?
Open an issue or drop your suggestions — I’d love to hear from you!

🪄 Credits
Built by [Hassan Ali]
React + Next.js + Tailwind CSS + SVG Magic