[DMP 2024]: HCX - Redesigning UI stack for better implementation and create a common components library on npm

[shiva-rakshith]

Description

The project aims to understand different UI applications provided by Swasth for claim processing and outlines the design process for creating a core UI component and integrating it into multiple applications. This approach promotes code reusability and maintainability across multiple projects. Common components library to be hosted on npm with documentation.

Goals

1. Understand and review claim processing UI applications provided by Swasth. The applications are Assisted BSP BSP OPD Self Service Portal Payor App
2. Identify the common functionalities in all the above applications which includes UI component, Javascript functions and API calls
3. Creating a core component library which then can be used in the given applications

Expected Outcome

1. Identify common functionalities such as login and claim processing etc. which are common in most of the apps.
2. Create a core component library with common functionalities which includes UI components and JS utils that can be used by all the apps
3. Design and code the test cases for all the identified components

Acceptance Criteria

1. Common Components library is published on NPM with all listed features.
2. Test cases are implemented and code coverage is more than 80 percent
3. Versioning: Follow semantic versioning (SemVer) for your package versions. This helps users understand the significance of each update (major, minor, patch).
4. README.md: Write a comprehensive README file that includes information on how to install, configure, and use your package. Provide examples and usage scenarios.
5. Linting and Formatting: Enforce coding standards and formatting rules using tools like ESLint and Prettier. This ensures consistency and improves code quality.
6. Dependencies: Clearly specify your package dependencies in the package.json file. Use exact version numbers or version ranges based on compatibility and stability requirements.

Implementation Details

1. Project requires a detailed understanding of npm, React, Typescript/Javascript, Node, HTML5, CSS3, Tailwind CSS, Jest and Enzyme.
2. Npm and Node will be required on the machine to develop the code components and run the applications
3. React, Typescript/Javascript, Tailwind CSS to be used for the development
4. Jest and Enzyme to be used for writing test cases
5. Core component library will be finally hosted on npm

Mockups / Wireframes

NA

Product Name

HCX UI Core Component library

Project Name

Redesigning HCX UI stack for better implementation and create a common components library on npm

Organization Name:

Swasthalliance

Domain

Healthcare

Tech Skills Needed:

React, Javascript, Typescript, Node, HTML5, CSS3

Mentor(s)

@maheshkumargangula

Complexity

High

Category

Integrations, Performance Improvement, UI/UX/Design

Sub Category

Frontend, Backend, Mobile

[jayesh9747]

Hello @saurabh-singh-17 Is there any documentation related to this application described in this issue? It would be beneficial for a better understanding of each application. also one more Query should we create a web app or an npm package?

[SanjanaSogimatt]

Hey, @shiva-rakshith can I work on it?

[AMISH-KHAN]

hey, @shiva-rakshith I have a query in goals it says: "Understand and review claim processing UI applications provided by Swasth". so where I can find this UI application provided by Swasth. I am preparing my proposal for this project in DMP and I need to have a full understanding of the required goals.

[KumarVivekPathak]

Hey, @shiva-rakshith I would like to contribute the HCX project. With a background in UI design and development, I'm eager to collaborate on redesigning the UI stack and creating a common components library on npm.

[devsh56]

@shiva-rakshith "Hello Sir, I would like to contribute to the HCX project. Could you please briefly describe the problem and provide the document related to the project? I am creating my proposal for this project and want to contribute to redesigning the UI stack for better implementation and creating a common components library on npm."

[nitian-hritik]

I'm excited about the HCX project and would love to contribute! I'm particularly interested in tackling the UI redesign and building a shared component library on npm. To craft a strong proposal for how I can best support these efforts, could you share a high-level overview of the current issues and point me towards any relevant project documents?

[dhyaneshsiddhartha15]

"Hello,. I'm excited about the HCX project and would love to contribute! I have experience in React JS ,Javascript and Tailwind CSS Could you please grant me access to contribute to the project? Thank you!

[harshilshah99]

Hey, I am interested for contributing to the project. I am facing some difficulties in setting up the project locally so is there some documentation which I can refer to?

[yashpatel139]

Hey, I'm interested to contribute to the HCX project. Will you please briefly describe the problem and provide the document related to the project? so that I can create the proposal for this project and cover all relevant points.

