Vitalix Care is a web-based healthcare platform that simplifies the management of medical records and prescriptions for both patients and doctors. Patients can register, update personal information, generate QR codes, book appointments, and securely access or download their medical history and prescriptions. Doctors can scan QR codes to retrieve patient data, view past diagnoses, and add new medical records with prescriptions. The platform is built with Spring Boot and React, aiming to make healthcare more accessible, efficient, and digitally connected.
🤔 Problem space
Problems to solve/Requirements to Create
Traditional healthcare systems rely heavily on paper records, manual appointment processes, and fragmented data access. Patients lack real-time access to their medical history, and doctors often struggle with incomplete or inaccessible patient records during consultations.
👉 Problem: Patients cannot easily access or manage their medical records and prescriptions.
Patients often receive their medical records and prescriptions in paper format, which can be lost, damaged, or inaccessible when needed—especially in emergencies or remote consultations. This lack of centralized access makes it difficult for patients to track their medical history or share it with new doctors.
Current solution
Patients using Vitalix Care can log in through the patient web portal, where they can view, manage, and download their medical history and prescriptions in a structured digital format.
How do we know it is a problem
👉 Problem: Doctors lack instant access to patients' prior diagnoses and prescriptions.
Doctors often rely on verbal patient history or fragmented records, which may be incomplete or inaccurate. This leads to delayed or repeated diagnostics and a less effective treatment process.
Current solution
With the doctor portal on Vitalix Care, doctors can scan a patient’s QR code to instantly retrieve their complete medical history and past prescriptions, and then add new diagnosis data directly to the patient’s record.
How do we know it is a problem
Why solve these problems? (Highly Optional)
Solving these problems is crucial to modernizing healthcare services and ensuring timely, accurate, and secure access to patient information.
Reason: Delayed or incomplete medical records often result in misdiagnoses or repeated procedures, reducing treatment effectiveness.
Reason: Patients today expect digital access to their health data, especially post-COVID, where remote healthcare services have grown rapidly.
💡 User satisfaction matrix positions the current paper/manual record systems low in both satisfaction and effectiveness. With Vitalix Care, we aim to move this to a high-satisfaction, high-importance quadrant by enabling real-time access and secure digital sharing of medical records.
Goals
Company objective 🎯
💡 To create a modern, secure, and efficient healthcare management platform that simplifies patient-doctor interactions and enables full visibility of medical history and prescriptions.
Project goals
Project goal: Build a web portal for patients to register, manage profiles, generate QR codes, and securely access/download their medical records and prescriptions.
Project goal: Develop a dedicated doctor portal to scan patient QR codes, access previous records instantly, and add new diagnoses with prescriptions.
Project goal: Ensure data privacy, smooth navigation, and responsive design using Spring Boot for backend APIs and React for dynamic frontend experiences.
Project goal: Enable seamless appointment booking and secure, role-based access across the system.
User Stories
🧑⚕️ Doctor
The doctor is a healthcare provider using the portal to access patient records, diagnose illnesses, and provide treatment.
Goals: Quickly access patient data, diagnose conditions, and add records and prescriptions.
Needs: Reliable patient identification (via QR), full history view, and easy form-based inputs for new records.
Other characteristic: Works in a fast-paced environment, needs efficient UI, and expects data accuracy.
👤 Patient
The patient is the primary end-user who manages their own health data through the patient portal.
Goals: Register, generate a QR code, view or download their medical records and prescriptions, and book appointments.
Needs: Easy-to-use interface, secure login, instant access to updated medical records.
Other characteristic: Varies in tech familiarity, so UX must be intuitive and mobile-friendly.
🌟 Design space
UI Design
The UI design of Vitalix Care prioritizes simplicity, clarity, and role-based accessibility across three main user roles: Patients, Doctors, and Admins. Each role has a dedicated portal with tailored features and navigation to suit their responsibilities.
🧑⚕️ Doctor Portal Flow:
Login Page – Doctors securely log in with their credentials.
Dashboard – Displays a summary of recently scanned patients, quick actions, and analytics.
QR Scan Page – Allows doctors to scan a patient's QR code to fetch medical records.
Patient Profile View – Displays personal information and complete medical history, including past diagnoses and prescriptions.
Add Diagnosis Page – A form to enter new medical records, including diagnosis, treatment notes, and prescriptions.
View/Add Prescription Page – Doctors can view current prescriptions or attach new ones to the diagnosis record.
👤 Patient Portal Flow:
Registration/Login Page – Patients can sign up or log in to access their dashboard.
Profile Management Page – Allows updating personal information such as name, age, and contact.
QR Code Generation – After completing profile setup, patients can generate a personal QR code for doctor scans.
Appointment Booking Page – Patients can select a doctor, choose a date/time, and book an appointment.
Medical Records Page – Displays all diagnoses and prescription history in a timeline format.
Prescription Download – Patients can view or download their prescriptions as PDF for offline access.
🛡️ Admin Portal Flow:
Admin Login Page – Restricted access with two-factor authentication (optional).
Admin Dashboard – Displays system metrics: number of users, appointments, records, etc.
User Management – Add, edit, or delete doctor and patient accounts.
Appointment Monitoring – View and manage upcoming appointments across the platform.
Record Oversight – Read-only access to medical records for auditing purposes.
System Logs & Settings – Manage platform configurations, view logs, and ensure security compliance.
Low-fidelity Wireframe
The core design concept was to:
Create separate flows for Patients, Doctors, and Admins
Ensure QR code functionality is central to doctor-patient interactions
Use timeline-style layouts for medical record history
Maintain clean, card-based views with simple forms for diagnoses and prescriptions
High-fidelity design
💡 Below are actual screenshots and a video walkthrough of the working system, demonstrating key user flows and interactions.
Key flows showcased:
Patient registration and login
QR code generation
Viewing and downloading medical records and prescriptions
Doctor scanning QR code and updating diagnosis
Admin managing users and viewing logs
Patients Portal
Development Phase
Technology Stack Selection
💡 This section explains the rationale behind choosing the technologies and tools used to build Vitalix Care.
1. Backend – Spring Boot
Why Spring Boot?
Rapid Development: Provides ready-made configurations and embedded servers, accelerating backend API development.
Microservices Friendly: Easily supports modular microservice architecture to separate concerns like user management, medical records, and appointments.
Robust Security: Integrates well with Spring Security for authentication, authorization, and data protection.
Scalable and Maintainable: Supports enterprise-grade applications with clean separation between layers.
Large Ecosystem: Wide community support and extensive libraries for database integration (JPA/Hibernate), messaging, and monitoring.
2. Frontend – React.js
Why React.js?
Component-Based Architecture: Enables reusable, modular UI components for patient, doctor, and admin portals.
Fast Rendering: Uses a virtual DOM to update only changed parts of the UI, ensuring smooth user interactions.
Responsive Design: React combined with CSS frameworks helps build interfaces that work well across devices.
Strong Community & Ecosystem: Provides rich libraries for form handling, routing, and state management.
High-Level Architecture Diagram
💡 The Vitalix Care system is built on a microservices-based architecture to enable modularity, scalability, and maintainability.
Key components include:
User Service: Manages user authentication, registration, and role-based access for patients, doctors, and admins.
Patient Service: Handles patient profiles, personal information, and QR code generation for patient identification.
QR Service: Responsible for generating and verifying QR codes, facilitating secure patient identification and data retrieval.
Doctor Service: Manages doctor profiles, credentials, and doctor-specific operations such as accessing patient records and adding diagnoses.
Medical Records Service: Stores and maintains patients’ diagnoses, prescriptions, and medical history.
Appointment Service: Handles booking, scheduling, and managing appointments between patients and doctors.
Report Service: Generates downloadable medical reports and prescriptions accessible to patients and doctors.
API Gateway: Serves as the unified entry point for frontend clients, routing requests to the appropriate microservices securely.
Frontend Clients: React-based web portals customized for patients, doctors, and admins, communicating with backend microservices through REST APIs.
Key Features of the Software
💡 Below are the key features implemented in the Vitalix Care healthcare platform along with important development decisions.
1. User Authentication and Role Management
Decision: Implemented secure authentication with role-based access control to support patients, doctors, and admins.
Implementation: Used Spring Security with JWT tokens for stateless session management, ensuring secure login and permission management across portals.
2. Patient Profile Management and QR Code Generation
Decision: Enabled patients to create and update profiles and generate unique QR codes to simplify patient identification.
Implementation: Designed a patient profile microservice with integrated QR code generation (using libraries like ZXing), allowing QR codes to be scanned by doctors for quick data retrieval.
3. Doctor Portal with Patient QR Code Scanning
Decision: Separated doctor-specific features into a dedicated microservice to allow easy maintenance and scaling.
Implementation: Developed a doctor portal where doctors scan patient QR codes to retrieve full medical histories and add new diagnoses and prescriptions in real time.
4. Medical Records and Prescription Management
Decision: Created a dedicated medical records service to securely store and manage diagnosis and prescription data.
Implementation: Used relational database schema with clear relationships between patients, doctors, diagnoses, and prescriptions. Enabled patients to view and download their records securely.
5. Appointment Booking System
Decision: Simplified patient-doctor appointment scheduling with a microservice managing slots and bookings.
Implementation: Designed RESTful APIs for appointment creation, modification, and cancellation, with conflict checks and notifications via email (planned for future integration).
6. Report Generation
Decision: Provided patients and doctors with downloadable medical reports and prescriptions to improve record portability.
Implementation: Integrated PDF generation tools (e.g., iText or Apache PDFBox) in the report service to create formatted and printable documents.
Challenges Faced and Solutions
💡 During the development of Vitalix Care, several technical and design challenges arose. Below are key problems encountered and how they were addressed:
Problem 1: Managing Concurrent Updates to Medical Records
When multiple doctors tried to update a patient’s medical records simultaneously, it risked data conflicts and inconsistent records, potentially overwriting important information.
Solution:
Implemented Optimistic Locking using version fields in the database entities.
Each update request included a version number; the update was accepted only if the version matched the latest record version, preventing overwrites from stale data.
Provided clear error feedback to the user if their update conflicted with a newer change, prompting them to refresh data.
Problem 2: Efficient QR Code Scanning and Data Retrieval
Ensuring that doctors could scan patient QR codes quickly and retrieve associated medical records without delays was critical for real-time consultations.
Solution:
Developed a dedicated QR Service that validates and decodes QR codes separately to reduce load on other services.
Optimized API response times by indexing patient IDs and caching frequently accessed patient data.
Leveraged asynchronous processing on the frontend to avoid UI blocking during data fetch.
Problem 3: Ensuring Secure Role-Based Access
With multiple user types (patients, doctors, admins) accessing sensitive health data, controlling permissions was complex.
Solution:
Integrated Spring Security with JWT tokens to authenticate users and manage session state securely.
Defined fine-grained access controls to restrict actions based on user roles, preventing unauthorized data access or modifications.
Conducted thorough testing to ensure no role could access or modify data beyond their permissions.
Future Vision / next steps
💡 The development of Vitalix Care is an ongoing journey. Below are the planned enhancements and features envisioned for future versions to further improve user experience, functionality, and system scalability.
Long-term vision
Integration of NFC Technology: Replace or complement QR codes with NFC cards to allow patients’ health data to be accessed simply by tapping their card on mobile devices, improving speed and convenience.
Advanced Appointment Management: Introduce calendar sync, automated reminders via SMS/email, and support for telemedicine/video consultations.
AI-Powered Diagnostics Support: Incorporate AI algorithms to assist doctors by providing diagnostic suggestions and treatment recommendations based on patient history and symptoms.
Enhanced Data Analytics & Reporting: Develop dashboards for doctors and admins to track patient health trends, appointment statistics, and system performance metrics.
Mobile Application Development: Build native mobile apps for patients and doctors for better accessibility and offline capabilities.
Robust Security Enhancements: Implement multi-factor authentication, audit logging, and HIPAA-compliant data encryption standards to ensure regulatory compliance.
Patient Portal Improvements: Add features such as medication reminders, health goal tracking, and integration with wearable devices for real-time health monitoring.
Scalability and Cloud Deployment: Migrate services to cloud infrastructure with containerization (Docker/Kubernetes) for easier scaling and maintenance.
Get visibility from recruiters & peers