Redux Auth Starter: A Zero Config CRA Template

Redux auth starter is preconfigured Create React App Template with Zero Configuration by running a single command.

What is Redux Auth Starter?

Redux auth starter is a Create React App (CRA) Template, Which is preconfigured with all needed dependencies and set up to build a scalable SaaS application by running a single command.

Why not Create React App?

If we need to develop a react app, Most of us start to develop a react app with Create React App (CRA). CRA has many features like instead reload, optimized bundle, ships with single dependency, ESlint, Testing and Easy to maintain.
But are these features are enough to build a Scalable SaaS application?
Let’s see

For a Basic SaaS app, we need to access API, There will be multiple components, Local state and global state, Authentication, Routes, Good UI and UX.

When using CRA we need to configure the above things manually and this configuration also requires more time, So we need to do this every time when we develop a new app from scratch. To overcome these drawbacks, I have developed redux-auth-starter a CRA template. Where you can overcome the above things by running a single command.

Advantages of Redux Auth Starter

1. Preconfigured store, basic actions and reducers for authentication with Redux.

Redux: A Predictable State Container for JS Apps

2. Public, Private routes setup with basic authentication using React-Router.

Not required to write logic to restrict the user to access private routes before login and public routes after login.

3. Preinstalled Ant Design for UI components.

Ant Desing is an Enterprise-class UI designed for web applications and a set of high-quality React components out of the box.

4. Axios client with GET, POST, PATCH, DELETE API verb helper.

Preconfigured helpers for accessing API using Axios.

5. Absolute imports

No need use ../../../.. to import your components

6. Basic Folder structure with easily customizable.

├── README.md
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── Config
│   │   ├── axiosClient.js
│   │   └── constants.js
│   ├── components
│   │   ├── Dashboard.js
│   │   ├── LoginPage.js
│   │   └── Users.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── redux
│   │   ├── Authenticate
│   │   │   ├── actions.js
│   │   │   ├── reducer.js
│   │   │   └── saga.js
│   │   ├── rootReducers.js
│   │   ├── rootSaga.js
│   │   └── store.js
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

7. Sass enabled. You can use all the sass features.

Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world.

8. Mock Authentication with reqres.

9. ESLint with custom config file

ESLint statically analyzes your code to quickly find problems.

10. Added .env file

The environment variables are embedded during the build time

11. By running a single command

yarn create react-app your-project-name --template redux-auth-starter

Or

npx create-react-app your-project-name --template redux-auth-starter

Use redux auth starter to fasten your development.

Ebook

Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples