Hello Everyone, my name is Mohit Sehrawat and I would like to share my Experience in this Construction Week, so we are a team of 6 members from the Masai School (Web-12 batch) who worked on cloning the Lybrate Website as a part of our Unit-3 construct week, and yes, this is a replicate of the Lybrate Website which was not developed by the Lybrate SDE’s.

This time I got a team of 6 members but some of them are good in terms of the Designing & CSS part but not in the Functionality & JS part, so instead of being sad, I took it as an opportunity to learn something new. I started working on our project, with the first line of code "border: 1px solid black" having no clue how much we could achieve in the limited time but, hard work and great dedication towards my job pays me back and today I can say that I and my team finished the work within a limited period of time and genuinely I learned 10 times more as compared to the previous construct week.

The topics which I have implemented in the project from my Unit-2 & 3 Curriculum

• I have used HTML and CSS for creating the web pages and also used Bootstrap for designing purposes.

• All basic and advanced DOM manipulation has been implemented on all the pages.

• I have used ES6 syntax code on each of the pages.

• We tried to find the APIs relevant to our website but were unable to find them so we have created our own Json server and created some data related to the website and fetch it on the required pages by GET request.

• I used Import Export on almost all the pages for importing Navbar and Footer and in some pages HTML content & functions too.

• The knowledge on local storage has been used efficiently to show the product details on the product description page, products added to cart on the cart page and payable amount details on the cart page, check out page, shipping address page and the payment page.

• We created separate files for HTML, CSS and JavaScript and arranged them in a good manner along with the readme file.

Our Project

As a team, we were given a project to clone the Lybrate website and we were able to achieve almost all the content we planned on day one to implement on this project like user interactions, functionalities and the flow. We have also covered a few extra functionalities and CSS stylings which we decided to implement after we complete the mandatory concepts.

Our project demonstrates the flow of an e-commerce website along with doctors and diseases related information displaying features, where a customer can view products, filter them as per their requirements, read about a specific product, add their product to cart, checkout and place his or her happy order. Users also can see some additional details related to the diseases and can consult the doctors too.

My Contribution

1) Product Description Page

Functionalities used

1. Local storage for displaying the product data
2. Add to Cart button function along with duplicate product check
3. Delivery availability Pincode checking function
4. Product's all images toggle function
5. Bootstrap CSS Framework
6. Import Export statements for importing headers & footers
7. ES6 Syntax & separate HTML, CSS & JS files

2) Cart Page

Functionalities used

1. Local storage for displaying all the added to cart products data
2. Order Summary function which calculates, price, discount etc and display
3. Remove button function
4. Created Export function for order summary and HTML contents
5. Quantity select option button
6. Bootstrap CSS Framework
7. Import Export statements for HTML code, Order summary function, headers & footers
8. ES6 Syntax & separate HTML, CSS & JS files

3) Shipping Address Page

Functionalities used

1. Imported order summary function and HTML contents
2. Local storage for displaying order summary data
3. Address fill checking function to check if the user details filled or not
4. Bootstrap CSS Framework
5. Import Export statements for importing headers & footers
6. ES6 Syntax & separate HTML, CSS & JS files

4) Payment Page

Functionalities used

1. Imported order summary function and HTML contents
2. Local storage for displaying order summary data
3. setTimeout functions for showing alerts of order confirmation and redirection
4. Bootstrap CSS Framework
5. Import Export statements for importing headers & footers
6. ES6 Syntax & separate HTML, CSS & JS files

5) Health Feed Page

Functionalities used

1. Created own Json Server for fetching the data
2. Local storage for sending a variable (topic name like depression) from landing page
3. Fetch data from the server for displaying relevant data on Health Feed
4. Bootstrap CSS Framework
5. Import Export statements for importing HTML contents, headers & footers
6. ES6 Syntax & separate HTML, CSS & JS files

6) About Page

Functionalities used

1. Fetch data from the server for displaying relevant data on About page
2. Bootstrap CSS Framework
3. Import Export statements for importing HTML contents, headers & footers
4. ES6 Syntax & separate HTML, CSS & JS files

7) Find Doctors Page

Functionalities used

1. Fetch data from the server for displaying relevant data on the Find doctors page
2. Bootstrap CSS Framework
3. Import Export statements for importing HTML contents, headers & footers
4. ES6 Syntax & separate HTML, CSS & JS files

8) Health Packages Page

Functionalities used

1. Fetch data from the server for displaying relevant data on the Health Packages page
2. Bootstrap CSS Framework
3. Import Export statements for importing HTML contents, headers & footers
4. ES6 Syntax & separate HTML, CSS & JS files

9) Slideshow and local storage function optimisation on the Product page

10) CSS Modification on the Landing page, Shop by Category and Product page

11) Some functions implemented on Landing Page

My Team

Bobby More

Bobby took the responsibility of working on the Products page, Shop by category page, Server Creation, Data creation for Products page, debounce search function on Landing page & product page and all the functionality related to these pages

Mahesh Kumar

Mahesh has worked on all the HTML and CSS parts of the Landing page and complete functionality of the Signup & login page along with designing

Harish Reyya

Harish has worked on making the structure of the Shop by category page using HTML and CSS. He also worked on the slide show function and shop banner of the Products page and he also made the gold membership static page and readme file of the project

Nitin Gupta

Nitin has worked on making the Consult Online static page and also helped in modification of database in JSON server

Anand Gupta

Anand has worked on making the static Footer part of the website

What did I learn?

• By end of this project, I am able to learn how effective work can be done as a team when ideas are trajected in multiple spectrums.

• The coordination while presenting the project was a new experience for all the members of the team which was fun driven as well as professional learning.

• Effective learning involves how we were able to suggest constructive feedback on each other’s work and debug before we present our project.

GitHub Repository