# Healthcare Management System

The Healthcare Management System is a hospital management application built with KendoReact components. It features appointment scheduling, patient record management, and monitoring dashboards.

<CtaPanelOverview message="The @Subject was created with KendoReact, an enterprise-grade UI library with 120+ free and premium components. To try out the premium components used in this app, you need to sign up for a 30-day trial, which gives you access to the full KendoReact library."></CtaPanelOverview>

## How to Run the Demo

Whether you are looking for examples of how to use KendoReact in healthcare applications, or for a starting point for your own dashboards, head over to the live [Healthcare Management System](https://telerik.github.io/kendo-react/react-health-app/#/). You can find [the application's source code on GitHub](https://github.com/telerik/kendo-react/tree/master/examples/react-health-app).

To play with the demo and see how it's built, you may want to run it locally:

1. Clone or download the source code from GitHub.
2. Install the required dependencies via `npm install`.
3. Make sure you have activated your [license](https://www.telerik.com/kendo-react-ui/components/my-license#install-or-update-a-license-key).
4. Use `npm run build` (for production usage) or `npm run dev` command to start a dev server.
5. Open `http://localhost:5173` to view it in the browser.

## About the App

This application was built following best practices for using KendoReact components, maintaining a clean structure that makes it an excellent learning resource. It demonstrates how to build a comprehensive hospital management interface covering common healthcare scenarios such as scheduling appointments, browsing and managing patient records, and visualizing health metrics through monitoring dashboards.

## Styling KendoReact Components with Ease

To make styling as easy as possible, you can use the KendoReact Themes that come out-of-the-box with this React UI components library. In this demo, we use the [KendoReact Default Theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/) to make our components stand out and look great.

For more information on how to add one of the themes to your project, refer to the article on [using the KendoReact themes in React projects](https://www.telerik.com/kendo-react-ui/components/styling/).

If you're interested in applying more styling, [How to Add Custom Styles to KendoReact Components with Sass](https://www.telerik.com/blogs/how-to-add-custom-styles-to-kendoreact-components-with-sass) is another helpful resource.

## Easier Collaboration with Your Designers

To enable a smooth and trouble-free collaboration between designers and developers, the Progress Design kit offers [several UI Kits for Figma](https://www.telerik.com/design-system/docs/resources/figma-ui-kits/). These kits supply your designers with assets that match the KendoReact UI components at your disposal. Matching building blocks on both sides - design and development - guarantee the smooth implementation of the design.

## Suggested Links

* [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)
* [KendoReact Grid](https://www.telerik.com/kendo-react-ui/components/grid)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler)
* [KendoReact Charts](https://www.telerik.com/kendo-react-ui/components/charts/chart)
* [KendoReact Forms](https://www.telerik.com/kendo-react-ui/components/form)
* [KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs)