Building Dashboards Quickly with React and Material-UI

Tate Galbraith
The Startup
Published in
5 min readDec 31, 2020

--

Laptops and papers on desk with men working
Photo by Scott Graham on Unsplash

Web dashboards are everywhere. Lately, it seems like every new SaaS product that hits the market ships with a smooth-looking management dashboard. Whether its server statistics or sales metrics there’s a high probability you have used one of these dashboards recently. Styles, color schemes and overall themes differ across many modern dashboards, but the overall layout is generally the same. Split pane view, some sort of navigation bar, notification area, etc. So why exactly do all these different products use roughly the same dashboard idea?

The answer is simple: consistency and ease-of-use.

There are exceptions to the rule, but most users want a similar and consistent experience across applications. It’s easier and a more pleasant experience when you know where buttons are located and how simple concepts like navigation should work. This allows users to focus on the actual content of the application, not the figuring out the layout.

In this article, we’ll look at how to build a quick and easy web dashboard using React and Material-UI. There are a ton of different frameworks and libraries that you could use in place of these, but I’ve found this combination to be straightforward and pretty easy to use. If you’ve never used either of these before, don’t worry! We’ll take you from zero to hero quickly…

--

--

Tate Galbraith
The Startup

Software Engineer @mixhalo & die-hard Rubyist. Amateur Radio operator with a love for old technology. Tweet at me: https://twitter.com/@Tate_Galbraith