DEV Community

loading...
Cover image for Start your next React App with Isomorphic

Start your next React App with Isomorphic

alrubelrana profile image Al Rubel Rana ・2 min read

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.

Discussion (1)

Collapse
prayashmeher profile image
prayash Meher

I am looking for e-commerce template in react native plz contact me -Prayash@wholesaller.com

Forem Open with the Forem app