Show HN: Free React template that makes “Admin Dashboards” easy

https://mdbootstrap.com/previews/free-templates/react-admin-dashboard/

by yasshi • 7 years ago

62 11 7 years ago

Rowern• 7 years ago

It looks really beautiful. Well done!

We use react-admin (https://github.com/marmelab/react-admin/) and it was a total life saver to create a backoffice for our app in less than 2 weeks.

Hope this takes off and you can provide some code example for how to use this project for that purpose.

krossitalk• 7 years ago

My gripe with react-admin and to a lesser extent Semantic UI is their idea of also writing a full REST api layer. Just give me a good front end tool and let me handle my data layer!

donmb• 7 years ago

Reminds me of a mixture between Bootstrap 2 and Windows 10

edf13• 7 years ago

Very nice - nice, clean... just what’s needed

bpicolo• 7 years ago

This looks to be a pretty straight grab of Creative Tim's material/bootstrap admin theme with some other packages thrown on:

https://www.creative-tim.com/product/material-dashboard

Or did this happen the other way around?

It's within the rules of engagement of open source, but it still feels weird.

Edit: (Removed some extra information that was here because I was personally mixed up about the maintenance / ownership boundaries of various packages)

sgt• 7 years ago

Yes, it seems like it is ripped and then mangled. Some of it looks good, but overall I do not like it. It looks awkward to me - but perhaps it's just me.

Phillips1262• 7 years ago

I was skeptical about your comment at first since this layout is a pretty common dashboard style... but you are right. A lot of the elements are identical, which makes it a bit weird to be shared on HN. As a designer, I take inspiration from others work as well but I try to spin my own style into it, this just doesn't really feel genuine.

XJ6• 7 years ago

Semi-off-topic: There's a really strange shaking effect when scrolling down one notch with the header bar just in view.

Phillips1262• 7 years ago

I can also replicate this issue, Windows Chrome latest.

Taig• 7 years ago

There are quite a few visual glitches and inconsistencies that would make me skip over this project right away when evaluating options. I kinda enjoy spotting such issues in UIs, so here we go:

- Roboto font is being loaded, but a local font is used; I'd definitely prefer Roboto

- The search box on the dashboard is vertically misaligned next to the button and the space between the placeholder and bottom line is way too big

- The dashboard grid view is not ideal, a masonry would be great or some other strategy to avoid so much blank space

- The progress bars on the bottom of the dashboard look glitched when compared to the top of the dashboard

- The labels on the side bar buttons with the icons should be aligned i.e. the icons should have the same width

- Text on the (secondary?) pink color on the tables pages should be white, otherwise the contrast is too low

- The footer is floating in the air when the content isn't long enough

- The resizing effect of the top bar is useless and distracting, it should probably only be used when the bar position is fixed

- The navigation sidebar does simply not exist in a narrow browser window making the site impossible to use

LeonM• 7 years ago

I have build a lot of admin dashboards in my career, and I've always wondered if any of the designers of these templates actually build or even used a dashboard before.

What you need in 99% of the cases are just grids and forms, which need to be controllable without a mouse.

Admin dashboards are used to manage data (basically just a GUI around the DB), and to perform day-to-day tasks (basically buttons to trigger certain actions). In practice, the eye-candy graphs are almost never looked at by the user. If you really need fancy graphs, you're probably much better of using something like grafana.

Ask any experienced worker who actually use these dashboards for 8 hours a day, and they will always tell you the prefer their old AS/400 or DOS terminals over webforms, just because it's so much more usable.

- Don't spend your time on building graphs, give your users the ability to export CSV or give them SQL access. They will learn.

- Don't use paging, you need search. Paging is an anti-pattern that just indicates users can't find the relevant data.

- Forms with loads of whitespace and animated labels don't add anything useful for the user. Focus on accessibility and feedback instead.

Show HN: Free React template that makes “Admin Dashboards” easy

Related Stories