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.
- Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library -
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 |
✔️ |
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:https://localhost:5000/api/'
👉 Step 4 - Start in development mode
$ npm run start
// OR
$ yarn start
The backend API server address is saved in
src/config/constant.js
.
export const API_SERVER = "http:https://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.
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
.