/Nature-s-Basket-Clone

Cloned Nature's Basket which is an Indian grocery delivery chain of retail stores focused in gourmet food. This is our collaborative project during project week in Masai School in Unit-3.

Primary LanguageJavaScript

Project-Nature-s-Basket-

Hi World !🌏 We are students of Masai School from Web17 batch and we presenting our project- clone of Nature's Basket, built during construct week of Unit-3.

Details : 🔭

Nature's Basket is an Indian grocery delivery chain of retail stores focused in gourmet food. It has a range of organic food, imported ingredients and exotic foods. The company is headquartered in Mumbai, India and has multiple stores in cities like Mumbai, Bengaluru, Pune and Kolkata. It was acquired by Spencer's Retail Ltd, a RP-Sanjiv Goenka Group company in May 2019 from the Godrej Group in an all-cash deal.

🚀 The link for the same is here : https://nature-basket-clone-488ad1.netlify.app

Our Team Members 👨‍💻

Pages & Features 👇

  • Home Page: Nav Bar with drop downs, carousel, products and offers slider.
  • Login/Signup: User authentication to check whether user email and password match with details existing in the database.
  • Dynamic Navbar: Created navbar with dropdown of categories, reference button for wishlist and cart visible on all pages.`
  • Book Store Visit: User can choose to visit store and book date and time slot.
  • Product page: User can go to different product page and can also apply sorting or filter, products can be added to cart and wishlist also.
  • Wishlist: User can see here all the item added to wishlist and can add product to cart.
  • Cart: User can see all the items here and can also remove products from the cart.
  • Address Details: Users have to fill their delivery address details.
  • Select Slot: User can choose the delivey time slot.
  • Order Review Page: User can review thier order and proceed further.
  • Payment Page: Users can add their payment details.
  • Order Successful: Once order is placed, confirmation will be shown and user can continue shopping further.
  • Additional Features: Kept the branding, fonts, favicon, colors and titles consistent throughtout the whole site to give a feel like the original site.

Tech Stack

  • HTML5
  • CSS3
  • JavaScript
  • (DOM Manipulation, Local Storage)
  • BOOTSTRAP

Screenshots :

Home Page

Home Page

Category DropDown

Category dropdown

Footer

Footer

Login/Signup

Login/Signup

Book Store Visit

Book Store Visit

Fruits & Vegetable's Page

Fruits & Vegetable's page

Health items page

Health items page

Grocery page

Grocery page

Product Description Page

Product Description Page

Cart

Cart

Wishlist

Wishlist

Address

Address

Delivery Slot

Delivery Slot

Review Order

Review Order

Payment Page

Payment Page

Order Confirmation

Order Confirmation

Roles & Responsibilities :-

  • GitHub is managed by Prem, Aditya and Shivam.

  • The Landing Page and footer is designed and functioned by Aditya.

  • Navbar, login/signup page is designed and functioned by Shivam.

  • Fruits & Vegetable's page, Health items page and Grocery page is designed and functioned by Prem.

  • Cart page, Wishlist and order confirmation is designed and full functional by Pallavee.

  • Book delivery slot and book visit store is designed by Pratik.

  • Order review, Prodduct description and Payment page is designed and function by Ashish.

Learning :-

  • We all became proficient in reading the code of team members.

  • Our code writing style became cleaner as we had used ES6 to write code and used import export so that code become well structured.

  • We learn about many CSS properties that we didn't know before.

  • Our skills in JavaScript and DOM manipulation became better.

  • Learned how to use Bootstrap libraries.

  • We all learned how to plan a project and execute that in a limited time frame.