Techdegree Project 7

WebApp Dashboard

View on GitHub

Summary

This project involves creating tables, charts, graphics and other user interface components in a manner that promotes interactivity and usability. It requires building an interactive dashboard for a web application using web techniques including SVG graphics and JavaScript programming.

Details

Web applications often include pages for looking at user profiles, user history or what needs to be done. These "dashboards" act like a control panel for controlling the web app.

This project requires taking a mockup and a few icons and build a beautiful web dashboard complete with JavaScript-driven charts and graphs.

Solution

The dashboard matched the mockup and is fully responsive to desktop, tablet and phone-sized screens. I used CSS grid to lay out the main elements of the dashboard (header, sidebar navigation, main content), as well as the widgets in the main content area.

The dashboard contains a variety of chart widgets, using the chart.js jQuery plugin. These include a line chart (web traffic), bar chart (daily traffic) and donut chart (device breakdown). The dashboard also contains widgets for displaying social network stats and user lists. These used a variety of asset types, including SVG icons and jpg profile picture

I also demoed an alert notification. This is displayed as a bar at the top of the screen. When the page loads this alert is visible, but the user is able to close the alert by clicking the 'X' button.

A 'Message User' widget required adding a search field – allowing users to find the relevant recipient – and text area to add a message. Although not tied to a backend, pressing the send button triggers a 'message sent' alert to appear. Validation is used to display error messages if a user isn’t selected or message field is empty.

Finally, the Settings Widget displays an on/off toggle for email notifications and setting profile to public or private. There is also a drop-down to select the preferred timezone. Pressing the Save button saves these preferences to local storage, and Cancel clears the settings back to default.

Extra Credit

To achieve the 'Extra Credit' grade, I allowed users to view notifications when they click the alerts icon. This took the form of dropdown menu. I also allowed the user to view different data when the Hourly, Daily, Weekly and Monthly button is selected. The line chart automatically updates on a user click.

Additionally, when a user begins entering details in the "Search for user" box, any mathcing names are "autocompleted". I used local storage to save the user's preferred contact settings. When the page is reloaded the settings are remembered.

Profile picture of Thomas Moore

Get in touch

I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)