Overview

User CRUD management is developed with React, Node and MySQL, that allows you to just not only easily manage users with role-based authentication and authorization but also it comes with a powerful feature of If you want to start big project, then it would be perfect solution for you because its developed base on enterprise level standard for both React and Node. User CRUD Management also comes with fully documented JSON API and the User Interface or admin panel is fully responsive for any device by using the power of adminLte plugin and bootstrap 5.

• Strong security and role-based authorization.
• Standard code structure, easy to understand and customize as you intended.
• Easy setup, member management and built-in integrations.
• Real time logged in and logged out status of Users.
• Auto generated Table/Model Schema for any table you create.     

Security      

Security was one of our main focuses when building this software. It is safe from SQL injection, CSRF attack, XSS attack and provides server-side cookies with jwt Token which is used for Authentication and Authorization to make it more secure.                     

Easy customization

Standard code and DRY rule maintained when building this software. It’s easy to understand and maintain.    

User management              

Admin can create User and Role via admin panel and assign role to users. The permission will be assigned depending on the role. Every user can see which user is logged in and logged out in real time. User can reset password with a link which is generated from backend with reset Token and the link will be sent to the user registered email.

Access management       

Role based permission and control authorization. Admin can see which users are logged in from admin panel. Admin can create table and drop table from the admin panel.

Extensibility            

Application is designed for extensibility; you can create your own modules or features and assign permission in seconds!

Others 

Demo Link: https://user-crud-management.netlify.app/

Documentation Link: https://webera.site/doc.html

Admin Login:

User Name: admin

Password: admin#123

User Login:

User Name: user

Password: user#123          

Functional Feature
o  Integrated with AdminLTE and bootstrap node module, 100% responsive, works well in mobile, tablet, laptop and desktop devices.
o   Interactive Dashboard
o   Add, Update and Delete User and Role.
o   Create and Drop Table and Table Schema
o   See all tables you created with the respective columns from admin panel
o   User Listing with profile image and the data
o   Use SendGrid feature for emailing
o   Option to send email via SMTP.
o   View Current Online Users and offline user in real time.
o   You can view user login activity.
o   User can manage User profile.
o   Every user can Reset User password from panel / in forgot password area.
o   Quick start Guide Documentation to add new features

Technical Features

Node.js with Express.js features              
o   Generic Repository Pattern
o   Unit of work Patterns
o   Followed MVC pattern
o   Standard Naming conventions
o   JWT Token created using bcrypt module
o   Server side signed cookie-based Authentication and permission Based Authorization
o   Used node powerful fs module for writing and schema
o   Server-side error handling
o   Every request is protected with middleware function
o   Single Responsibility Principle
o   All Methods are Async/Await
o   Generic way to Handle REST API Status code
o   Validate Rest Request
o   Client and Server-side validation
o   CORS Settings with cors module
o   Used Sequelize ORM for simplify MySQL query and speed optimized for every query
o   Catch and validate sql errors in nodejs
o   and with many more power feature - buy and explore   

     
React features
o   Separated each feature modules
o   Functional component used for modern design
o   Used Axios for data fetching
o   Data is fetched in React useEffect hook
o   State Management with React state hook
o   Easy to add new feature module
o   Easy to upgrade into latest version
o   Generic Error Handling
o   Loading indicator and data showing after loading

Technology used           
o   Software’s: NodeJS, MySQl
o   Frameworks: Express.JS, Sequelize.JS
o   Library: React.JS
o   Design: Bootstrap5 and CSS3

/******** Installation Guide *********/

--------- We will first install the dependencies for the project -----------
# Open the extracted folder in your favourite code editor
# Open a terminal
# Type the following commnands (without the asterisk ofcourse!)
* cd client
* npm install
* cd ../server
* npm install

This will install all the dependencies for this project.

----------- Now we will setup the env files --------------

For connecting with database you need to have 4 credentials of your hosting database
1. database host name
2. database name
3. database username
4. database password

create a sendGrid account for mailing system or you can use your gmail account
- If you want to use your gmail account for emailing please do these for not having google error

1. Go to your (Google Account).
2. On the left navigation panel, click Security.
3. On the bottom of the page, in the Less secure app access panel, click Turn on access.
4. Click the Save button.

If you have these credentials then -
# create .env file in server folder
then copy and paste the below code and give them their respective value as commented

DATABASE_HOST= // your database host name
DATABASE_NAME= // your database name
DATABASE_USERNAME= // your database username here
DATABASE_PASSWORD= // your database password here
JWT_KEY= // your JWT secret key
JWT_EXPIRE= // your JWT expired time
FRONT_URL= // your app frontend URL
EMAIL_SERVICE= // sendGrid or gmail
EMAIL_USERNAME= // sendGrid apikey or gmail username
EMAIL_PASSWORD= // sendGrid password or gmail password
EMAIL_FROM= // sendGrid email or your gmail
NODE_ENV=development // When uploading on shared hosting change this value to* production *

and in client folder create a .env file
then copy and paste the below code and give them their respective value as commented

REACT_APP_BACKLINK= // your app backend or server link

-------- Run the software locally ----------
In your terminal -
* cd server
* npm run server

after connecting to the server
* cd ../client
* npm start

This will run this software locally

Your Login credentials will be 
username: admin
password: 123456

Now login to your account and go to all users tab and update this account with your own credentials.

----------- Now we can build and deploy the project --------------
# Want to deploy your project on shared hosting?
                   
first in your terminal cd to the client folder
then run the following command - npm run build
this will produce a build folder of your react app
now you can deploy it anywhere on the web

-------------- END -----------------------------