Awesome React Template

This is the base template created by Rajan Gautam for Create React App.

URLs:

Source Link

App Source Link

Visit Template Site

NPM URL

Features

This template is already having the following essential features integrated.

1. All the basic libraries that you use will get installed automatically. You don't need to install them explicitly. Then packages include:

"@material-ui/core": "^4.12.3"
"@material-ui/icons": "^4.11.2"
"@reduxjs/toolkit": "^1.6.2"
"aos": "^2.3.4"
"axios": "^0.22.0"
"bootstrap": "^5.1.2"
"node-sass": "^6.0.1"
"react-bootstrap": "^1.6.4"
"react-helmet": "^6.1.0"
"react-loader-spinner": "^4.0.0"
"react-redux": "^7.2.5"
"react-router": "^5.2.1"
"react-router-dom": "^5.3.0"
"redux": "^4.1.1"
"sweetalert": "^2.1.2"

2. The routing setup has already been done, so you don't need to worry about the routing. Routing for Error page has already been handled.

3. The basic setup for Redux-Toolkit has also been done and you can see the Counter app when you run the template app. You can directly start with your Redux application.

4. For SEO, metadata has been added for Google, Facebook, Twitter, LinkedIn, Pinterest, Stack etc.

5. The folder structure has been maintained in industrial standards.

Folder Structure

awesome-react
|___node_modules
|___public
|   │   index.html
|   │   logo.svg
|___src
│   │___Assets
│   │___Components
│   │___Containers
|   |___Data
│   |___HOCS
│   |___SCSS
|   | App.js
|   | index.js
|   .env
|   .gitignore
|   package.json
|   package-lock.json
|   README.md

1. node_modules

It contains all the npm packages.

2. public

It will contain index.html and logo.png.

3. src

It will contain Assets, Components, Containers, Data, SCSS and HOCS folders and App.js and index.js files.

Assets

It will have the static files we are using.

Components

It will have the components you will be using in your application.

Containers

It will have all the pages of your application.

Data

This folder is for Redux-Toolkit purpose.

SCSS

This will be your scss folder and there also folder structure has been maintained. Like we have main.scss file, where we're importing all other scss.

App.js

This is the App.js file.

index.js

This is the main index.js file.

4. .env

The environmental varialbles can be declared here.

5. .gitignore

This is for the git where we have already add common files and folders that are usually ignored.

6. package-lock.json

The locked packages are here.

7. package.json

All the dependencies, scripts are here.

7. README.md

It's me😅

🤝🏻 Connect Me

Rajan Gautam