Nykaa-fashion clone

This is our first project at masai school construct week after learning HTML,CSS & JAVASCRIPT Here is the link of our app live on netlify https://keen-clarke-eefd2c.netlify.app/

Contributors

The main Contributors for this project are

• Sourav Das
• Aashish Kumar
• Thirupathi Challa

Tech Stack

• HTML
• CSS
• Java Script

Description

• 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. Clicking on Account will display an animated popup box for login and sign up. Clicking on Cart will display a cart window where all the products added to cart will be shown.

• Product Page(Women):-

This is one of the product pages 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 Brand, Occassion, Size, 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 every thing related to that product. Like the available sizes, delivery date checked by PINCODE. Also below the main product the user will see products from the same brands. Clicking on the Add To Bag Button will add this product to the cart.

• Cart Window:-

Here all the products added to the cart will be shown. At the bottom there is total price of the cart and the proceed to buy button. Clicking on the button will redirect the user to the Payment Page .

• Payment Page 1:-

This is the first payment payment page of our webside. Here the user has to fill in his name, shipping details etc. After the user fills those details Saved Address & Edit Address options will be shown in place of Enter Your Address. A Proceed to buy button will show up in Price Summary. Clicking on that will redirect the user to the Payment Page 2.

• Payment Page 2:-

This is the second payment page where the user has to select a payment option. After the user has filled all the details and clicked on Pay Now button A pop up will show saying continue shopping.

• After Payment:-

After the payment has been done a pop up and image will be shown. Clicking on this Continue with your shopping will redirect the user to the Landing Page.

Roles & Responsibilities:-

• The Landing page is done by Aashish.
• The women page, Product Details page and the Payment pages are done by Sourav.
• All the other Product pages except the Women page is done by Tirupathi.

Challenges:-

We had faced a lot of issues in cloning the website. First of all we were not used to reading the code of other people. I was working on the cart functionality which was in Landing page done by Aashish. There we faced some issues. We also sometimes had to fix some issues related to merging our code through github.

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 a project and execute that.