A list of dashboards available to a DHIS2 user.

Important

👉🏻 Access: https://dhis2-dashboard.vercel.app/

 

 

Features   |    Settings   |    Cloning the repository   |    Starting the application   |    Running the tests   |    Techs | Tools | Resources   |    License

📌 Context

As a requirement of the DHIS2 technical assessment instructions, the library used in this project was React using the Next.js framework. Currently, the React's team recommends choosing one of the frameworks popular in the community:

If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.

Major assumptions or design choices

1. I've used TypeScript because you can save time by avoiding bugs due to typos and other errors, it offers faster performance and the IntelliSense works better, generating a superior developer experience.

2. I've chosen the Radix UI because its optimization related to accessibility.

3. About the usage of the Tanstack React Query, the reason is because I think it makes fetching and caching easier to manage and improve the performance of data response, improving the user experience.

4. About the requirement "Ability to 'star' a dashboard and persist the starred states on reload", I've used the localStorage to persist the changes. In a real application that has this functionality, it would be better if it could be saved by using the API.

5. I've created a hook called useDashaboards using the Context API to avoid prop drilling, organize and centralize data and functions.

6. Tailwind CSS was chosen because with it, we can use pre-built CSS classes for styling, which saves time and effort of writing custom CSS from scratch.

7. And finally, for the application deploy, I've picked the Vercel platform because I find it simple to use and also they are able to generate a preview version of the app for each commit done.

Note

I tried to use the DHIS2 UI Library to develop the components, but I had issues to deploy the solution, so I redid the components using HTML elements with Tailwind CSS and other librarys.

There is a branch with the code made using The DHIS2 UI Library and you can check more details there: PR #2: create components using DHIS2 UI library

💻 Features

Done

• List of dashboards fetched from the API;
• Details of a specific dashboard when the dashboard card is expanded;
• Ability to filter dashboard items of a centain type;
• Ability to "star" a dashboard;
• Responsive page.

In progress

I'm studying about unit tests, I've already implemented a few tests and there are many others to add.

• Add tests.

⚙️ Settings

The settings to execute the application on your computer are listed below.

• Git;
• Node;
• Yarn.

🔽 Cloning the repository

1. Through the terminal, go to the directory where you want to have the repository cloned and run the following command:

# cloning the repository
git clone https://github.com/belapferreira/dhis2-dashboard

🔰 Starting the application

1. Open the code of the repo cloned, create a .env.local file and add a new variable called NEXT_PUBLIC_API with the API base path.

2. Through the terminal, go to the directory where the repository was cloned and run the following command:

# installing dependencies
yarn install

# starting application
yarn dev

🧪 Running the tests

1. Through the terminal in the directory of the project repository run the following command:

# running tests
yarn test

🔧 Techs | Tools | Resources

This project was developed using the following resources:

Axios | Eslint | Material UI Icons | Next.js | Prettier | Radix UI Accordion | React Markdown | React Select | Tailwindcss | TanStack Query | TypeScript

📝 License

This project is under MIT license. See LICENSE for more information.

---

Developed by Bela Ferreira 💙 Contact: https://www.linkedin.com/in/belapferreira 😊