Masai Collaboration Project — DesertCart.Website Clone

Shivam Sharma
6 min readOct 3, 2021

--

Firstly, we would like to express our heartfelt gratitude to MASAI SCHOOL for giving us the opportunity to work on this project. We have tried our level best to make use of our journey and the knowledge that we have gained so far at Masai School to come up with our first project, that would never been a reality without the constant guidance and support of the faculty members and our mentors.

This is a brief description of the very first project which was made after completion of the second unit, @ Masai School for the Full-stack Web Developer Bootcamp.

[ PROJECT LINK: vsrathod39.github.io/desertcart.in_clone.io ]

It all began when I decided to become a full-stack developer amidst the pandemic where I was unsure how and what life’s going to be like in the future and at a point in time where many offline activities were converted to online with an optimistic mentality of taking human existence forward. It was somewhat at that point of time I joined Masai school for the full-stack web development program and now I’m on the verge of completion of its Second unit and yes obviously it was one of my great experiences ever.

Topics we have covered during Second unit

  1. Basic bash scripting.
  2. HTML basics and the box model approach.
  3. Styling a web page using CSS and the higher level layouts of CSS namely Flexbox and Grid.
  4. javascript basics using nodeJS, solving basic problems using operators, iterative loops, conditional statements, arrays, string, and objects.
  5. DOM manipulation using javascript.

And most important is Soft skills training for enhancing candidate’s communication skills, writing skills, and staying motivated and consistent throughout the well-defined strict curriculum.

This project was accomplished successfully due to the immense support and commitment from all respected faculty and my teammates.

And most important is Soft skills training for enhancing candidate’s communication skills, writing skills, and staying motivated and consistent throughout the well-defined strict curriculum.

This project was accomplished successfully due to the immense support and commitment from all respected faculty and my teammates.

Project description, the team, and the work spilled among the teammates:

TEAM — Together Everyone Achieves More As above, we understood the real meaning of TEAM and by following these rules we were able to do this project successfully.

We as a set of 4 members

Vikas Kumar(fw12_132)

Roshan Jambhulkar(fw12_031)

Ankur Mishra(fw12_039)

and myself Shivam Sharma(fw12_216) were given the task to clone the website desertcart.in.

Things that you will not find anywhere else you will find at desertcart. With over 100 Million products cataloged on the website being shipped from all around the world at a delivery speed previously unimaginable, desertcart pushing the limits of what can be achieved by merging bleeding edge technology and efficient supply chain management.

We, as the team decided to clone 6pages from this website, and each individual was assigned their specific task and the project was made by mutually collaborating via the distributed version-controlled system called git, and the development files were stored as repositories on the github.com website.

Roles & Responsibilities:-

Home page — Roshan Jambhulkar

Product details, Pricing page — Vikas Kumar Sign-up

Sign-in page, Sign-up page and Footer — Shivam Sharma

Pricing page — Ankur Mishra

Project Details:-

We had to clone the Desertcart.in website. It is an E-Commerce. We have tried to clone the pixel perfect website with the help of HTML,CSS and JAVASCRIPT. Here is a small Demo of our project:-

Tech Stack:-

JavaScript
HTML
CSS

Home Page :

The home page was built by Roshan Jambhulkar and this page is a highly resourceful page for a user who uses this website, user can move anywhere where he/she want to move such as sign in, sign up, cart, and products categories. the developer had to use lot of HTML for the great number of tags and over depth of the page, when it comes to styling the CSS was used and thus for enhancing the overall responsibility of the sheet DOM manipulation was done.

Pricing page :

The pricing page gave the client the flexibility to choose the desired plan according to their required time span of service and that makes the expenditure of a client to an optimum level. This page was crafted by Vikas Kumar and Ankur Mishra from our crew and they did it using HTML, CSS, and by using DOM manipulation. This page includes a filter option for the convenience of customers, where they can filter products by price.

Product details:

The product details page was built by Vikas Kumar and the intention behind this page was to give a better insight to clients towards a specific product that they were interested in. This page was made using HTML, CSS for styling, and DOM manipulation was done using the basic javascript codes.

Sign-up, Sign-in page, and footer:

The sign-up, sign-in, and footer page was built by Shivam Sharma (Me)and the intention behind this page was to give a better service to clients. Clients can create their accounts, to have better service. This page was made using HTML, CSS for styling, and DOM manipulation was done using the basic javascript codes.

Footnotes: All the images and icon links have been taken from the main website and some other internet sources and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce them without prior approval from the owner. The images and icons used here are just for illustratory purposes.

Challenges:-

We had faced a lot of issues in cloning the website. In merging cart data to cart side bar in all pages we faced some issues. But after sometime we are able to do it. We also sometimes had to fix some issues related to merging our code through git hub.

Learning:-

  1. We all became proficient in reading the code of team members.
  2. Our code writing style became cleaner as we had to think while writing code that other team member will be reading.
  3. We had to learn about many CSS properties that we didn’t know before.
  4. Our skills in Java Script and DOM manipulation became better.
  5. We all learned how to plan a project and execute that.

Source Code:-

vsrathod39.github.io/desertcart.in_clone.io

--

--