React Material Dashboard - Full-stack Version

#react #webdev #fullstack #appseed

Hello coders,

This article presents the Full-stack version of React Material Dashboard, a premium design crafted by Creative-Tim now usable with multiple API Backend Servers: Node JS, Flask, Django. The UI comes with pre-configured JWT authentication powered by a Unified API Interface that makes this product compliant with more than one backend: Node JS, Flask, Django (FASTapi and Laravel coming soon).

Thanks for reading! - Content provided by App Generator.

Full-stack React Material PRO - LIVE Demo
Full-stack React Material PRO - product page

Product Features

The product aims to help developers skip over the basics and start faster a new full-stack product already enhanced with authentication, a pixel-perfect UI powered by production-ready backends. The fact that makes this full-stack product unique is the JSON-API compliance over multiple servers:

Node JS API: Typescript, Flexible persistence (SQLite, Mongo), TypeORM, Validation
Django API: JWT Authentication over DRF, SQLite, Docker
Flask API: powered by Flask-JWT-extended, SQL-Alchemy, Docker
Coming soon APIs: FASTapi, Laravel API

By default, the UI redirects the guest users to the login page. Once the user is authenticated, all private pages are unlocked.

Implemented JWT Authentication Flow: Login, Logout, Register.

How to use the product

Full-stack React Material Dashboard is built using a two-tier architecture where the UI is decoupled from the backend API server and communicates using requests secured by JWT tokens. The recommended way to start using this full-stack product is to follow a simple setup:

Step #1 - Build and start the backend server
Step #2 - Build and start the UI
Create a new user via the registration page
Authenticate and access the private pages
Add your magic on top of the existing codebase.

Start the backend server

As mentioned before, the UI is configured to work with many backend servers that share a common API interface: Django, Node JS, Flask. Based on your license (free or commercial) the access is granted to the requested API Server. On this page, we will compile and start the free version of Node JS API (open-source product).

Step #1 - Clone the sources

$ 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 and create the required tables

$ yarn typeorm migration:run

Step #4 - Start the API server - development mode

$ npm dev
// OR
$ yarn dev

The API interface used by the API is a simple JWT authentication layer that exposes the following methods:

USERS API:
- /api/users/register: create a new user
- /api/users/login: authenticate an existing user
- /api/users/logout: delete the associated JWT token
- /api/users/checkSession: check an existing JWT Token for validity
- /api/users/edit - update the information associated with a registered user

At this point, the backend API should be & and running on address: http://localhost:5000 and we can move on with the setup and build the React UI.

Start the React UI

The React Material Dashboard being a commercial product, a license is required before getting access to the source code. In case you don't have a license, please access the product page and purchase one.

Step #1 - Clone the project

$ git clone https://github.com/app-generator/priv-react-material-dashboard-pro.git
$ cd priv-react-material-dashboard-pro

Step #2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step #3 - Start in development mode

$ npm run start 
// OR
$ yarn start

Template Page - Pricing cards

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" },
});

At this point this simple full-stack product should be up & usable to create and authenticate new users. For more resources and support, please access: