KFC Clone

English, Bengali and Hindi

I built a food ordering site clone in Vue 3 to practice modern frontend patterns. The app features a responsive menu, real-time cart updates, delivery address selection with a map, and support for three languages (English, Bengali, Hindi). It uses Vue I18n to switch languages instantly, and localStorage to persist the cart and delivery address across sessions.

Vue 3TailwindCSSVue I18nLeafletViteNetlify
View on GitHubCheck it out
On this page

Feature Highlights

Browse products, add to cart, and view order summary

  • Categorized product menu for easy browsing
  • Add items to cart with instant price updates
  • View cart, update quantities, and manage items
  • See order total and proceed to checkout

Stack

  • Vue 3: Progressive JavaScript framework for building the reactive UI.
  • Tailwind CSS: Utility-first CSS framework for responsive design and styling.
  • Vue I18n: Internationalization plugin for translating content between languages.
  • Leaflet & Nominatim: Map library for address selection with OpenStreetMap's geocoding API.
  • Vite: Build tool for fast development and optimized production builds.
  • Netlify: Hosting with continuous deployment and global CDN.

Use Cases

  • Learning Vue 3 with real-world patterns like i18n and cart management
  • Reference for building multilingual web apps with language persistence
  • Example of integrating maps and geocoding for location selection

How to Use

  1. Clone: git clone https://github.com/dhruba-datta/kfc-clone
  2. Install deps: npm install or pnpm i
  3. Start dev server: npm run dev
  4. Build: npm run build → preview: npm run preview
  5. Deploy (Netlify): drag dist to Netlify or connect repo.

Related projects

Optify project cover
Web
Optify

AI transformation company site with shader visuals, an MDX journal and a build-time AI-search layer.

React 19SEO+3
Operavo project cover
Web
Operavo

Voice AI for real estate: answers every call, qualifies the buyer and books the showing on a live calendar.

Next.js 16Voice AI+4
SEG Marketing project cover
Web
SEG Marketing

Industry landing pages for legal, healthcare and restaurants, with n8n lead routing and Calendly booking.

React 19n8n Automation+3
Let's Connect

Building a multilingual e-commerce app?

I build responsive ordering and shopping sites with Vue or React, multilingual support, and browser storage for persistence.

Dhruba Datta

© 2026 | All rights reserved