Dunkin Clone is a fully responsive web application inspired by Dunkin Donuts, but completely redesigned and developed from scratch using React.js and Bootstrap.
It’s built as a Single Page Application (SPA) that uses Axios to fetch data from Supabase, which serves as the backend and database.
The goal of this project is to provide a professional, modern, and dynamic coffee shop experience that can easily be extended into a real-world e-commerce application.
- 🏠 Home Page – Beautiful, modern hero section with brand intro and featured offers.
- ☕ Products Page – Displays all products dynamically fetched from Supabase with category filtering.
- 🍩 Menu Page – Detailed menu section for drinks and desserts.
- 🧭 About Page – Describes the purpose and vision behind the project.
- 📞 Contact Us Page – Simple form for users to get in touch.
- ⚙️ API Integration – Data fetched dynamically using Axios and Supabase API.
- 🎨 Responsive Design – Built with Bootstrap for full mobile and desktop responsiveness.
- ⚡ SPA Navigation – Smooth page transitions using React Router without page reloads.
| Technology | Purpose |
|---|---|
| React.js | Frontend UI development |
| Bootstrap 5 | Responsive layout and styling |
| Axios | API data fetching |
| Supabase | Backend and database |
| React Router | SPA navigation |
# Clone the repository
git clone https://github.com/abdoo-ahmed/Donuts_WebMaster
# Navigate to the project folder
cd Donuts_WebMaster
# Install dependencies
npm install
# Start the development server
npm run dev
---
## 🧩 Folder Structure
src/
┣ About/
┣ Categories/
┣ ContactUs/
┣ Context/
┣ Home/
┣ Images/
┣ Layout/
┣ Menu/
┣ Navbar/
┣ Products/
┣ App.jsx
┣ index.js
---
## 🔗 Live Demo
👉 View the Live Website : https://abdoo-ahmed.github.io/Donuts_WebMaster/