Show HN: Free React template that makes “Admin Dashboards” easy
mdbootstrap.com
mdbootstrap.com
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)
- 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
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.
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.