Skip to content

πŸ–₯ Desktop Dashboard to show some events served from the API of this project

Notifications You must be signed in to change notification settings

Fred-Reis/birdie-test-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

32 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Care Recipient logo

Care Recipient desktop Dashboard

language version GitHub language count GitHub top language GitHub repo size in bytes



πŸ’‘ 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


πŸ–₯ 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:



πŸ—Ί 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

About

πŸ–₯ Desktop Dashboard to show some events served from the API of this project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages