Clone of Theory.com including Frontend & Backend
Hello Reader’s, this is Abhishek, welcoming you to a new post, today I will be talking about our third team project in Masai School which is the extension of our second project i.e the clone of the Theory.com website. So in this project, we have worked on the backend part and also added some new features on the frontend side of our previous project clone of Theory.com in just 6 days as a part of our curriculum’s Unit-4 project evaluation. This blog is all about what are all things we used? how we did it? what challenges did we face? and what were our key learnings?
GitHub Repository Link : https://github.com/shuklabhisekh/Backened_Of_Theory_Clone
Project Deployed Link : http://ec2-13-127-17-86.ap-south-1.compute.amazonaws.com:5000/
Used Technology : EJS, CSS, JavaScript, MongoDB, Express, NodeJS.
New Features : Authentication, Login confirmation, Search Functionality, Payment Integration, Order confirmation.
Team Members : Shilpa, Ashiq, Vikram, Sanket, 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 :
This is the home page of our website, where users will first land and will proceed to other pages, at the navbar which is present on all pages, the user can create an account if he/she is a new user on this website by clicking on Sign In button.
- Sign In/ Log In page :
This is how the Sign Up/Login page will look. Users can create an account if he/she is a new user by filling create account details or if the user already had an account he/she can Log In by Signing in.
When a new user will register he/she will get an OTP on his registered email address. After filling the OTP in the required OTP box. The user will land on the Login page from where the user can sign in and move further to the homepage.
When the user will Login with the admin credential he’ll/she’ll land on the admin page. From the admin page, the user can check the details of all the products and can add, update, delete the product as per the requirement. On clicking the sign-out button present on the admin page it will land him/her on the homepage.
- Women’s, Men’s & Accessories Page :
In the navbar of Homepage if the 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 products 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 the sort button which is present on the top right corner of this page
In the navbar of Homepage if the 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 products such as Pants, Jackets, Sweaters, and others.
In the navbar of Homepage if the 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 :
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 appear when the user will click on any of the products from the homepage, men’s page, women’s page & accessories page. From this page, the user can add the product to the cart by clicking on Add to Bag button.
- Cart Page :
This is the cart page where user can see all the product that he/she has added to 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 has which will give the respective discount according to the promo code on the Total Price of Order Summary. The user can then proceed to the Checkout Page by clicking on CONTINUE TO CHECKOUT button.
- Cart Empty Page :
This is the cart page when it is empty. When the user has not added any products to the cart and he/she go on the cart page by clicking the cart icon which is present in the navbar then this is how it will look.
- Checkout Page :
This is the checkout page where the user can see all the details of the product he/she has added to the cart and the total price.
After confirmation of the total price when the user will scroll user will see this part of the page where the user can fill in his/her Address detail where he/she want his/her product to be delivered.
After filling in the Address detail when the user will scroll further he/she will see this part of the Checkout page which is the payment part. For completing the payment process the user can click on PAY AND PLACE ORDER which will take the user to the Payment page.
- Payment Page :
Payment Gateway is one of the new features that we added to our project. For payment gateway, we have used Paytm payment gateway where users can pay the amount from different provided methods. After successful payment he’ll/she’ll land on the order confirmation page.
- Order Confirmation Page :
This is how the Order Confirmation page will look which will show the detail of user ORDER NUMBER & CONFIRMATION NUMBER. The user can also print the Order detail by clicking on the print button which is present at the bottom of the page.
The user needs to click on the print button to get the final print of the order details.
The user will also get a mail regarding the order confirmation on the respective email id he/she filled while the checkout procedure.
CHALLENGES WE FACED :
- Figuring out bugs and feature implementations.
- Write readable code so the other person can figure out what is happening and help with the troubleshooting with ease.
- Select what features we can implement with the time frame in mind.
- Collaborating remotely via zoom and having clear communication among the teammates.
KEY LEARNINGS :
- A better understanding of Authentication and authorization.
- Working in a team efficiently and listening to teammates so collaboration can be seamless.
- Better interconnect and reusability of code.
- Figuring out different and optimal ways to achieve a feature.
CONCLUSION :
In 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. But this time we had the same team and we already had the spark of being in the finals as in last construct week we got eliminated in the finals of the Construct week. So this time with extra motivation and the taste of losing in finals, each member has pushed their limits to complete the work in a given time constraint, and also we added some other extra features such as print of order details & admin page. We have successfully cloned theory.com along with the backend part in just within 6 days. Overall it was a great teamwork experience and a week full of learning. Although this time we are quite confident that our work will speak louder than our words but still had to speak as we have to give a presentation of our project. Fingers are crossed and waiting for the result.
PS: Adding this part after the announcement of the result. I’m very excited🤩 about the output of our intense hard work. Our project won the “1st Prize” among all the batches. Before ending I just want to refrain from the words of Mr. Guri “Haara wahi hai Zindagi mein, jisne lada nhi”. So keep working and keep 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.
