About the Project

When the dashboard first loads, an alert banner is present. The user has the option to keep it or close it.

When the alert banner is closed, it is removed from the screen and the elements from the page move up to fill in the gap.

There is a notification dropdown menu that highlights notifications when the user hovers or clicks on a specific notification.

Using chart.js and styled to match the design of the dashboard, multiple line graphs, a bar graph, and a donut graph were created. The traffic line graphs change depending on which filter button is clicked. For all graphs, hovering over each data point pops up the exact data number. All graphs are also responsive to changing screen widths.

SVG icons were used for not only the notification bell at the top, but also for each of the social media icons.

There is a new member section and a section for recent activity. The new member section allows you to email a new member with a simple click. The recent activity section shows you recent posts or discussions by members. Clicking any activity would bring you to that post or discussion.

The final piece of the dashboard is a message user section and a settings section.

Searching for a user saves past searches allowing the user to choose from an autocomplete list of previously searched members. Clicking send simulates a “submit”, and with the use of JavaScript, displays a “sent” confirmation or error message if a user is not selected or the message area is empty.

In the settings section, a user can switch email and profile settings to on and off. There is a time zone dropdown menu to choose a user’s time zone, and save/cancel buttons for saving or canceling options. Local storage is used in the settings so when the page is refreshed, a user’s preferred settings are saved.

The entire dashboard web app, and the sections within, are responsive to changing screen sizes.