BetterKFC – Rebuilding KFC Pakistan with Next.js

What started as a UI experiment turned into a production-grade clone of KFC Pakistan — built with the latest tech stack, pixel-perfect UI, and a full admin panel.

---

🔥 Why I Built BetterKFC

I wanted to challenge myself to rebuild a real-world e-commerce experience — not just another to-do app. KFC Pakistan’s website felt like the perfect target:

• Real-time cart interactions
• Responsive design for mobile ordering
• Menu and variant complexity
• Authentication and order flow

---

⚙️ Tech Stack

• Frontend: Next.js 15 App Router, TypeScript, Tailwind CSS
• UI Kit: ShadCN UI with custom OKLCH-based design tokens
• State: React hooks with local state and cart context
• Backend: Mock API (future: Laravel API or Supabase)
• Hosting: Vercel

---

🎨 UI/UX Highlights

• 🔍 Fully responsive layout (mobile-first)
• 📦 Expandable menu items with add-to-cart flow
• 🛒 Interactive cart with quantity updates
• 🌗 Light/dark mode switch using custom --oklch CSS variables
• 🧑‍💻 Admin dashboard with order view and status updates

---

🧠 Dev Learnings

Building BetterKFC forced me to:

• Structure routes with Next.js App Router effectively
• Handle shared layout, modals, and protected admin areas
• Design a custom color system using OKLCH for better dark mode contrast
• Use ShadCN UI + Tailwind without losing design flexibility
• Implement reusable ExpandableCard, CartDrawer, and MenuGrid components

---

🛠️ Admin Dashboard (WIP)

A separate /admin route shows order tracking in table view with:

• Real-time status updates
• Order ID, items, and timestamps
• Designed to be wired up with Laravel or Prisma in future

---

📸 Preview

---

🔗 Live Link + Code

• 👉 Live Demo
• 🧠 Source Code

---

🚀 What’s Next

I plan to:

• Add full Laravel backend with order CRUD
• Integrate Supabase or MongoDB for cart persistence
• Add user auth with NextAuth or GitHub login
• Deploy real-time order tracking using Pusher

---

💬 Final Thoughts

This was more than a clone — it was an exercise in design systems, component architecture, and scaling UI for real-world use. Rebuilding BetterKFC gave me the confidence to take on larger e-commerce systems and client projects.