Care Recipient desktop Dashboard

---

About this project    Front End challenge    Deploy    Features    Demo    Random User    Tests    Technologies and Libraries    Roadmap    Running the project    Author

💡 About this project

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

• Back-End Repository

• Try Online Application

🖥 Front End Challenge

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

🌐 Deploy

This Front end project is hosted at Netlify
which URL https://dazzling-neumann-0c94b8.netlify.app/

🔥 Features

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 and alerts 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

👀 Demo

🃏 Random User

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.

🧪 Tests

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

🛠 Technologies and Libraries

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;

🗺 Roadmap

[ ] Allow search by care_recipient_id
[ ] Improvements at responsivities from charts an
[ ] Mobile layout
[ ] Allow pagination by month
[ ] Filter by date

🏁 Running the project

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

😃 BE HAPPY!

"Stay hungry stay foolish!"

---

Author: Frederico Reis

Made with ♥️ 2021