React App for querying data from HAPI FHIR test server using Material UI and React-Loader-Spinner
Clone the repository
Run npm install
The page will be served at http://localhost:3000/
This project is a skeleton project for querying data from the HAPI FHIR public test server
-
Take a few minutes to familiarize yourself with the FHIR Standard for health data exchange. In particular you might want to read the Executive Summary and the Developer Introduction
-
In addition, take a few minutes to familiarize yourself with React.
-
Please don't fork this repository. Clone this repository and set the git remote to your copy of the github repository and push it there.
-
Run
npm install
to install depedencies andnpm start
to start the project. App runs onhttp://localhost:3000/
-
Add a
Table
class component and populate it with results from thegetPatients()
function. -
Sort the table based on youngest birthdate to oldest.
-
Add a search function to the page. Add two inputs to
Table
component - a textbox that takes in a name (it can be the first or last name of a patient), and a date picker for date of birth. Modify the query and functiongetPatients()
to include search results for aPatient
based on the name passed in, and the date of birth passed in from the date picker. The results should be reflected in the table. Use the SearchParameters section to help with building your query. -
Apply validation to the inputs - the name box cannot contain non-alphabetic characters, and the date field must be a valid date structure (YYYY/MM/DD).
-
Output the time the request was made on the page to show the results are as of that time. Display in the following format
Mon 06 Mar 2017 at 00:00:00
. For example,Results as of Mon 06 Mar 2017 at 00:00:00
-
Commit your work.
-
Add
Questionnaire
componenent, generate a form using thequestionnaire.json
file in theassets
folder. The form should have validation applied to each input and form input elements should be controlled component. -
Using the results from the form, generate a
QuestionnaireResponse
. TheQuestionnaireResponse
should follow the structure outlined in the Resource Content Section -
Display your results in a neat and clean manner.
-
Update the
Questionnaire
Component to be mobile-friendly. -
Please include unit tests for your work.
-
Commit your work.
-
Refactor
Practitioner
class component into functional component using React hooks. -
Add
PractitionerCard
component, display the each practitioner in card format, display data in proper format. ie. Date of birth in (YYYY/MM/DD) format, replaceundefined
value withN/A
. Add Typechecking with PropTypes. -
Display loading state until the request is not complete.
-
Add a delete button in
PractitionerCard
, should ask for confirmation when clicked. Remove the particularPractitioner
when confirmed. Note: No need to make server request. -
Add
ErrorBoundary
component, use this component to make sure it catches the javascript errors thrown fromPractitioner
component. -
Commit your work.
This project was bootstrapped with Create React App.