PharmEasy clone using pure JS

Hi everyone, I’m here to tell you about my first team project in Masai School on the PharmEasy clone website. This is my first project on JavaScript as well.

PharmEasy is a healthcare app where you can buy medicines, healthcare products, and book lab tests. As its name says, PharmEasy means buy Pharma products in easy ways. During this COVID-19 period, you can order and get medicines and other healthcare products while sitting at home.

About the Project

In this project of making a clone of the PharmEasy application, I have used HTML, CSS and pure JavaScript. It was a collaborative project, and I had 3 other team members along with. While making the project we found the most challenging part UI, there was a lot of small-small information in the original UI, which put us in trouble. But we kept focusing on the functionality of the application and built at least a user can make a purchase from this clone website.

Things I have learnt

There are a bunch of things that I have learnt while doing this project:

• The implementation of JavaScript in real products and how user data get stored and called. We used localStorage for that, but it was very interesting to learn such things.
• Working of payment systems, login/signup system using Promises.
• Slideshows using setTimer and setInterval functions.
• Responsiveness using media queries.
• I used CSS flex for layouts and CSS Grid for structures, which made a lot of things easy.
• By this project, I first time collaborated on Github, which made life easy even while working at home.

The Project

The project duration was 7 days, we started by implementing JS and then applying CSS. The project can be found here: https://github.com/dvanshukumawat/PhramEasy

I’m gonna share with you the screenshot of our website here:

Header Page and Footer Page

Login Sidebar & Register Sidebar

Product Page

Search bar showing related results

Users can filter out the products as well

Area of Improvements

• There is a lot of work left from the CSS side. Proper margins, width, icons and fonts need to be used yet.
• Some pages aren’t responsive yet.
• There should be consistency in designs and fonts, which is needed to be improved.

Conclusion

The product is in working condition if you are going to buy a product. There are many features that are just static right now. From my experience, I personally think that if we have implemented CSS first, then JavaScript, the project could have been better and less time consuming while building. Because applying CSS through DOM is really tough task. Also, we could have been worked more on proper naming conventions to create less confusion and save time. Overall, it was a great project and everybody learns from their mistakes. The best thing we can do is not repeating them.