Start your Development with an Innovative Admin Template for Material-UI and React. Soft UI Dashboard React is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. The product comes with a simple JWT authentication flow: login/register/logout.

• 👉 React Soft Dashboard - product page
• 👉 React Soft Dashboard - LIVE Demo

🚀 Built with React App Generator

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

Compatibility matrix using Ubuntu 18.04 LTS as reference.

This material explains how to deploy the product LIVE using the Drag & Drop Deployer.

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

👉 Step #1 - Clone the project

$ git clone https://github.com/app-generator/react-soft-ui-dashboard.git
$ cd react-soft-ui-dashboard

👉 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/'

REACT_APP_GITHUB_OAUTH_CLIENT_ID     = ... # Github OAuth Client
REACT_APP_GITHUB_OAUTH_CLIENT_SECRET = ... # Github OAuth Secret
REACT_APP_GITHUB_OAUTH_REDIRECT_URL  = ... # Github OAuth Callback URL

👉 Step #4 - Start the app using HTTPS (used bu AOuth Callback)

$ export HTTPS=true   # bash
$ set    HTTPS=true   # Windows/CMD
$env:HTTPS = "true"   # Windows/Powershell

👉 Step #5 - Start in development mode

$ npm run start 
// OR
$ yarn start

The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register.

👉 API Server URL - src/config/constant.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};

👉 API Server Descriptor - POSTMAN Collection

The API Server signature is provided by the Unified API Definition

• 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 is already configured to work with Berry Dashboard Template - product features:

• Typescript / Node js / Express server
• JWT authentication (passport-jwt strategy)
• Persistence: SQLite

Links

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

👉 Step #1 - Clone the project

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs

👉 Step #2 - Install dependencies via NPM or Yarn

$ npm i
// OR
$ yarn

👉 Step #3 - Run the SQLite migration via TypeORM

$ yarn typeorm migration:run

👉 Step #4 - Start the API server (development mode)

$ npm dev
// OR
$ yarn dev

The API server will start using the PORT specified in .env file (default 5000).

React OAuth Sample - Provided by AppSeed.