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
andsetInterval
functions. - Responsiveness using
media queries
. - I used
CSS flex
for layouts andCSS 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:
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.