React Node Material Kit PRO

Search…
Premium React UI Kit designed by Creative-Tim, coded as a full-stack product by AppSeed
Full-stack version of React Material UI Kit, a premium design crafted by Creative-Tim powered by a Node JS API backend server. The UI comes with pre-configured JWT authentication powered by a Unified API Interface that makes this product compatible with more than one backend: Node JS, Flask, Django (FASTapi coming soon). 
​React Node Material Kit PRO - product page
​React Node Material Kit PRO - LIVE Demo
React Node JS - Material Kit PRO
Product features
The product expects a running API backend that exposes an interface for login/logout and register actions. By default, the guest users are redirected to the login page. Once the user is authenticated using an existing account or the new one, all private pages are accessible. Here are the steps to compile the product. 
Dependencies
To use the product, a decent version of Node JS (>= 12.x) is required, and GIT command-line tool to clone/download the project from the public repository.
 Step #1 - Clone the project (private repository)
1
$ git clone https://github.com/app-generator/priv-react-material-kit-pro.git
2
$ cd priv-react-material-kit-pro
Copied!
Step #2 - Install dependencies via NPM or yarn
1
$ npm i
2
// OR
3
$ yarn 
Copied!
 Step #3 - Start in development mode
1
$ npm run start 
2
// OR
3
$ yarn start 
Copied!
Step #4 - Configure the backend - src/config/constant.js 
1
export const API_SERVER = "http://localhost:5000/api/";
Copied!
​
Build API Server
The product is shipped with a premium Node JS API built with Express, JWT authentication, and SQLite or MongoDB persistence. Authentication Flow uses json web tokens powered by Passport library - passport-jwt. 
Features
Simple, intuitive codebase - can be extended with ease.
Typescript, Data validation with Joy
Branches:
Master: NodeJS / Express / SQLite / TypeORM
Mongo: NodeJS / Express / MongoDB / Mongoose
Auth: Passport / passport-jwt strategy
How to use the code
Step #1 - Clone the project (private repository)
1
$ git clone https://github.com/app-generator/priv-api-server-nodejs.git
2
$ cd priv-api-server-nodejs
Copied!
Step #2 - Install dependencies via NPM or yarn
1
$ npm i
2
// OR
3
$ yarn
Copied!
Step #3 - Run the SQLite migration via TypeORM
1
$ yarn typeorm migration:run
Copied!
Step #4 - Start the API server (development mode)
1
$ npm dev
2
// OR
3
$ yarn dev
Copied!
Step #5 - Production Build (files generated in build directory)
1
$ npm build
2
// OR
3
$ yarn build
Copied!
Step #6 - Start the API server for production (files served from build/index.js)
1
$ npm start
2
// OR
3
$ yarn start
Copied!
The API server will start using the PORT specified in .env file (default 5000).
​
Once both projects (frontend and backend) are up and running, we should see the login page prompted by the React UI. To pass the authentication and access the private page we need to create a new user via the registration page. 
React Node JS Material Kit - Login. 
React Node JS Material Kit - Team cards
React Node JS Material Kit - Team Cards.
React Node JS Datta PRO
React Firebase Datta Able
Last modified 2mo ago
Copy link
Contents
Product features
Build API Server