[AkanshuAich]

Hii @shiva-rakshith ,

I am Akanshu Aich, a third year student from International Institute of Information Technology, Bhubaneswar. I am writing to express my interest in contributing to this project as a part of DMP 2024. Having thoroughly reviewed the project, I am impressed by its objectives and it seeks the potential for great impact in industries.

With my background in Backend using Django , MERN with practicing hands on Machine learning and DevOps such as Docker, I believe I can make valuable contributions to both backend and frontend part . My experience includes several projects like Society-Expenditure Manager using Django, Real Estate using MERN and Info-Finding Tool using Machine Learning(LLM), which I believe align well with the goals of your project.

I am particularly interested in fulfilling the requirements of the project and have some ideas on how to approach it effectively. I am committed to adhering to best practices, contributing high-quality code, and actively collaborating with the project maintainers and community.

I am excited about the opportunity to contribute to "Redesigning HCX UI stack for better implementation and create a common components library on npm" and help further its mission. I look forward to discussing potential contributions and how I can best support the project.

Please guide me with procedure and with all your knowledge and experience.

[akshithere]

@shiva-rakshith Greetings Sir, I am excited to work on this project as part of DMP. Am I required to submit a npm package?

[Harikrishnareddyvaddireddy]

Hi sir i m intersted to join

[SagarKapoorin]

goal is to make a centralized npm package for common components used in each application , am i right?

@shiva-rakshith @maheshkumargangula

[Aditya-132]

I am interested to work here

[ChittaranjanTanty]

After winning a bronze in Odisha skill under it software solution for business. now i wish to devote my vacation on learning and implementing my skills which i am currently pursuing. Would be happy if chosen.

[vimalraj687]

yes sir , i am interested

[Madhu-mac]

Hi @shiva-rakshith @maheshkumargangula This is Madhu Lokesh, Currently working as a Full stack developer in a new-age startup "Drooid". I'm an Open-source enthusiast and also contributed to a few organizations previously. I have experience in MERN stack, Web dev & Mob Dev, and have worked with databases as well. I'm excited about the project, it aligns with my expertise & I want to know more about it.

I would love to collaborate and Contribute to "Swasth Alliance" and be a part of the community. Looking forward to discussing the project further.

Here's My portfolio: https://madhulokesh.netlify.app/ Resume: https://shorturl.at/aesS8

[vimalraj687]

yes

On Mon, Apr 15, 2024 at 1:14 AM Madhu Lokesh @.***> wrote:

Hi @shiva-rakshith https://github.com/shiva-rakshith @maheshkumargangula https://github.com/maheshkumargangula This is Madhu Lokesh, Currently working as a Full stack developer in a new-age startup "Drooid". I'm an Open-source enthusiast and also contributed to a few organizations previously. I have experience in MERN stack, Web dev & Mob Dev, and have worked with databases as well. I'm excited about the project, it aligns with my expertise & I want to know more about it.

I would love to collaborate and Contribute to "Swasth Alliance" and be a part of the community. Looking forward to discussing the project further.

— Reply to this email directly, view it on GitHub https://github.com/Swasth-Digital-Health-Foundation/hcx-apps/issues/12#issuecomment-2054165670, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOQ2GPITVJNGRWZRCCDLQYDY5LMDXAVCNFSM6AAAAABFKGIP7WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJUGE3DKNRXGA . You are receiving this because you commented.Message ID: @.*** com>

[hariharan1309]

Hi @shiva-rakshith @maheshkumargangula I'm Hariharan a recent graduate engineer proficient in React.js, Next.js, Tailwind CSS, Spring Boot, J2EE, MySQL, etc..,.Currently Interning as a Next.js developer. I have an interest to contribute to open source projects and I would like to start with this one as my skills match. I I'm excited about the projec like to Contribute to "Swasth Alliance" and be a part of the community. I'm looking forward to discuss about the project further.

[sourav-sm]

@shiva-rakshith Greetings Sir, I am Sourav Mohanta ,excited to work on this project as part of DMP and would love to contribute! I have experience in React, Javascript, Typescript, Node, HTML5, CSS3. Could you please grant me access to contribute to the project? Thank you!

[yadavshubham01]

