MediTracker: An Application to Track Medical Appointments
I invite you on a journey to walk through my process and development in building a medical tracking website.
Introduction
Keeping track of your medical care can be overwhelming, but MediTracker’s goal is to organize that for you. This is an all-in-one patient tracker that can manage the user’s doctor appointments, physician information (name, specialty, location), insurance, and vaccination cards. Growing up with a brother who has special needs, my parents were always flustered with keeping up with all their children's medical appointments. I hope this website can be used as a free and accessible resource, to help people keep up with their own and loved ones’ medical care.
Design
The design of the application used an MVC architecture. The Model-View-Controller is a framework that separates an application into three components: the model, the view, and the controller.
Breakdown of three components:
- Model: It includes all the data and its related logic
- View: Present data to the user or handles user interaction
- Controller: An interface between Model and View components
Plan
When it came down to designing the application, I started by creating an MVP. This is the minimum viable product that is the basic version of a product and meets the minimum necessary requirements for use but can be adapted and improved in the future.
As described on ProductPlan, “A minimum viable product, or MVP, is a product with enough features to attract early-adopter customers and validate a product idea early in the product development cycle. In industries such as software, the MVP can help the product team receive user feedback as quickly as possible to iterate and improve the product.”
Code
The tools that were used to build this application were MongoDB, Express, Node.js, Javascript, Bootstrap, HTML, and CSS. Passport.js was used for user authentication and to ensure that when the user signs in it only show their sensitive data. Using the MVC architecture, folders were declared as “controllers”, “models”, “views”, as seen in the image below. When I began coding MediTracker, I focused on building the backend and frontend together. It was imperative to understand how the application communicated in each stage of the development. Once the backend was complete and running, I put more focus on the frontend to enhance certain features and UI design.
Deployment
When deploying my full-stack application, I created an account on https://render.com/. There I click on the New Web Service button below Overview.
There I can connect my GitHub account and choose which repository I would like to deploy. Freecodecamp has a great step-by-step process for this deployment process https://www.freecodecamp.org/news/how-to-deploy-nodejs-application-with-render/. Within seconds, I have a fully running application that is hosted on the server and automatically updates each time I push changes on the linked repository.
Conclusion
This application allowed me to enhance my understanding of the MVC architecture in web development. The multi-dimensional dynamic of this website emphasizes separation between the software’s business logic and display. With the MVC pattern, it is much easier to manage and make changes to the frontend and backend sides without them interfering with each other.
Resources
- GitHub Repo: https://github.com/SarahAlCodes/MediTracker
- Live Site: https://meditracker.onrender.com/
- Deploying to Render: https://render.com/docs/deploy-to-render
