This project was build as a technical test. The proposal for this project was create a small web application to allow next of kins to look observations of older adults receiving care, called care recipients. This project was built using ReactJS and typescript
The challenge was Display the information to a family member of this care recipient This could mean presenting it in the following forms:
- A table
- A graph
- A timeline
This Front end project is hosted at Netlify
which URL https://dazzling-neumann-0c94b8.netlify.app/
It's a simple Dashboard to show some valuable infos to nexts of kin from those care recipients, at first moment it was developed exclusive to be used at desktop screens. This project highlighted those infos by:
- Doughnut Chart => It shows all events amount by their types.
- Table list => It's a scroll list of all events showing their dates, type and caregiver (it's the person which did that care). Beyond shows you may access more details about the event clicking on each one. This table allow these following type of filters:
- Sort by date recents / olders.
- Filter by event type / caregiver id
- Timeline Graph => It's a Line bar to shows the events amount evolution day by day.
- Its was created two cards to show important infos as
most recurrent event type
andalerts triggered
by recipient at that period. - And was also created a profile info to show simple infos from care recipient
heads up: these events are shown 100 by 100 events, to navigate between these pages, please use the top left buttons
At each reload on the app will be generated a new random user (just when reload whole app, doesn't between pagination). To generate this user was used this Random user generator.
Unit tests were implemented using Jest
To run these tests just executing the following command at project root:
yarn test
Details will be displayed at your console.
It's also possible to run the test with --coverage
flag, It'll be generated a folder called coverage
at the root of your project, into it there will be a folder called Lcov-report
, looking for a file index.html
open in your browser and get access further details of executed tests.
yarn test --coverage
Some of technologies and libraries used at this project:
- typescript;
- zustand => To manage the global state for data;
- axios;
- Styled Components;
- React Content Loader => To create Skeleton svg to be shown when reloading;
- react chartjs 2;
[ ] Allow search by care_recipient_id
[ ] Improvements at responsivities from charts an
[ ] Mobile layout
[ ] Allow pagination by month
[ ] Filter by date
1 - To run at the first time the project will be necessary creating a folder
mkdir <folder-name>
2 - Now within the folder
cd <folder-name>
3 - Let's cloning the repository
git clone https://github.com/Fred-Reis/birdie-test-frontend
4 - Execute the following command to create node_modules
folder
yarn
5 - To start the application at development mode run the following command:
yarn start
If you came right here it signs that everything has gone well ππΌ and then you may already able to see the dashboard on your browser π± following the URL below:
http://localhost:3000
Author: Frederico Reis
Made with