Start your next React App with Isomorphic

#react #rredux

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

Ecommece Component

Algolia Search

Map Components

Google Map

We will provide Mapbox supports in our future updates.

Authentication Components

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.