clinical-portal-demo-react-ts

English | 简体中文

• clinical-portal-demo-react-ts
  • Usage
  • Architecture
  • Strategies
  • Maintainers
  • License

Welcome.

This is a demo that uses React, Material UI, styled-components, react-hook-form and fetch-mock, according to the provided API, to implement a clinician to log in and view patient details project.

Usage

To run this project, install it locally using npm:

cd ./clinical-portal-demo-react-ts
npm i
npm run start

Then you can visit http://localhost:8080/.

Demo

Architecture

• The main Javascript framework is React 18.2 version.
• Use Material UI 5.11.7 for UI library.
• Use react-hook-form 7.43.1 for form management.
• Use styled-components 5.3.6 for style management.
• Use fetch-mock 9.11.0 for mock responses to API requests.
• Use Webpack 5.75.0 for code and resource packaging.
• It follows the type checking and syntax specifications of Typescript and ESLint.

Strategies

1. All projects are in the /src directory.
2. /src/index.tsx is an entry file.
3. /src/App.tsx judges sessionToken and chooses to load Login component or Dashboard component.
4. The /src/utils/ directory puts the public section. interface.ts defines the types used by all components.
5. Under the /src/components/ directory are the Login and Dashboard components in the page. Among them, Dashboard also contains three subcomponents ClinicianDetail, PatientDetail and Patient.
6. The Login component is used for the login screen.
7. The Dashboard component is used for the dashboard interface seen by clinicians after login.
8. The ClinicianDetail component is used to display clinician details.
9. The PatientDetail component and the Patient component are used to display patient details.
10. Send a request to the mock API through the specified method and URL. Render the page with the returned data as requested.
11. Login validation check is set.
12. Cumulative time spent: about 29 hours.

Maintainers

@FantiGA

License

MIT © 2023 @FantiGA