Complete corporate standard React JS boilerplate

Last updated on Jun 14, 2021.
Trying my best to keep the story up-to-date. (react v17.0.1)
Git repo: SAURABH SHAH / ReactJS myapp · GitLab (wip)
Code-sandbox live (playgroud embeded at bottom)
If you like the story, buy me a coffee!

fig-1. ReactJS app architecture modules

This story will cover all the aspects of a react js web app architecture. If you are creating a new responsive web application using react JS, then follow along.
Our app architecture includes various features. A quick list of few aspects that we will cover is as per fig-1 above and fig-2 below.


What is the difference between a react-native’s boilerplate “Welcome” app and this “Industry standard” app?

Photo by LUM3N on Unsplash

I am sure, here you’ll find answer to this question. Then I’ll take you along the journey how to create that industry standard app which will be customer acceptable and ready for deployment.

WHY?

Main reason is, the getting started app you get after following the steps on “https://reactnative.dev/docs/environment-setup” will not be the one you want to publish on production for yourself or your corporate clients. You will require a name for your application that may contain space “My App” or a corporate bundle identifier…


Photo by Xiong Yan on Unsplash

This story will cover all the aspects of a cross-platform react-native framework based app’s architecture. This can be used for creating a boilerplate for creating your next awesome cross-platform mobile app.

I’ve also written a story for Industry standard React-Native App setup.
(https://medium.com/@saurabhshah23/perfect-react-native-application-setup-industry-standards-bd3cc623745e)

NOTE: For versions of react and other libraries, please refer before and after screenshots of “package.json”.

If you are creating a new application then, the prerequisite will be to create a react-native app using react-native-cli. Please refer to “https://reactnative.dev/docs/environment-setup” for steps to create a basic react native app and run it on emulator/device.

Overview of app architecture…


(redux-persist with redux-toolkit in react)

Photo by Dave Lowe on Unsplash

Why redux-persist?

Why this Story?

Implement redux-persist in a react (JS or native) app with redux-toolkit.

You may find documentation and other internet articles for redux-persist implementation with traditional redux (store, Provider, reducer, actions)

If you are using the now recommended redux-toolkit (configureStore, createSlice, Provider), you may not find much help to implement redux-persist.

That’s where this article comes to your rescue.

SUMMARY of this Story

  1. React native counter application. (Steps will be exactly the same for a react JS web app.)
  2. Redux implementation using redux-toolkit.
  3. Redux-persist implementation over redux-toolkit (blacklist…

Easier than you think. Believe me!

live code for nesting routing example

Sole intention of this story is to learn nested routing.

SUMMARY of Story:

  1. What is nested routing?
  2. URL naming conventions
  3. Why nested routing?
  4. Advantages of nested routing
  5. Code example and implementation
  6. Guidelines

For React Js app architecture in detail refer:
https://saurabhshah23.medium.com/70b7b9103f22

What is nested routing?

Nested routing in react can be thought of multiple forward slash in the URL.

“www.organization.com/employees”
“www.organization.com/employees/:employeeId”
“www.organization.com/employees/:employeeId/projects”
“www.organization.com/projects/:projectId”

URL naming conventions I strongly recommend:

lowercase only
kebab-case/for-multi-word-url (use dash and not underscore or camelCase)
For any reason, if you plan to change/rename a url, make sure the old url redirects to the new one. …


Last updated on: Jan 17, 2021.

Photo by Ferenc Almasi on Unsplash

Topics Covered:

Comparison between API vs Firebase CLI approach to manage RemoteConfig.

Firebase CLI to manage Remote Config when when you don’t have access to Remote Config.

GitLab CI/CD pipeline (.gitlab-ci.yml) for managing Remote Config.

Sample code examples for remoteconfig.template.json file.

Firebase remote config is a very powerful feature that can bring magic to your applications may it be web or mobile.

  • Remote config helps you set application configurations via firebase cloud console.
  • There configurations can be updated/set on demand. It does not require any deployment process.
  • Consider it like authoring content on CMS; change the required configuration and publish.
  • Version history of the remote config is very detailed and tracing the changes…

Material-UI: A popular React UI framework (material-ui.com)
version 4.11.1
Updated as on: Dec 25, 2020

Photo by russn_fckr on Unsplash

Primary agenda of this story is to cover Theming with Material UI.

At the end of this story, you should have a React JS application with all the colors, typography (fonts), spacing, breakpoints, and other styling options set as default through out the website/application.


Photo by George Bakos on Unsplash

I desperately wanted to get rid of relative paths like “../../../components/Blah” from most of my react application files.
It makes me uncomfortable to see that in the list of imports.
Make react app code more readable with absolute paths. Get rid of relative paths.

Absolute paths for adding components from where without drilling backwards was my need and achieved it adding “jsconfig.json” file. No npm installation required.

ref: https://create-react-app.dev/docs/importing-a-component#absolute-imports

Fortunately this is it. You need to follow simple steps as below enable usage of absolute paths:

  1. Add jsconfig.json file in the root of your project (next to /index.js …

OnePlus Bullets Wireless Z series

Hello folks! Today I am going to review OnePlus Bluetooth earphones. I actually don’t like calling it truly wireless as it bears wires. Although, let me share my review/feedback for OnePlus Bullets is positive. I love it! 😍

✓ Two variants in Bullets Z series
✓ Switch control
✓ Features of OnePlus Bullets Z
✓ Comfy
✓ Price / Cost
✓ Review & Comparison

Why OnePlus Bullets Wireless Z?

Simple, I’m a budget user and didn’t want to spend much for a good pair of earphones.
Official webpage with all details & specs.

There are 2 variants of Bullets Wireless Z that are available to…


Ikea India returns policy: https://www.ikea.com/in/en/customer-service/return-policy-for-india-pub7b960a7b

This is the link for return policy of Ikea India. Somehow I wasn’t quite satisfied reading this page.

Don’t like it, return it!

After a few online orders in Mumbai, I once received a broken glass bowl in the delivery. That’s when I went through return policy and was clueless what is the process to file a complaint/refund.
This time I also wanted to return an Item which turned out to be pretty larger in size than I expected.

There is NO online process for return or replacement of damaged items.

Only thing I found helpful was Ikea customer service number “18004194532”.

Experience was a bit different…

Saurabh Shah

Solutions architect in IT organization. Experience on wide range of solutions for web and mobile apps with cloud integration.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store