@shiva-rakshith "Hello Sir, I'm Shubham Yadav . I would like to contribute to the HCX project. Could you please briefly describe the problem and provide the document related to the project? I am creating my proposal for this project and want to contribute to redesigning the UI stack for better implementation and creating a common components library on npm ."

[AbhimanyuSamagra]

Do not ask process related questions about how to apply and who to contact in the above ticket. The only questions allowed are about technical aspects of the project itself. If you want help with the process, you can refer instructions listed on Unstop and any further queries can be taken up on our Discord channel titled DMP queries. Here's a Video Tutorial on how to submit a proposal for a project.

[chetanpawar29]

Hi @shiva-rakshith & @maheshkumargangula , I would like to work on this project. My tech stack includes Javascript, Typescript, HTML5, CSS3.

[Riyasharma28]

Respected Mentor @shiva-rakshith @maheshkumargangula I'm a Full Stack Developer proficient in HTML, CSS, JavaScript, MongoDB, React.js, Node.js, Bootstrap, Database Management, UI/UX Design, Test-driven Development, and frameworks like Laravel and Material-UI. With over 10 projects completed in similar domains, I'm eager to contribute my expertise to your project. I'm excited about the opportunity to collaborate and drive its success. Looking forward to discussing this further.

[mridulsaggi]

Hi @shiva-rakshith , i am mridul, a full stack MERN developer with 3+years of experience in Open source contribution. I carefully went through the project requirements and wanted to work on this project starting from the redesigning the UI of the website to make it user friendly for better implementation, and creating the component library on npm as required. Looking forward to work on the project. Thankyou!

[harshit6174]

Hi @maheshkumargangula

I am extremely enthusiastic about the opportunity to contribute to this project. I've thoroughly reviewed both the source code and the requirements outlined in the project documentation, and I'm excited to see that they align closely with my technical skills and experience. The project's focus on redesigning the UI stack for better implementation and creating a common components library on npm resonates well with my background. I have hands-on experience with technologies like React, TypeScript/JavaScript, Jest, Node.js, HTML5, CSS3, and have previously worked on creation of reusable UI components. I will be sending my proposal soon and looking forward to the possibility of working together on this exciting project.

[PayalKumari10]

Hello @maheshkumargangula @shiva-rakshith , Excited about the project's alignment with my skills & experience, particularly in UI stack enhancement and creating a common components library. Proficient in React, TypeScript/JavaScript, Jest, Node.js, HTML5, CSS3, with prior experience in crafting reusable UI components. I am currently finalizing my proposal and will be sending it your way shortly. I am eagerly anticipating the chance to collaborate with you and your team on this dynamic project.

[SyedzaidHasan]

Hi @maheshkumargangula @shiva-rakshith excited to participate in your project , plz once give me a chance proficient in javascript,html5,css3 with prior experience

[vivekmishra9631]

Hi @shiva-rakshith , I'm Vivek Mishra, a third-year NIT Karnataka student with a strong passion for building impactful web applications. I'm excited to express my interest in the #12 issue.

My background includes:

Full-Stack Development Experience: I honed my skills as a full-stack developer intern at aiRender for 6 months, working with JavaScript, ReactJS, Redux, and WebRTC. This experience solidified my understanding of both front-end and back-end development.

MERN Stack Expertise: In addition to my internship, I'm also a proficient MERN stack developer, comfortable working with MongoDB, Express, React, and Node.js. This versatility allows me to tackle projects with both front-end and back-end components.

My problem-solving skills are further bolstered by my achievement of a gold medal at Worldquants Brain, demonstrating my ability to think critically and find efficient solutions.

I believe my technical skills, combined with my enthusiasm for building meaningful projects, make me a strong candidate to contribute to the project. I'm eager to learn more about the specific requirements and how my expertise can be utilized.

[SySagar]

hey @shiva-rakshith , I habe built a prototype and want to get it reviewed by you. Where can we connect please.

[rajput999]

Hello @shiva-rakshith , I am abhishek Rajput, a 3rd year Undergraduate student at IIT Kharagpur. I had start working on this project and i have some doubts , i want to discuss those with you so can we connect somewhere?

[saurabh-singh-17]

Hello all,

We request you to prepare a proposal which should include how you would approach the problem and submit your proposal as stated by C4GT guidelines. You can additionally mail the proposal to us.

