[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?