Start your next React App with Isomorphic
Tags: react, rredux
Published: 2020-04-09 21:19:26

Modern web is all about javascript and its frameworks are growing faster. And if think about its frameworks, React Js has got most of the momentum. Working with react is pretty simple due to its awesome ecosystem, but it's very challenging to adapt the new modern web practices like Progressive web App(PWA) and asynchronous component loading with react. Moreover, the features like client side authentication (Firebase, Auth0) and Algolia Search integration are quite challenging to handle with.

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](https://1.envato.market/BV0BB). Demo is available in this link  [[https://redq.io/isomorphic](https://redq.io/isomorphic)]

![](https://miro.medium.com/max/1279/1*dzj5HeH2g1uZPCML9gsvVQ.png)

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
-   Redux
-   Redux-Saga
-   React Router 4
-   Webpack 3
-   ImmutableJS

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.

**Design Components**

-   Ant Design
-   React Chart 2
-   React Trend
-   Echart
-   React Vis
-   React Grid Layout
-   React Flip Move
-   React Google Charts

![](https://miro.medium.com/max/1250/1*ruuC6WMS0HpHWI6XyxEIvA.gif)

**Ecommece Component**

-   Algolia Search

![](https://miro.medium.com/max/1257/1*lN41ps3kUzLBXWDix_cIwA.png)

**Map Components**

-   Google Map


![](https://miro.medium.com/max/1268/1*S41xFU_r0_tABA4xsyamYw.png)

We will provide Mapbox supports in our future updates.

**Authentication Components**

-   Authentication Firebase
-   Authentication Auth0


![](https://miro.medium.com/max/1265/1*q0CBkg0TXQsi4Myy5qC83g.gif)

**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.

![](https://miro.medium.com/max/1264/1*47SHPl4I3ky9sYKpyeiXxQ.gif)

You can find this dashboard app in this following link  [Isomorphic](https://1.envato.market/9ayAW).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.