Clone of Theory.com using pure HTML, CSS & Advanced JS

Hello Reader’s , this is Abhishek, welcoming you to a new post, today I will be talking about my second team project of Masai School i.e clone of Theory.com website. We have developed the clone on Theory.com in just 7 days as a part of our curriculum’s Unit-3 project evaluation. This blog is all about what are all things we used? , how we did it? , what challenges did we face? , and what was our key learnings?

This is About Page of Theory.com where you can know more about the website and can connect with them.

GitHub Repository Link : https://github.com/shuklabhisekh/theory-clone

Project Deployed Link : https://theory-rho.vercel.app/

Used Technology : HTML, CSS, JavaScript/ES6, Local Storage, API, DOM & Media Queries.

Team Members : Shilpa, Ashiq, Vikram, Sanket, Ritu, Abhishek

A GLIMPSE OF PROJECT -

Theory is a New York-based men’s and women’s contemporary fashion label which sells clothes and accessories. The brand currently has 221 retail locations and global sales approaching $1 billion in 2014. The company’s headquarters and flagship boutique are located in Manhattan’s Meatpacking District.

• Home Page :

1.1 Home Page

This is the home page of our website, where users will first land and will proceed to other pages, at navbar which is present on all pages, user can create account if he/she is new user on this website by clicking on Sign In button.

• Sign In/ Log In page :

1.2 Log In/ Sign In Page

This is how Sign Up/Log In page will look. User can create account if he/she is new user by filling create account details or if user already had an account he/she can Log In by Sign in.

• Women’s, Men’s & Accessories Page :

1.3.1 Women’s Page

In navbar of Homepage if user will click on Women he’ll/she’ll land on land on this Women’s Page . Where the user can buy all the available women’s product such as Pants, Jackets, Sweaters and many others. You can also sort the product from high to low and low to high on this page by clicking on sort button which is present on top right corner of this page

1.3.2 Men’s Page

In navbar of Homepage if user will click on Men he’ll/she’ll land on land on this Men’s Page . Where the user can buy all the available Men’s product such as Pants, Jackets, Sweaters and others.

1.3.3 Accessories Page

In navbar of Homepage if user will click on Accessories he’ll/she’ll land on land on this Accessories Page . Where the user can buy all the available Accessories such as Shoes, Boots, Pumps, Flats & Sneakers, Bags, Hats, Gloves & Scarves and others.

• Product Detail Page :

1.4 Product Details Page

This is the Product detail page of the website which will show the details of the products such as name, price, colors, size and other details. This page will appears when user will click on any of the product from homepage, men’s page, women’s page & accessories page. From this page the user can add product to cart by clicking on Add to Bag button.

• Cart Page :

1.5 Cart Page

This is the cart page where user can see all the product that he/she has added in the cart and also they can also see the Total Price of the cart in the Order Summary. The user can also apply Pomo Code if he/she have which will give the respective discount according to the promo code on the Total Price of Order Summary. The user can then proceed to Checkout Page by clicking on CONTINUE TO CHECKOUT button.

• Cart Empty Page :

1.6 Cart Empty Page

This is cart page when it is empty. When user have not added any products in cart and he/she go on cart page by clicking the cart icon which is present in the navbar then this is how it will look.

• Checkout Page :

1.7.1 Checkout Page

This is the checkout page where user can see all the details of the product he/she has added in the cart and the total price.

1.7.2 Checkout Page

After confirmation of total price when user will scroll user will see this part of the page where user can fill his/her Address detail where he/she want his/her product to be delivered.

1.7.3 Checkout Page

After filling the Address detail when the user will scroll further he/she will see this part of Checkout page which is payment part. By completing the payment process the user can click on PAY AND PLACE ORDER which will take the user on Order Confirmation page.

• Order Confirmation Page :

1.8 Order Confirmation Page

This is how the Order Confirmation page will look which will show the detail of user ORDER NUMBER & CONFIRMATION NUMBER. If user still want to buy any other product user can click on Continue Shopping button which will land user on hompage from where he/she can buy products.

CHALLANGES WE FACED :

1. Selecting what features we can implement with the time frame in mind.
2. Collaborating remotely via zoom and having clear communication among the teammates.
3. Having a clear division of workload distribution.
4. Figuring out bugs and feature implementations.
5. Write readable code so the other person can figure out what is happening and help with the troubleshooting with ease.

KEY LEARNINGS :

1. A better understanding of ES-6, API, Import and Export concepts.
2. Figuring out different and optimal ways to achieve a feature.
3. Better interconnect and reusability of code.
4. Working in a team efficiently and listening to teammates so collaboration can be seamless.

CONCLUSION :

Build weeks at Masai are a challenge like no other and also the most fun part of the journey. You get a new team every time, getting to know different types of people and working in tandem with them. Again this time we made a great team, each member has pushed there limits to complete the work in given time constraint and was always present to help other team members. So completing this project was faster and more streamlined. We have successfully cloned all pages of theory.com along with 80% of all the functionalities in just within 7 days. Overall it was a great team-work experience and a week of full of learning.

Thanks a lot for being with me till here, I will meet you again in some other post, this is me Abhishek, signing off.