app-generator/react-soft-ui-dashboard-pro

React Dashboard - Soft UI Dashboard PRO | AppSeed

Full-Stack Soft Dashboard PRO

Made of hundred of elements, designed blocks, and fully coded pages, Soft UI Dashboard PRO is ready to help you create stunning websites and web apps. The product comes with a simple JWT authentication flow: login/register/logout powered by a Node JS API Server.

• 👉 Full-stack Soft Dashboard PRO - product page
• 👉 Full-stack Soft Dashboard PRO - LIVE Demo

Features

• ✅ Innovative MUI Design - Crafted by Creative-Tim
• ✅ React, Redux, Redux-persist
• ✅ Authentication: JWT Login/Register/Logout
• ✅ Full-stack ready using Node JS API Server (open-source project)
  • Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library - passport-jwt strategy.

Tested with:

NodeJS	NPM	YARN	Status
v16.13.0	v8.1.0	v1.22.5	✔️
v14.15.0	v6.14.8	v1.22.5	✔️
v12.22.0	v6.14.11	v1.22.5	✔️

How to use it

To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository.

👉 Step 1 - Download the product from the official page

$ unzip react-soft-ui-dashboard-pro.zip
$ cd react-soft-ui-dashboard-pro

👉 Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

👉 Step 3 - Edit the .env using the template .env.sample.

REACT_APP_BACKEND_SERVER='http://localhost:5000/api/'

👉 Step 4 - Start in development mode

$ npm run start 
// OR
$ yarn start

Backend Integration

The backend API server address is saved in src/config/constant.js.

export const API_SERVER = "http://localhost:5000/api/";

Frontend api has been created at src/api/auth.js.

const axios = Axios.create({
    baseURL: `${baseURL}/api`,
    headers: { "Content-Type": "application/json" },
});

Register implementation:

• Frontend method with call to backend
• Form validation
• Error handling

Login implementation:

• Frontend method with call to backend
• Form validation
• Error handling

Logout implementation:

• Frontend method with call to backend

User Context:

• The user account is now saved both to the React.Context wrapper and localStorage

Protected routes:

• The user cannot access protected routes like /admin, /rtl without being logged in.
• Example of 3 different routes:

    <ProtectedRoute path="/admin" component={AdminLayout} />
    <ProtectedRoute path="/rtl" component={RtlLayout} />
    <Route path="/auth" component={AuthLayout} />

API Server Descriptor - POSTMAN Collection

The API Server definition is provided by the Nodejs API Server

• API POSTMAN Collection - can be used to mock (simulate) the backend server or code a new one in your preferred framework.

Node JS API Server

The product is also open-source and cis already configured to work with Berry Dashboard Template - product features:

• Nodejs / Express server
• JWT authentication (passport-jwt strategy)
• Persistence: MongoDB

Links

• Node JS API - source code
• Node JS API - product page

---

Full-Stack Soft Dashboard PRO - Provided by Creative-Tim and AppSeed.

react-soft-ui-dashboard-pro's Issues

Remember me button works from right to left in the login page

The remember me button works backwards on the Login page. the button starts out on the right side and when clicked it gets highlighted and ends up on the right side.
I have attached an image of the button

The setup of the project is the same as the one in the quick start here:
https://www.creative-tim.com/learning-lab/react/quick-start/soft-ui-dashboard/
and using the cache provider code

[Flask API] Logout doesn't work

On the PRO version: On starting up React FE and Flask API BE, it directly shows me as logged in; and on hitting 'Sign Out' in the top right corner, it doesn't sign me out.
Are there any settings/configs that need to be changed to make the base version work?
Do provide the steps, thank you.