Thanks, Saurabh

[harshit6174]

hello @saurabh-singh-17 , I want to share my proposal for the review before the final submission on unstop ,if possible could you please provide your e-mail address

Thank you

[sourav-sm]

Hello @saurabh-singh-17 , I want to share my proposal for review, I already started working on this project and also implement some solution , So can you please provide your Email ID

[sagarkori143]

Submitted the proposal🚀. Hoping for the best✨

[srus1608]

Hi @shiva-rakshith , I am writing to express my keen interest in contributing to the project "Redesigning HCX UI stack for better implementation and creating a common components library on npm".

I have thoroughly reviewed the project documentation and requirements, and I am excited about the opportunity to work on this initiative. With my background in Computer Science Engineering from Shri Guru Gobind Singhji Institute of Engineering and Technology, Vishnupuri, Nanded, and my expertise in technologies such as React, JavaScript, Node.js, HTML5, CSS3, SQL Database and the MERN stack, I believe I can make valuable contributions to this project.

Having previously worked on similar projects involving the creation of reusable UI components, I am eager to apply my knowledge and skills to this project.

Could you please let me know if there is an opportunity for me to contribute to this project?

[saurabh-singh-17]

Hello All,

My email address is saurabh@swasthalliance.org

[Apurv428]

Hello mentors @saurabh-singh-17 @maheshkumargangula @shiva-rakshith , could you provide information regarding the interview process? Has it already started or is it yet to begin? Thank you!

[SySagar]

Hello there. When will the interviews start? Have anyone yet got selected.

[sumukhbendre123]

Weekly Goals

Week 1

• [x] Task 1: Understanding the HCX protocol
• [x] Task 2: Studying the Primary flow APIs

Week 2

• [x] Task 1: Researching and testing the FHIR API.
• [x] Task 2: Understanding FHIR implementation for HCX.

Week 3

• [x] Task 1: Examining FHIR bundles and analyzing their various components and resources.

Week 4

• [x] Task 1: Documenting the UI components of HCX and identifying the common components.
• [x] Task 2: suggesting and documenting new features for HCX.

Week 5

• [x] Task 1: Analyzing user behavior and messaging for each core component.
• [x] Task 2: Documenting all bugs in the HCX app.

Week 6

• [x] Task 1: Prioritizing all identified core components according to five parameters: Frequency of Use or Reusability, Complexity, Impact on UX, Performance, and Current Inconsistencies.
• [x] Task 2: Reviewing the UI template and hence initiating the work of customizing the components according to HCX requirements.

Week 7

• [x] Task 1: Building Login component and passing props to it initiating the core UI library set-up.

Week 8

1. Notification Component
   • [x] Task 1: Developed a core notification component that can be used across various HCX applications by passing props.
   • [x] Task 2: Ensured the component supports different types of notifications.
2. Search Function Component
   • [x] Task 3: Created a reusable search function component for filtering and searching within the HCX applications.
   • [x] Task 4: Added customizable props for search functionality and result display.

Week 9

1. Basic UI Components
   • [x] Task 1: Build foundational UI components such as buttons, input fields, modals, and cards.
   • [x] Task 2: Ensure components are customizable and follow the design guidelines.
2. API Functions - Part 1
   • [x] Task 3: Keycloak API Functions: Develop core API functions for Keycloak integration, handling authentication, and authorization.
   • [x] Task 4: Registry API Functions: Ensure components are customizable and follow the design guidelines.

Week 10

1. Supporting Document Component

   • [x] Task 1: Organize and develop the SupportingDocument component for uploading and managing documents in the application.

2. Cursor Connect Component

   • [x] Task 2: Finalize and integrate the CursorConnect component that displays a tooltip with a description on hover.
   • [x] Task 3: Ensure proper positioning and responsive behavior in different routes using React Router.

Week 11

1. Back Button Component

   • [x] Task 1: Create a reusable "Back" button component with customizable navigation options.
   • [x] Task 2: Ensure it can be easily integrated into different pages of the HCX applications.

2. Forgot Password Component (Login Page)

   • [x] Task 3: Enhance the ForgotPassword component for the login page.
   • [x] Task 4: Ensure proper validation, user feedback, and navigation links for resetting passwords.

