By remembering all these issues, We have packed all these components and features and decided to make an admin Dashboard in react. We have named it Isomorphic. Demo is available in this link [https://redq.io/isomorphic]
When you are thinking about building a project to react, It is not only about to react. Some Major technologies like a build tool webpack and browserify, a state container like redux and mobx, Asynchronous Request handlers like redux-saga, Dynamic Routing handler like react-router are required to be configured perfectly regarding t0 your project’s specification.
Tools and Technologies We have Used
- Create React App
- React Router 4
- Webpack 3
We have used create react app because of its universally accepted folder structure. We have used React-Redux and ImmutableJS to handle all our headache of storage container. As we are trying to build an admin dashboard, react-router is used for providing a Single Page Application(SPA). Moreover, We have used webpack 3 for its awesome features like code splitting and chunking.
In our Isomorphic, We have used service worker for offline user experience.
- Ant Design
- React Chart 2
- React Trend
- React Vis
- React Grid Layout
- React Flip Move
- React Google Charts
- Algolia Search
- Google Map
We will provide Mapbox supports in our future updates.
- Authentication Firebase
- Authentication Auth0
Best Practices We Have Followed
In React js project the same minor mistake we all make is load all the react components in the app boot time. This will cause unnecessary components to load neglecting the fact the loaded components is used on the present view or not. This makes the reactjs project slow and results in bad user experience. In this case, Async loading can be a savior. That is loading specific react components on demand. The following gif can describe it.
You can find this dashboard app in this following link Isomorphic.So, Don't waste your time, Grab and make it happen.
Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.