React-Redux Advance CRUD Application

A Complete advance React-Redux CRUD Application using React, Redux, Thunk, Jwt Auth. Live Preview Link - https://react-crud.devsenv.com/

Technology, Framework & Library Used

1. JavaScript
2. React JS
3. Redux
4. Redux-thunk
5. Jwt Auth
6. Bootstrap & React-Bootstrap

Modules & Features:

Public Module

1. Publicly Product Access

Auth Module

1. Sign Up
   1. Email Unique Validation
   2. Frontend Validation
   3. Backend Validation
2. Login to User Panel

Product Module

1. Product List View
   1. Product Pagination
   2. Product Searching
   3. Product Detail View/Less Show in List
2. Product Details
   1. Backup Image while loading fail
3. Create Product
   1. Add HTML Text Editor
   2. Image Upload System
   3. Image Preview System
   4. Frontend/Server Validation
4. Edit Product
   1. Same as Create
5. Delete Product
   1. Sweet Alert Integrate

How to Run:

1. Clone Project -

https://github.com/ManiruzzamanAkash/React-Basic-CRUD.git

2. Go to the project drectory by cd React-Basic-CRUD & Run the

3. Create .env file & Copy .env.example file to .env file

4. Setup your database base url in .env file

5. For the API Project, Here is a link of Github with Laravel - https://github.com/ManiruzzamanAkash/Laravel-Basic-CRUD-API

6. Run the project -

npm start

6. Open Browser - http://127.0.0.1:3000
7. You'll see a Default Product Store Panel.
8. Then Click on top right bar login section to go to login
9. And do the rest of the task as demo below.

Procedure

1. First Page is Public and anyone can access all product information
2. Click Login Now & Manage Products Button at top right corner.
3. In Login Page, you can click on Fil with Admin Credential to auto generate login data
4. Click Login and you're entered in Dashboard
5. In Dashboard, you can see a Product count
6. In Sidebar Click on Product List to see all products uploaded by this account.
7. Create Product
8. Edit Product
9. View Product Detail
10. Delete Product

Demo

Home Page - Public

Login Page

Sign Up Page

Dashboard Page

Product List Page

Product Create Page

Product Create Page with Data

Product Edit Page

Product Detail Page

Product Searching

Issues

Any Issues, Please mail me, [email protected]