Codementor Events

How and why I built Free React Material Design Admin Template

Published Aug 10, 2018
How and why I built Free React Material Design Admin Template

About me

I am a developer and designer working 90% with the front-end. I am also familiar with the concepts such as security, OAuth, Rest APIs, Provisioning. I use these technologies to build complete solutions. I have a long history of working with JS where I started development with vanila JavaScript then moved to jQuery and now exited with ES6 and React.

The problem I wanted to solve

When I started developing a front using React, Babel, Webpack echo system. I found it's a little time consuming to wire together the exact solution I wanted. Most of the starter kits out there were developed using Redux pattern. But I was planning not to use Redux since my state tree is not going to be that complex. Also I didn't find any solution using React Router with authentication.

What is Free React Material Design Admin Template?

I build a Admin Dashboard using React, React Material Design, React Router, and Victory charting.
pic
It also has a pure react landing page. I release the source with MIT license. The demo is available from here

Tech stack

Node, NPM, Babel, Webpack, React, React router, Victory charting, Git, hosting with AWS.

The process of building Free React Material Design Admin Template

Project started with a simple Create React App project and I ejected it. Then compose the project with different libs such as Victory and built the final solution.

Challenges I faced

Wiring up Victory charting is quite challenging. Eventhough it's a great library, customizing, themeing was little time consuming than expected.

Key learnings

Building this admin template was a learning experience to me. There are many things I can improve in the template such as the design, organization and presentation of the charts in the main dashboard etc..

Tips and advice

If you are building a project with this admin template you should start with the provided seed projects and add components from the admin sample to that. This way the final project will be minimal in size. Also it's better to implement chunking base on the routes. This way you can load the essential components and load other components when they are needed.

Final thoughts and next steps

I am building the next iteration of the template with bug fixes etc. Hope to add a new design as well.

Discover and read more posts from wrapreactjs
get started
post commentsBe the first to share your opinion
Show more replies