Rewrite the citizen app with *Next + Typescript*

[khavinshankar]

Project Detail

CARE is a centralized capacity management and patient management system, central to the 10BedICU Project, integrating patients, doctors, hospitals, labs, specialized treatment centers, hospital administrators, and shifting control cells. Hospitals update crucial information about their assets, providing district administration with a comprehensive view of the healthcare system via smart dashboards. CARE digitizes patient records, streamlines workflows for pandemic management, and is deployed in remote areas, enabling Tele-ICU services for underserved citizens. It revolutionizes healthcare management, enhancing efficiency, accessibility, and patient outcomes.

CARE can only be used by hospital staff (like nurses, doctors, admin staff, and so on), patients have no direct access to the CARE application. The Citizen application aims to solve this, in this app, the patient can log in using their mobile number and view their records associated with their phone number.

We plan to refactor, redesign, and rebuild the existing citizen application.

Features To Be Implemented

• Currently, the citizen application is written in rescript, rewrite it in typescript with Next.
• Should integrate ABDM patient-centric features (to be discussed further)
  • Patients should be able to register or log in using ABHA
  • Patients should be able to edit their ABHA profile
  • Patient should be able to scan QR from hospital to book a slot for OP consultation
  • (to be done last) Patients should be able to manage consent
  • Patients should be able to fetch their medical records
• Come up with standardized UIUX similar to CARE
• As patients will primarily use this application, it should be mobile responsive and should implement PWA support
  (consider capacitor for native app generation PWA is mandatory whereas capacitor is optional)
• (optional) Write E2E tests

References for ABDM Integration

• https://sandbox.abdm.gov.in/abdm-docs/getting-started
• https://sandbox.abdm.gov.in/abdm-docs/BuildingPHRApp

Learning Path

	Details
Complexity	Medium
Required Skills	Typescript, Next, React, Tailwind Python, Django
Mentors	@vigneshhari , @khavinshankar , @rithviknishad , @gigincg , @Ashesh3 , @sainak
Project Size	175 Hours

Link to documentation for Product Set-Up

Setting up Citizen

1. For setting up the frontend, please refer to the readme file available at: https://github.com/coronasafe/citizen

Setting up CARE

1. For setting up the frontend, please refer to the readme file available at: https://github.com/coronasafe/care_fe
2. For setting up the backend, please refer to the readme file available at: https://github.com/coronasafe/care

Acceptance Criteria

• Code is logically structured for long-term project sustainability.
• Proper descriptions should be included for review purposes.
• QA and Code Review

Milestone

• Get to know CARE and Citizen as a product and understand the workflow.
• Understand the requirements.
• Implement the tasks mentioned above
• Optimise the code
• Review and QA

[nihal467]

Hey everyone,

Thank you for showing interest in the projects. I would like to inform you that we have scheduled EOD calls on Zoom from Monday to Saturday at 7:30 PM to discuss your work and address any doubts with the core team. Alternatively, feel free to use our #care_general Slack channel.

The meeting links will be shared in our #reminder channel in our Slack workspace.

Link to join the Slack: Slack Workspace

Meanwhile, please explore the care platform and familiarize yourself with its features. Feel free to play around with it and assign any open issues as you see fit.

[MjStar24]

"Hello @nihal467 @khavinshankar, just wanted to inform you that I've successfully set up both CITIZEN and CARE projects locally. I'm considering beginning the UI design process for CITIZEN, mirroring the style of CARE. Can I start?

A brief introduction: My name is Manas, currently a second-year undergraduate student at IIT Guwahati. I have experience with MERN and NEXTJS technologies. Previously, I participated in an inter IIT competition where my team secured the 2nd position with a NEXTJS project. I'm eager to contribute to this project under your guidance. (I am also an ABHA card holder 😅)

Thank you!"

[kumar11jr]

Greetings @khavinshankar and @nihal467! Being a potential future web developer for your Next.js with TypeScript upgrade, I have extensive knowledge in web development along with a solid foundation in all the latest tools. Since I have been working on the Next.js platform for a while and am also proficient in TypeScript, you can be confident in my ability to swiftly migrate your old website to this robust stack, enhancing productivity and reliability simultaneously.

Based on my work in several web development projects, I recognize the significance of processes such as planning, precision, and diligence. The ability to communicate and maintain these processes through all stages of website creation is crucial. From my past experience, I can say that I have taken part in examining and describing an existing system, as well as proposing modifications that would enhance its functionality and usability.

To deliver high-quality solutions that meet functional requirements and design aesthetics, I am ready to use my skills to improve your website by integrating Next.js and TypeScript in order to increase performance, scalability, and maintainability.

I am thrilled at the chance to make a difference with your work, and I believe my knowledge and passion would set me apart as the perfect choice for this job.

[Bhanu-code]

Demo sample of the UI built with Next.js and typescript.

[kabirrajsingh]

Hi @khavinshankar . Regarding fetching the medical records part and the booking a slot for OP consultation,
1.do we also need to include the medical records from Care Backend (basically things included in https://care.coronasafe.in/facility/{facilityID}/patient/{patientId}/files or just the user records uploaded to ABDM (https://sandbox.abdm.gov.in/abdm-docs/UploadingUserRecord) ?
2. For booking a slot for OP Consultation, should this be a seperate module (like booking consultations within the ABDM environment between the PHR and health facility) or should this also be connected to the care backend, like displaying the OPD consultations as well in the patients tab, since the current consultation module mostly focuses on the in patient daily rounds consultation.
3. Given a consultation record needs to be made between the PHR and health facility, do we need to simply put it through the queue or do we also need to integrate it with the Generic Scheduling System (https://github.com/coronasafe/care_fe/issues/7424)

[sarthakagarwal882]

Hello @kabirrajsingh @khavinshankar @nihal467 @Bhanu-code @kumar11jr ,
I'm Sarthak Agarwal, currently pursuing a Bachelor's degree in B.Tech. My expertise lies in the MERN stack, TypeScript, Next.js, and Tailwind CSS.
I've gained valuable experience in a company as an intern over the past 6 months specifically in Next.js development, where I extensively worked with Next.js, TypeScript, and Tailwind CSS.
I'm eager to contribute to this project, as it presents an exciting opportunity for me to expand my knowledge and skills. Rest assured, I'm committed to giving my all to add value to the company.

Excited about the possibility of working together with everyone.
Best regards,
Sarthak

[shishir95]

Hello everyone,
This is Mohammad Amanat Khan. I am excited to work on the frontend. Before starting, do I need to submit any proposals through DSoC?

Regards,
Amanat