DMP '24: HCX - Redesigning UI stack for better implementation and create a common components library on npm

sumukhbendre123 commented 1 month ago

Ticket Contents

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 library and integrating it into multiple applications. This approach promotes code reusability and maintainability across multiple projects. The common components library will be hosted on npm with comprehensive documentation.

Goals and Mid-Point Milestone

Goals

[ ] Understand and Review: Analyze claim processing UI applications provided by Swasth (Assisted BSP, BSP, OPD, Self Service Portal, Payor App).
[ ] Identify Common Functionalities: Recognize shared UI components, JavaScript functions, and API calls among the applications.
[ ] Mid-Point Evaluation: 31st July
[ ] Create Core Component Library: Develop a reusable component library for use across the specified applications.

Acceptance Criteria

Common Components library is published on NPM with all listed features.
Test cases are implemented and code coverage is more than 80 percent.
Versioning: Follow semantic versioning (SemVer) for your package versions. This helps users understand the significance of each update (major, minor, patch).
README.md: Write a comprehensive README file that includes information on how to install, configure, and use your package. Provide examples and usage scenarios.
Linting and Formatting: Enforce coding standards and formatting rules using tools like ESLint and Prettier. This ensures consistency and improves code quality.
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

Project requires a detailed understanding of npm, React, Typescript/Javascript, Node, HTML5, CSS3, Tailwind CSS, Jest and Enzyme.
Npm and Node will be required on the machine to develop the code components and run the applications.
React, Typescript/Javascript, Tailwind CSS to be used for the development.
Jest and Enzyme to be used for writing test cases.
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
@saurabh-singh-17

Complexity

High

Sub Category

Frontend, Backend, Mobile

sumukhbendre123 commented 1 month ago

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.
[ ] Task 2: Testing the component with Jest and Enzyme.

sumukhbendre123 commented 1 month ago

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.

Swasth-Digital-Health-Foundation / hcx-apps