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.