Collaborative Project At Masai School “GIVA Jewellery Clone”.

Before, I start my blog writing on the clone of the Giva website, I want to thank Masai School for this great opportunity and for providing this great platform to enhance my coding and life skills. We have tried our level best to make use of our so far journey and the knowledge that we have gained so far at Masai School to come up with our first project. Getting Started… It was a challenging journey for me and all my team members as we have to complete it within the time of construct week, so we faced different challenges like it was our first project and we did not have any prior experience to working in a team and also we did not know how to manage everything within the time period. So we started with the planning and studying the website, then we distributed the workflow , roles and responsibilities and with great collaboration, we all managed the work.

Project Details -

We had to make a clone of the GIVA Jewellery website. GIVA Jewellery, known as Jewellery products and it is an Indian manufacturer and multi-level marketing company specializing in Jewellery products. A fields, creators of Proactive, started the website recently and sold it a year later. They relaunched the Jewellery as a multi-level marketing firm.

We have tried our best to clone the offical Giva website.

Contribution of our team -

Mukul - Add To Cart Page , Checkout Page , Payment Page , Address details page.
Om Prakash Gupta - Login page , SignUp page , Forget Password Page and My account page.
Sahil kumar - Product page , (Navebar and Footer) and product proceed page.
Pawan - Landing Page (Home Page).

Tech Stacks used :-

HTML : 45.70% CSS : 30.60% JavaScript : 40.70%

Overview of My Giva Website:-

Home Page :-

This is the main landing page of our website. Here clicking on any option of the Navbar will redirect the user to the respective Product Page. It is fully functional and responsive.

Home Page.

Log-in Page / Create-Account page / Forget-Password page / My-account page :-

Here, we have a Log-in window that slides from the top, when the Existing User click on the Log-in button( near to bag button) in the top-right of Navbar, User go to login page, here we integrate User authentication to check whether User email and password match with details existing in the database or not.

Create-Acoount page :-

If, New User come in our website, then firstly User create his/her account by clicking on the Create account button (in the middle of log-in page) then User go to Create Account page, where User fill his/her details like first name, last name, email and password after clicking on Create button User create his/her account successfully, then User see his/her account deatils in the my account page.

If User forget the password then simply User click on the forget password button(in the log-in page) then User Create new password.

Search bar :-

When the user clicks on the search button this area will pop up. Here Users can search for any of the products present on the website.

All Products page :-

This is one of the product pages of our website. In this user gets a regular update about new deals and products. Also, the user can filter the products according to name, category, and price. Clicking on the Add To Bag Button will add products to the Bag.

All Products Page

Regimens page

Your Bag Slider :-

Here all the products added to the cart will be shown. At the bottom, there is a Checkout button. Clicking on that button will redirect the user to the Checkout Page.

Bag

Checkout Page :-

Here the users can increase, decrease the quantity of the product and can apply discount coupons.

Checkout page

Payment Page :-

Here the users can add their payment details, address and can create their account.

Payment page

Order confirmed Page :-

Order placed

The tools used for Collaboration :-

GitHub Desktop & GitHub Browser for code collaboration.
Slack, WhatsApp and Zoom for communication.

Our Team Members :-

Madhuri Patel.
Mukul.
Om Prakash Gupta.
Pawan Bhardwaj.
Sahil Kumar.
MD Naiyer Ajam.

Learnings :-

We all became proficient in reading the code of team members. How to work and communicate with a team. How to be more efficient and productive at the same time. Here I get to know how the team works, how to keep cool even under pressure conditions, how to keep myself and my teammates motivated throughout the ups and downs. At last, I would like to thank our mentors and my team members for their support & guidance during the project.

mukulsomukesh/GIva