Make React App

This is indended to build React App based on a customized react template boilerplate. This will assist you create highly scalable, easily maintainable and highly performant React.js applications with different tech stack and development patterns. Once you understand the template, you can personalize your app or can add or remove literally anything and use whichever library or tools you prefer.

Quick Overview

For installing the CLI for cloning Qburst boilerplate, please run:

npm install -g @tessy2728/make-react-app

or                   

yarn global add @tessy2728/make-react-app

Note: If you've previously installed make-react-app globally, we recommend you uninstall the package using npm uninstall -g @tessy2728/make-react-app or yarn global remove @tessy2728/make-react-app and install to ensure that npx always uses the latest version.

Once you installed it globally you can simply call make-react-app my-custom-react-app to start your project.

make-react-app my-custom-react-app
cd my-custom-react-app
npm start

This will create an app my-custom-react-app and start it in port 3000 by default.

Templates

Currently 3 templates are available.

• qb-cra-template (default)
• qb-cra-template-ts
• qb-cra-template-ts-react-query
• qb-cra-template-ts-storybook

qb-cra-tempalte is built upon React JS and Redux Toolkit for state management and will be the default template. Hence, if you simply call make-react-app my-custom-react-app, the app will be created based on this template. For creating a react app using any of the other templates, run make-react-app my-custom-react-app --template <template-name>.

The would be the substring after qb-cra-template.

For Example:

make-react-app my-custom-react-app --template ts 
cd my-custom-react-app
npm start

qb-cra-tempalte will be the prefix for the templates, hence need to supply only the rest.

If you want to create a project with toolkit and storybook integration just run below commands.

make-react-app my-custom-react-app --template ts-storybook 
cd my-custom-react-app
npm start

Features included

• Standard Folder structure
  • Followed Folder by Fearure pattern
• Axios Layer
  • Axios layer is set up with request and response interceptors.
• Redux Toolkit implementation
  • Simplified the way of writing thunks using createAsyncThunk in Redux toolkit. The thunk dispatches the pending action before running your payload creator, then dispatches either fulfilled or rejected based on whether the Promise you return succeeds or fails. Also managing duplicate or unwanted API calls by setting conditional rejection (https://redux.js.org/tutorials/fundamentals/part-8-modern-redux).
• React Query
  • One of the templates contains React Query implementation as well. Please checkout --template ts-react-query for creating apps using react-query set up.
• Storybook
  • We have one template with storybook integration as well. You can quick start with a project with storybook and just need to write your components and stories.
• Authentication
  • Token Authentication with Public APIs (https://apingweb.com/)
• Standard Routing
  • Simulated and covered most of the new features in React Router v6 like, actions, loaders, nested routes, not found fallbacks, redirects (authorization).
• Theme
  • Generate application-wide styles and themes for your components. Change the theme
• TypeScript Support
  • Written the template boilerplates in the most type safe way using TypeScript.
• Linting
  • Enabled linting which helps the developers to write error free code.