User Dashboard

Overview

The dashboard website application, if applied live, allows users to view real-time data about the engagement of their clients. Building this website deepened my knowledge of the components and utilities available within Material UI (MUI). I also gained experience adding type safety to the codebase with TypeScript.

Website Design

The widgets from the dashboard are heavily based off an MUI website template from Minimal. If you navigate to the homepage and click on “live preview”, you will be prompted to login to the dashboard. You don’t need to register for an account and you can login using the demo username and password.

Use the login details to access Minimal's dashboard template

I analysed the CSS classes in the template’s markup, which revealed all the MUI components that were being used as well as other libraries such as Apex Charts and React Slick. Using this information, I learnt the basics of these libraries to build my own version of each widget from the template.

In this example, we can see this element is using MUI's Paper Component which is wrapping a React Slick component

Challenges

The most challenging part of the project was rectifying the errors highlighted by the TypeScript compiler. One example of such errors included the incorrect definition of prop types for function components, which was something I wasn’t familiar with nor had encountered before. To solve this, I searched for “React TypeScript” on Google and found React TypeScript Cheatsheets. I used this page to ensure all my components had their prop types correctly defined.

Props without types

Props with types

Future Features

I’d like to add the ability for users to login by building a backend with Express and MongoDB, similar to Minimal’s login feature.