Masai School Construct Week Project

Prajwal Jaiswal
5 min readMay 8, 2022

--

Max Fashion Cloned Website

Hello everyone, this is Prajwal Jaiswal, and on behalf of my team “Legit Coders”, I’m writing this blog to brief the audience about our project. We‘ve built a cloned website of Max Fashion with some of its basic functionalities. This overall project was a part of our construct week at Masai School.

About Project

Max brings international fashion and value to discerning shoppers in over 325 stores across 16 countries.
Launched in the UAE in May 2004, Max was established in India in 2006, opening its first store in Indore. Now, Max India has a reach that extends to over 60 cities. Boasting a loyal customer base of over 5.5 million, Max is the most profitable value fashion format in the region.
Max offers apparel, footwear, and accessories for the entire family — women, men, and children. Customers can expect a world-class shopping environment stocking the latest in international fashion from around the globe, as well as Max’s label of in-house designs in carefully chosen color palettes. Shoppers enjoy great prices on an excellent range of over 3,000 styles every season, in brand new designs, silhouettes, and fabrics.

The journey

The journey so far was challenging and fun at the same time. The challenging part was collaborating with team members and accomplishing the goal anyways as the team had all the new faces. But, the fun fact is we got comfortable with the first day of conversation. The goal was to complete the project within 6 days and we did it successfully.

Project Plan

We scheduled everyday morning scrum at 9:30 where we all showed the progress of our work and planned for the next objective with a respective deadline. For any doubt or tech-relevant query, each of us tried to get it solved via Google and Stack-Overflow and then discussed it with the team members.

Team

We were a team of 2 members including me and we named our team “Legit Coders”. Each of us has taken equal responsibilities and showed our best labor in terms of task completion and communicating effectively.

Team Members & Contributions

Prajwal Jaiswal -LinkedIn
1.
Worked as Team Leader and Managed the GitHub
2. Developed the landing page, navbar, footer, men, girls, and boys page for the project.
3. Modified each page with some stylings and functionalities.
4. Designed a carousel slider for each page.

‣ Shubham Rakhonde -LinkedIn
1. Worked as Co-leader and Managed all the meets for the project.
2. Developed the
women, women-product, basket, and checkout page with functionalities that include Add to basket, remove from the basket, etc.

Tech Stacks

  1. HTML [Structuring]
  2. CSS [Styling]
  3. JavaScript + ES6 [Functionality]
  4. Bootstrap [Modals & Carousels]

Overview of our Project

» Sign-up & Login Functionality

This functionality includes 4 different modal popups which take the user’s mobile number at first and after validating it, the user’s email is taken for the linking but this process can also be skipped and moved to the last process where the user needs to input his/her First and Last name and they’re done with everything now.

Enter your mobile number
Validate your OTP received
Link your email
Enter your First & Last Name
Final Navbar with your welcome

» Landing Page

The overall landing page includes a navbar with Login & Sign-up functionality and a basket with a counter that show the number of products that is present in the cart in real-time. Along with the navbar it also has a footer with some common links via which the user can land on their desired page.

Landing Page with Navbar & Footer

» Women Page

The key highlight of this page is the Shop by Category section via which the user can directly Land on the respective product page.

Women Page

» Boys Page

This page is similar to the women’s page but the visible data is concerning the boy’s page.

Boys Page

» Women Products Page

This page gives users a variety of products to choose from with the “Add to Basket” and “Add to Wishlist” features.

Women Products Page

» Basket Page

This page will show all the products that had been added to the basket for shopping, where “remove-product” functionality has also been integrated. Apart from that “MASAI10” is the special coupon code that’ll give the user a flat discount of 10%.

Before adding the MASAI10 coupon
After adding the MASAI10 coupon

» Checkout Page

This is our final page where the user can fill up the required details in respect to making their payment successful and buying the product.

Checkout Page
Payment Successful Alert

< — — — — — — — — — — Links & Acclaim — — — — — — — — — — >

GitHub Repo:
https://github.com/J-Prajwal/max-fashion-clone

GitHub Site Deployment link:
https://j-prajwal.github.io/max-fashion-clone/

Netlify Link:
https://maxfashion-clonelc.netlify.app/

Presentation Video Link:
https://drive.google.com/drive/u/0/folders/1_3n_BeYLns1v98uMqRjsZlgA6TS1J5ML

--

--