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.
- 🧩 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
| 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 |
- 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
- 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
🍕 Encourages portion control and reduces food waste
🥗 Promotes healthier, personalized eating choices
💡 Enhances group dining experiences
🏪 Helps restaurants digitize and upsell through customization
# 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