We created a lybrate.com clone in 6 days!
These were challenging 6 days but the outcome was worth it!
Hello Bloggers!
At Masai School’s Full Stack Web Developer course, every unit (unit 2 onward) concludes with a construct week. This week is 6 days dedicated only to working as a team to apply everything we’d learnt so far in the course and clone one of the existing websites. At present, I am in unit 4 and I’ve learnt CSS, JavaScript, DOM manipulation, API’s, JSON, EJS, and for Back-end we used MongoDB, and NodeJS. As the construct week for unit 4 comes to an end, I am writing this blog to document everything we’d experienced so far and the project we built.
Our team is three members strong:
- Ashwini Rathod(me!)
- Selvakumar P
- Bhavani Dasari
We were assigned the Lybrate website to clone. Lybrate is a mobile healthcare technology company that developed an online platform to connect doctors and patients.
As a team, first we established common channels of communication — Slack and Zoom along with a GitHub repository for collaboration and committing our code. Each one of us went through the website to look at its layout and the flow that a user goes through while browsing the website.
Once we’d done our individual research, we got together on our very first Zoom call as a team and divided our project into modules:
- Sign-in and sign-up pages
- Landing page, product list and individual product pages
- Cart page and checkout pages
The initial two days were spent on creating the individual pages — sign-in, sign-up, landing page, product list and individual product pages. With Selvakumar tasked with creating the landing page, and I was taken responsibility was creating the navigation bar to be placed at the top of each page. Once the navigation bar was ready, we added it to all our individual pages.
Our first challenge and revelation:
I’ll start with the revelation, each one of us had computers with different screen resolutions. So when we saw how our pages were displayed on each other’s screen, we realized what looked perfect on my own screen while I was creating it, did not look so when the same page was displayed on my team member’s screen.
The challenge was to ensure that our CSS code was written in such a manner that it adapted to different screen resolutions, prioritizing percentages over hard coding the dimensions. A major portion of day three was spent debugging the codes we’d written so far with Selvakumar taking the lead in figuring out where and what kind of changes were required. We’d fortunately learnt this important lesson just in time.
For Front-end we are used CSS, JavaScript, DOM, EJS and for Back-end we used MongoDB, NodeJS:
For creating the product list, individual product pages, cart page and the checkout page, the JavaScript DOM Back-end came in handy since we were using the same layout to display different values from the same datasets — the product database and the user’s cart page product list. We were using back-end on the MongoDB Atlas to store these databases along with the user database. The back-end also acted as a go-between when we had to pass data back-and-forth between pages. We was the first one implement the code that fetched and used the data from the back-end to the front-end.
Overcoming challenges individually and as a team:
Individually, we faced issues and challenges as well. To overcome them, we revisited our concepts and attempted to resolve them ourselves. If resolving these issues on our own proved difficult, we’d frequently get on zoom calls to help each other out.
My task was to create the navigation bar and sign-in/sign-up pages. For the homepage and landing page, a major breakthrough was figuring out the categories on the basis of which the user can click through the products and narrow down choices. I also learnt how to create CSS modals!
Experience so far…
This project has been a truly memorable and fruitful experience. It has taught me how to collaborate well — since each one of us were from different educational backgrounds, explaining a technical concept/solution in a way that everyone in the team understood was a good learning experience. It has also made me more assertive. I’d frequently give suggestions on improvements/changes, some were implemented and some were not. I am glad that my suggestions were heard and reviewed fairly. Our constant communication both on Slack and Zoom created a really good environment for team building and I truly enjoyed my time with my team members.
Project Description:
Individual Responsibilities:
- Ashwini Rathod : Sign-in and Sign-up pages
- Selvakumar P : Landing page and cart pages
- Bhavani Dasari : Home page and checkout pages
Languages and concepts we used:
- CSS, JavaScript
- DOM Manipulation, EJS
- Storing data and fetching data from MongoDB Atlas
- For back-end we used MongoDB and NodeJS
Our repository on GitHub: click here
Live Project Demo: click here
Snapshots of the cloned website:
- Sign-up and Sign-in Pages
The layout and functionality of sign-in and sign-up pages were implemented by Ashwini Rathod(me). Once a user creates an account on the sign-up page, they are added to our user database in the MongoDB Atlas. They are then re-directed to the sign-in page to login to the website.
Once logged in, the user’s details — name, password are saved.
2. Landing Page along with drop-down navigation bar
The layout and added functionalities on the landing page were implemented by Selvakumar P. A significant part of this page is the navigation bar at the top with displays all the categories, search input, user account and homepage button and the cart icon.
3. Home Page
Bhavani created the homepage and implemented the functionality on this page and also added the product categories to this page is the navigation bar at the top with displays all the categories, search input, user account and homepage button and the cart icon. Here the user has two options to narrow down their choices — sort and filter.
4. Product List Page
We created the layout and implemented the functionality on this page. Here the user has two options to narrow down their choices — sort and filter. The sort selection at the top right side of the page, will sort and arrange the products as prices high to low or prices low to high. The filters at the left side of the page can be used to select particular brands, colors and product types.
5. Product Details Page
We created and implemented functionalities of this page. Here the user can see description of the product and the color variants available. If they wish to buy the product, they can enter the quantity in the quantity box and then click on the ‘Add to Cart’ button.
6. Cart Page
We’ve implemented this page as well. Here all the products added to the cart page will be listed. The user can make changes to the quantity of each product or even remove a product from the bag if they wish to. If the cart is empty, the checkout button is not displayed. Also, if the user has added products to the bag but has not logged into the site, on clicking the checkout button, they are re-directed to the sign-in page. Once they sign-in/sign-up, the products they’d added to the bag are made available for checkout.
7. Checkout Page
This page was implemented by we. Here the user can fill in their address, contact details and select a delivery method. The delivery cost changes for different methods. On clicking on ‘Checkout’, the user is asked to then enter their name, address, mobile number,city and after on clicking on ‘Save and Deliver Here’, the page will redirect to payment page and click to any of the payment type using credit/debit card details.
Clicking on the ‘Place Order’ button will display a order is successfully completed page, will re-direct the user to the home page.
If you’ve read this far, thank you for staying till the end!
