h-unique245/kfc-clone

This was a collaborative construct week project at Masai School. Goal behind the project was to create a full stack clone of the KFC website as close as possible to the original. This project was built by a team of 4 developers in 5 Days.

KFC (Kentucky Fried Chicken) Clone [Eat-More]

• Click Here to view the deployed website.

This was a collaborative construct week project at Masai School. Goal behind the project was to create a full stack clone of the KFC website as close as possible to the original one with all the major functionalities of this website, such as Authentication, Landing Page & Food Gallery, Menu, User Cart, Checkout, Payment Gateway. This project was built by a team of 4 developers in 5 Days.

Team

---

• Hemant Aher (Team Lead)
• Jyotiranjan Mohanty (Team Member)
• Md Monish (Team Member)
• Rahul Badade (Team Member)

Information about KFC

KFC (Kentucky Fried Chicken) is an American fast food restaurant chain headquartered in Louisville, Kentucky, that specializes in fried chicken. It is the world's second-largest restaurant chain after McDonald's. KFC was founded by Colonel Harland Sanders, an entrepreneur who began selling fried chicken from his roadside restaurant in Corbin, Kentucky. By branding himself as "Colonel Sanders", Harland became a prominent figure of American cultural history and his image remains widely used in KFC advertising to this day. KFC was one of the first American fast-food chains to expand internationally, opening outlets in Canada, the United Kingdom, Mexico and Jamaica by the mid-1960s.

References

---

• Images: kfc.com
• Content & Data: kfc.com
• Icons: React Icons
• References: MDN Docs | Express JS | Mongo DB

Tech Stack

• Frontend

  • HTML 5
  • CSS 3
  • JavaScript
  • React JS
  • Chakra UI
  • Redux JS

• Backend

  • Node JS
  • Express JS

• Database

  • MongoDB

• Other Tools and Libraries

  • NPM
  • Firebase
  • React Icons
  • React Slick
  • Git

Features

---

• Authentication
  • Mobile number authentication using firebase authentication
  • User authentication using express JS and mongo DB
• Landing Page & Food Gallery
• Menu
• User Cart
• Checkout
• Payment

Glimps of project

---

• Homepage

• User signup

• User sign in

• Menu page

• Cart Page

• Checkout Page

kfc-clone's Issues

Home Page - Navbar ( Day-2 )

• Navbar logo
• Menu button
• Deal's button
• Sign-In button
• Cart button
• Carousel image

Create a button that will automatically detect the location of user

Make a button that will recognise the user's position and display a map of it automatically.

Create the search bar for find KFC store

Create a search engine to locate KFC restaurants with working GPS coordinates and a map showing their locations.

Home Page - Body ( Day-3 )

• Highlighted content
• Body
• Feed's

Bugs in the homepage and footer should not be fixed

Make a new page called About all that contains the KFC store's footer and information.

Footer should not be fixed at the button.

Final review of the newly added features

Final testing of any new features, confirming their usability, and making any required tweaks.

Add a Page Loader to the Web Page

create a browse categories API, then deploy it to a json server.

menu page day5

• pending works
• code review
• helping to members

Payment Page CSS For Mobile Screen

• Payment Price Media query
• Delivery Address Media query
• Payment Method Media query

Add more components to the Home Page

Make the Find KFC Store Page Responsive and ensure that every functionality is functional.

Home Page - Footer ( Day-4 )

• Feed's content
• Feed's Slideshow
• Menu
• Footer links

Day-05-fp05_315

• All the functions should working
• working more on a User interface
• working on more work if have some time

Improvement In Cart And Payment Page

• Improvement In cart Page
• Improvement In Checkout Page
• Handling Other Issues

SignUp

• Heading of Signup
• Mobile number input
• Signup buttons & Some headings

Home Page - Testing ( Day-5 )

• Add links
• Sanity checks
• Merge

Payment Page Day-4

**Payment Page Structure and CSS **

• My Payment Component
• Price Component logic

Add Set Location Feature

Create a component that will display the summited location while highlighting the city at the top of the navbar.

Work on the CSS and fix the buttons on the deals page.

Update the CSS and work on the deals page's buttons.

SignUp-UI

• Signup With mobile and Gmail accounts
• Input boxes
• dynamic fetching signup function
• Otp will go to the mobile

menu page- day4

• fetching data
• mapping the data
• adding product cart

Cart Page Day-3

Cart Page logics and CSS Media queries

• My Cart Component logics and CSS Media queries
• Item Component logic and CSS Media queries
• Add On Component logics and CSS Media queries

Make All Pages Responsive

Make the "About" page responsive and make sure the CSS is working.

Create new pages

Create a KFC store locator page that displays all of the stores in that certain area. Execute the layout.

Create new pages:

-Find KFC Store
-About

Payment Page Day-5

Payment Page logic and CSS Media queries

• My Payment Component logics and CSS Media queries
• Price Component logic and CSS Media queries

menu page- day3

• creating two components
• filters and state component
• added react-scroll library
• giving links

Cart Page CSS for Mobile Phone

• Media Query For Cart Card Component
• Media Query For Cart Items Component
• Media Query For Entire Cart Component

Day-04-fp05_315

• Login Heading
• Login Inputs
• Buttons
• Dynamic Login function
• Login Should According to the Signup

Cart Page Day-2

**Cart Page Structure and CSS **

• My Cart Component Structure
• Item Component Structure
• Add On Component Structure

menu page -day2

• creating card for products.
• adding image to card
• description