Week 12

1. Generating Outgoing API Functions

   • [x] Task 1: Develop a set of core functions for generating outgoing API requests.
   • [x] Task 2: Include functions for handling various types of requests, headers, and authentication tokens.

2. QR Code Scanner Component

   • [x] Task 3: Build a core QR code scanner component that can be used for scanning and processing QR codes in various HCX applications.

3. Reference App Dropdown Component (Login Page)

   • [x] Task 4: Create a reusable reference app dropdown component for the login page.
   • [x] Task 5: Ensure it supports dynamic options and proper handling of user selection.

These components are documented to ensure ease of understanding and further development for anyone using this library.

[sumukhbendre123]

Weekly Learning & Updates

---

Week 1

---

• Learning 1: Gained a comprehensive understanding of the HCX protocol, including its key components and functionalities.
• Learning 2: Acquired knowledge about the Primary flow APIs, focusing on their usage, integration, and common challenges.

Week 2

---

• Learning 1: Gained insights into the structure and functionality of the FHIR API through research and testing.
• Learning 2: Developed a solid understanding of FHIR implementation for HCX, including best practices and potential challenges.

Week 3

---

• Learning 1: Explored FHIR bundles in depth, understanding their structure and the types of resources they can contain.
• Learning 2: Analyzed various components of FHIR bundles, gaining insight into how they are used to group and manage related healthcare information.

Week 4

---

• Learning 1: Documented the UI components of HCX, identifying and categorizing the common components used across the application.
• Learning 2: Proposed and documented new features for HCX, enhancing functionality and improving user experience.

Week 5

---

• Learning 1: Enhanced understanding of user interaction patterns with various core components, leading to insights on improving user experience and communication strategies within the app.
• Learning 2: Improved skills in bug tracking and documentation, identifying critical issues in the HCX app, and learning effective methods for reporting and resolving bugs to enhance app stability and performance.

Week 6

---

• Learning 1: I prioritized core components by evaluating parameters such as frequency of use, complexity, UX impact, performance, and inconsistencies. This involved researching best practices, analyzing component metrics, and participating in workshops. I compiled and categorized components, developed prioritization criteria, and created a roadmap for customization and integration.
• Learning 2: I reviewed the UI template to ensure compliance with HCX requirements and identified necessary customizations for components. I began implementing changes and tested components to meet performance and UX standards. Detailed documentation and reflection sessions helped in assessing progress and refining strategies.

Week 7

---

• Learning 1: Built the foundational Login component by passing props, establishing the setup for the core UI library. Focused on ensuring reusability and adaptability within the HCX framework.
• Learning 2: Enhanced understanding of prop-based component design and its implications for creating flexible, scalable UI components.

Week 8

---

• Learning 1: Developed a notification component for HCX applications, learning how to handle various notification types through props and state management.
• Learning 2: Created a reusable search function component, enhancing my skills in building dynamic search functionalities with customizable filters and search options.

Week 9

---

• Learning 1: Built basic UI components (buttons, input fields, modals, and cards) while following HCX design guidelines. Focused on ensuring customization options for different use cases.
• Learning 2: Worked on Keycloak API functions, integrating authentication and authorization workflows into the UI components. Also started on Registry API functions, improving understanding of API handling within UI components.

Week 10

---

• Learning 1: Developed the SupportingDocument component for document management, enhancing my knowledge of file uploads, document organization, and user interaction patterns in the UI.
• Learning 2: Finalized the CursorConnect component, learning to manage tooltips and hover effects for better user interaction. Ensured responsive design across different routes using React Router.

Week 11

---

• Learning 1: Created a reusable BackButton component with navigation logic, focusing on making it adaptable to different routing scenarios within HCX applications.
• Learning 2: Improved the ForgotPassword component, adding validation, user feedback, and navigation to ensure a seamless password reset experience.

Week 12

---

• Learning 1: Developed core API functions for generating outgoing requests, deepening my understanding of API integration and authentication handling within UI components.
• Learning 2: Built the QRCodeScanner component, gaining insights into handling real-time scanning and processing of QR codes in a healthcare application context.
• Learning 3: Created a reusable ReferenceAppDropdown component, learning to handle dynamic options and user selections, improving the user experience on the login page.