Cloning of SHEIN WEBSITE
Hello Readers,
Firstly we are welcoming you to the our First group project in our 1st Construct Week of Masai School.
Here we are going to share our journey and our learning experiences In this First Construct week project.
This Project is our First construct week project an we give a name to our project called SHEIN Preoject.
I hope you will enjoy the reading….
SHEIN is an international B2C fast fashion e-commerce company. The company mainly focuses on women's wear, but it also offers men's apparel, children's clothes, accessories, shoes, bags and other fashion items. SHEIN mainly targets Europe, America, Australia, and the Middle East along with other consumer markets. The brand was founded in October 2008, and since then it has upheld the philosophy that "everyone can enjoy the beauty of fashion." Its business covers more than 220 countries and regions around the world.
We used Html5,CSS,JavaScript and local-storage for building this Project. We also used tools like GitHub for collaboration of our project,Slack & Zoom as means of a communication channel.
HTML5:
It is used to build the basic structure of the website. All headings, Paragraphs, links, forms, etc. were structured by HTML.
CSS:
It is used to add styling to the website. We used Advance CSS for Popup Modal window for login/Sign up, Payment, and all other styling.
JavaScript:
It is used to add logical functionalities to the web pages like the on Click function. We have added all the functionalities.
Local storage:
We used local-storage as a database for storing users’ data, products details, and cart details.
Let us share our experience,
While working on this project, we have explored many things, first we got to know each other in our team, established proper channel for communication, able to add lot of skill set which we was not familiar with and explored some depth regarding the content, properties etc. I got clarity on those concept like DOM manipulation, Local Storage, slideshow, advance DOM, dropdown concept some external libraries for inserting icons on the buttons. while working in the team we always get lots of things extra on which we have not worked on earlier.We got the learning such showing flash sale timer , payment OTP ,web portal for payment concept, many customized sorting like sort by men's /women's collection, sort by price, filter by size, color etc.
First we checked the functionality of the entire web page and checked its design and layout. After that we divided the work amongst ourselves, how much work has to be done by whom. Everyone started their work showing their consent and on the first day our home page was ready.
After the home page we created the product page and we did as much functionality as we could. We have given a filter named Price in this so that the customer does > not face any problem in buying the product according to his choice. We also worked on this page too much color layout font lead and the beauty of the page.
After this, the data key was taken from the local storage and the cart page was created from the same data so that the customer could get the right product. what he liked.
This was the page of more information about the product in this we have explained about the product in detail and inside it. customer can also increase or decrease the count of the product. We took all the data from the local store of the cart page and pushed it here so that the customer can get the right product.
We all know that the login page is the only page from which the customer’s penalty can be known.
It was a security issue so here we have used email validation password validations so that no fake person can access the page.
If you want to go to the next page, then you have to give your correct punishment, first you have to create an account, after that you will also have
to login from the same id.
So we all know anyone can’t get the delivery withou the address. so we created this page for collect the data of it and put it on the local storage.
There was a lot of work done on the payment page so that no one could make fake payments. First of all to make dummy payment to you 16 digit card number to be entered. After this you have to enter the 3 digit Kava number And also you have to enter the expiry card of the card. And then you will see the option to enter the mobile number, after which you will get a gate one time password. You will have to enter the password in the same evening or else you will not be able to make the payment. Once the payment is done, you will be shown the next page, that will be the success page.
So here is the finale page. after all the proccess You will get the final page like this.
We have faced few challenges during the while working on project we dealt with them , sometime it take lots of time but on the other hand we got some learning from that. some of the challenges are-
As we are working on a team, we have to compile our data into our project sometime it messed , the problem was like some are data are mismatch or jumped to other section , so resolve this we have outlined each section with certain height and width and prepared layout first.
Functionality of each button on click and provide link over there . We have done this in precise manner. so that every thing will set up in a certain direction.
Sorting data as per functionality.
We are very thankful for the support of my teammates and instructor for the completion of project in due time. We will looks forward to add some feature and functionality which we left in this project for future expensions.
