constructive-project-3

Snapdeal Clone

This is the project at masai school construct week after learning HTML, CSS, JAVASCRIPT & nodejs. Here is the link of our app which is live on vercel

Contributers

• Linkan Kumar Sahu
• Kamlesh Sunil Jadhav
• Soumya Subrat Moharana
• Vivek Kumar
• Prince Kumar

Tech Stack

• HTML
• CSS
• Javascript
• nodejs

Description

Home Page

This is the main landing page of our website. Here clicking on any products will direct the user to the respective Product Page. Clicking on Account will display an animated popup box for login and sign up. To add product in the cart user need to login first which is the part of authentication where user give his mail address and gets a OTP to signin which is done by using nodemailer.

Product Page

This is the products page of our website. On the right side all the products with their respective name, brand, price will be shown. On the left side we have filters. There are many filters like filter by Price, rating, and also we can sort by price. All of this filters are fully functioning. Clicking on any product will redirect the user to the Product Details page of that product.

Product Details Page

After clicking on any of the products this Product Details Page will be shown. Here the user can see information about the product. Like the available sizes, delivery date checked by PINCODE. Clicking on the "Add To Cart" Button will add this product to the cart. And clicking on "Buy Now" button user will direct to Cart Page

Cart Page

Here all the products added to the cart will be shown. At the right side there is total price of the cart and the proceed to buy button. We can also increase and decrease the quantity of the products. Clicking on the "Check Out" button, will redirect the user to the Address Page .

Address Page

In this page the user has to fill in his name, address details etc. At the right side of the address details form user can see the products as well. A Proceed to buy button will show up in Price Summary. Clicking on "SAVE AND CONTINUE" will direct the user to the Payment Page.

Payment Page

This is the payment page where the user has to select a payment option. After the user has filled all the details and clicked on "Pay" button A pop up will shown to enter the OTP, and after putting currect OTP the user will redirect to the Home Page

Role of Responsibility

• The Landing page is done by Vivek and signup part is done by Soumya. But in the signup the backend part is done by Linkan
• The Product Page, Product Details Page and the Cart Page are done by Linkan. And backend code for all products are done by Vivek.
• The Header, Footer and Address page was done by Kamlesh
• The Payment Page OTP page is done by Prince

Challenges

We had faced a lot of issues in cloning the website. First of all connecting the backend to forntend was bit chellenging but after all going through many documentation we find the solution. We also gets so many syntax error every day, for this purpose we had two meeting session everyday where we all share our problems with each other to find solution. By this we all get idea about how much work is left and how much time we needs to give for completing the project.

Learning

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