Cloning Of ZARA Website
Hello Everyone, First of all I would like to introduce our team, We are a team of six members, Myself Hitendra and in our team, we have Divyansh, Babli, Rohit, Anjum and Himanshu.
We are a students of Masai School from batch FT-Web-14. Currently we are in Unit-4. The last week of Unit-4 is a Construct Week where group of 5–6 members are allotted by operational team for making projects based on the whatever knowledge we grabbed from Masai till now. So in Unit-4 we learn about backend (NodeJS, ExpressJS, MongoDB). On the basis of this knowledge we have created a clone website of ZARA.com
We are very much Thankful to our Training and Support Team of Masai for giving us this opportunity to work on real life applications which gives us more basic knowledge regarding web applications how they were created and there functionalities.
Project Description :
Zara is one of the largest international fashion companies. It belongs to Inditex, one of the world’s largest distribution groups.
The customer is at the heart of our unique business model, which includes design, production, distribution and sales through our extensive retail network.
As a team of 6 members we have decided to distribute major parts accordingly to the different sections of our website. I worked on the Verification of Users (Email and OTP) to purchase a product from our website. Anjum worked on Product Cart to Summary Section (Filter and Sort functionality, storing users details in the database like address etc.), Divyansh worked on all the Products Section (from creating database to fetching all the products on the website, storing users data into the database and their authentication also created CRUD operations and Schemas), Babli worked on Sign-up and Login Functionality(Storing new users data to database and Fetched all the users data from database for login functionality) and Rohit Worked on collecting all the products data from the website and storing it into the database and Himanshu worked on the Authorization of the users. So within 6 days we have completed this project.
Overview of our Project :
Tech Stacks Used : -
- HTML
- CSS
- JavaScript
- NodeJS (NPM Packages :- nodemailer, bcryptjs, cors, jsonwebtoken, express, mongoose, dotenv, )
- ExpressJS
- MongoDB
- Homepage :-
In below image you can see the homepage our website. The landing page displays the navigation bar which contains menu bar , search button , helps , Login, Cart. We tried our best to clone same as original website.
2. Login and Create Account :-
In below image you can see Login and Create Account page. We used some NPM packages for Sign-up and Login Functionalities.
3. Menu Section :-
We have added Menu section on the top left corner, if you click on the menu it will show the categories and subcategories of that section.
4. Product Page :-
We have added products from original website and categorized them into different section. we have also added filter and sort functionality on product page and we are fetching all the products data from our own API.
5. Cart Section :-
When we add some products using Add to Bag button, the products you have chosen, will showcase into the Cart Section.
6. Shipping Method Page :-
In this section user can choose shipping method as In store Pickup and Home Delivery.
7. Payment Method :-
We have added different Payment methods, users can choose according to there preference, and after selecting any method it will redirect users to final payment page. Users have to provide OTP to verify their order which they received on their registered Email address.
8. Summary Page :-
On Summary page you can see the details of user like Name, Delivery address etc. and also the items they wanted to buy, you will received an OTP on your registered Email and you have to verify the OTP, after this your purchase will be completed and Pop Will shown.
Thank you, for reading till the end. Also we are very much grateful to have this opportunity from Masai School.
