My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Cloning of Bella Vita Organic website, Construct Week Project  Masai_School

Cloning of Bella Vita Organic website, Construct Week Project Masai_School

vamsi chamarthi's photo
vamsi chamarthi
·Dec 19, 2021·

3 min read

Hello Readers,

I hope all of you are doing good and safe. I am happy to share with you all that I along with my Team members built cloning of the Bella Vita Organic Website as the part of Unit-3 Construct Week Project. This blog is all about our journey and the challenges we faced while building the project. We build this website in just 6 days.

Team Members & Their Contribution

1. Suman Munde - Landing Page

2. Vaibhav Darvekar - Product Page

3. Mujaffar Husain - Cart & Description Page

4. Chamarthi Vamsi - Checkout & Payment

Tech Stacks

Frontend:

  1. HTML --> used to build the structure of the website

  2. CSS --> used for styling part.

  3. Javascript

  4. Bootstrap --> used for sliders and external forms

  5. jQuery

Backend:

  1. Masai_school/api-moker --> We have used masai api-moker server for Login & Signup authentication.

  2. Local Storage --> We have used local storage for storing cart & checkout-related items.

These are some snapshots of our website

Landing Page

image.png

Interesting Sliders

image.png

image.png

Footer Part

In the footer, customers can able to find many options to know more about our website and we have provided a Whatsapp icon from here Customers are able to send any feedback to us directly.

image.png

Create Account Page

The user has to fill in the details for creating an account. image.png

Login Page

If you have an existing user then you need to enter registered credentials in the login form.

image.png

Once you have logged in successfully your name will appear on the right side

image.png

Product Page

On the products page, we have implemented different grid models user have to click on any grid button to change the grid model. we have implemented different sorting like price low to high, price high to low, based on categories like skin, hair, body, and face, etc.

Grid of single Column

image.png

Grid of 2 Columns

image.png

Grid of 4 Columns

image.png

Cart Page

On the cart page, users can able to add or delete any product

image.png

Product Description Page

On this page, you can able to get more information about a particular product.

image.png

Checkout Page

On the checkout page, you need to enter your address, shipping method and payment mode after that you will be redirected to the payment page.

image.png

image.png

Payment Page

image.png

Sucess Page

Once your payment is completed then you will get the confirmation message. On the popup, we have provided a home button to get back to the landing page.

image.png

Outcome and important learning from the project:-

This entire journey of making the project was awesome. We learned lots of things by applying to the real website and it gave us a lot of confidence. While making this project we have learned so many new things. also, we have faced so many issues like time management and we will try to improve it in an upcoming project.

GitHub link: github.com/chamarthivamsidev/Bella_Vita_Org..