bigyankumar / vedix.com

It is beauty based web application where you can buy beauty product as far as many information about product which you can use.

vedix.com Unit-3 Project

So for running this project on your system you need to first run server mannually by giving command => npm run server than json server will start on port 3001 just check and now you can run all functionality of this clone website. Thankyou.

We are creating this blog to share our experience of working on a project assigned to us by our Masai School. We were assigned in this project with the help of all team ,my team name is challenging team. Our team consists of the following members: Bigyan Kumar Sandilya, Apurva Divaker, Priyanshu Kumar, Taruna, Dipesh Ghosh, Shaik Shakeer . Our group was assigned to work on E-commerce Product Selling website called VEDIX : vedix.com #Problem statement: We are given the task of the successful completing a website clone vedix in six days. ( HOW WE DID IT ) Before answering the big question of “ how we did it? “, let me show you some snippets of our website clone. — Landing Page Of Our Project —

Login Page

^ Shop All Products Page ^

• Cart Page *

$ Address Page $

..Payment Page..

I hope I am not presenting you with so many snippets. The snippets attached above are just some parts of what we have made so that you could compare them with the actual website. Now answering the big question of how we did it, I would like to say that it is because of the guidance of our captain Swanand & IA Pawan Lode he guide towards making the website pixel perfect, I and my wonderful teammates had, we able to achieve our goal. As part of Masai school, we have always believed that communication and skills are greater than knowledge so it is because of effective communication and sheer will to understand complicated things and make them simple to understand, we were able to create the page with comparatively fewer resources and fewer time. @ We used the following resources for our help: 1.https://developer.mozilla.org/en-US/ 2. https://www.w3schools.com/ 3. https://www.flaticon.com/ 4. https://codepen.io/pen/ 5. https://github.com/ 6. https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka 7.https://code.visualstudio.com/ #Concepts we covered in the entire unit: HTML 2. CSS 3. DOM 4. Media query 5. Git 6.json server (port number-3001) ***** 7.ES6 8.Fetch 9.Import & Export *** Efforts of Team Work *** Step-1 : First we make a Slack and Whatsaap group for better with communication between all of team members ,Then we connect a zoom meet discussion about given project. Step-2 : In zoom meet we divide small parts of project ,to all the team , next all are collecting raw data for project which content is better to merge and easy to complete work. Step-3 : Daily we connect a meet after scrum then discuss about past days work and that present days work, any one have issue all the team mets are help solve the bug. Step-4 : Finally all push the data to Git hub main branch and do backend of this project, that we face lot of tension more discussion lot more changes will be occur . Step-5 : Complete given project works after we talk about presentation part of our project ,and we all are efforts goes to final result then we submit Successfully our project with our team efforts. CHALLENGES WE FACED AND HOW WE SOLVED THEM As it was the first time for us collaborating remotely on a project. We faced quite a few challenges while developing the clone. The challenges we can remember are as follows:- Git was fairly new to us and thus it became a challenge to merge the code and solve the conflicts. Sometimes we worked till 2 am just to merge the code and improve the final version afterward. Another challenge was solving the problem of redundant CSS classes. It happened sometimes that there were few redundant classes and the output used to get disoriented. Solving it required a thorough checkup of class names and effective communication among us so that we could prevent it from happening. We had to learn how to make animations and carousels as few sections of some pages required us to create image cards, moving navbar, opening & closing animations, etc. Here, reading the documentation and looking at the snippets come in handy to solve such problems. As we are not using and UI libraries yet, we faced a lot of challenges while getting a similar layout on different screen sizes. Although we were able to manage most of it, this issue is something that we got to know could only be resolved with the UI libraries (which we have not studied yet), so we decide to move on and fix other things.