Medihause

Web app providing electronic medical records and integrated health facility management



Overview

Medihause is a platform that provides electronic medical records and integrated health facility management. Medihause offers several services to help manage your health facilities, such as medicine stock management, pharmacy point of sale (POS), sales reports, and patient medical records.

In this project, I was asked to lead the frontend team of 3 developers (including myself) to implement existing UI designs of application dashboard and integrate them with developed APIs.

Challange

Since this is a green field project, we had a lot of things to do. The main challenge for me was keeping up with time. We had around two months to implement over 50+ pages/components and integrate 10+ API endpoints (API development was in progress at that time). Fortunately, the design was quite consistent, so we could manage to make reusable and customizable components to boost our development progress.
Since most of the dashboard pages consisted of tables, dialogs, modals, and forms, preparing those components first alongside the other design system elements like typography and color helped a lot when slicing the design. At the end of the day, we managed to slice over 50+ pages/components in the first month, so we were able to focus on the integration process in the second month.

Communication was also a pain point of this project. Since I was working remotely, making sure our team did their part correctly and on time was a whole different story besides coding itself. So I tried to keep in contact with my team. Having weekly stand-ups to assign tasks, evaluate previous work, and open Q&A sessions helped us keep the progress on track. I also regularly updated and asked about my team's progress, ensured there were no blockers, and if we had any, we could discuss solutions immediately.

TechStack and Tools

NextJs → a React framework with many utilities; we used it mainly to build the web user interfaces.
React → a JavaScript library to build user interfaces based on components; we used it to build the web UI library so the main app and its UI components were separated. This made the main app lighter to build and deploy.
TypeScript → a JavaScript programming language with static typing. We used it to add type safety to code by checking for type mismatches at compile time. This helps identify bugs early and improves the developer experience.
TailwindCSS → a CSS framework that we used to make styling for the web easier.
Notion → a productivity software that we used to manage and keep track of the project progress.
Figma → a design tool that used to design the application UI/UX.

Result

Bellow footage some of my works in this project.
**footage using static dummy data

Dashboard → sidebar, tabs, statistic, toaster, dropdown

Cashier → cart, modal, payment, product catalog, dialog

Items → paginated table, product form

Items → catalog, product form

Adjustment → settings form, role assignment

Report → range datepicker, statistic card

Receipt → datepicker input, receipt form

;