My Pet Project: THE DASH

Dec 20, 2021

My favorite part of being a developer is making cool and useful stuff. While my last personal project was fun to implement, I can't make myself believe that it's actually useful to anyone, even as a diversion.

One thing that I knew I needed to do before starting to work on any number of projects was to find a way to monitor any aplications that I was in charge of maintaining. This seemed like an excellent opportunity to polish up some skills by developing a dashboard that monitored that status of all of applications. Plus, this one could actually be useful!

Enter THE DASH

What I came up with was a simple project dashboard that I affectionately call THE DASH. You can find the full source code here.

THE DASH is a single page application developed with React and hosted with Netlify. It's completely serverless, leveraging Netlify's Function feature and AWS Lambda. Website statuses are stored in AWS's DynamoDB and user credentials are managed through AWS Cognito.

The user experience is pretty straightforward. They are first shown a public screen with a description of the service and an option to login:

Picture of THE DASH public screen

Once the client selects the login button, they are navigated to AWS Cognito's hosted UI, where they enter their credentials. If the credentials are correct, Cognito routes the client back to the Dashboard page along with an API token. If the Dashboard can verify the API token, the client is shown the Dashboard:

From the Dashboard, the user can see any ongoing alarms, a detailed overview, and detailed status for each web application. They also have controls to refresh, add and delete applications.

When a client isn't actively using THE DASH, it still monitors application status through AWS Lambdas scheduled at regular intervals. If something is determined to be down, an email is sent to users through AWS SES. That way, users can always be sure that their web applications are working, even if they are not logged into THE DASH.

If you're interested in a more in-depth look into the project's design, check out the project README.