> For the complete documentation index, see [llms.txt](https://appseed.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appseed.gitbook.io/docs/products/full-stack/react-purity-dashboard.md).

# Full-Stack React Purity

Premium Chakra UI Dashboard designed by Creative-Tim, coded as a full-stack product

Full-stack version of **React Purity PRO**, 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](/docs/boilerplate-code/api-server/api-unified-definition.md) that makes this product compatible with more than one backend: Node JS, Flask, Django (FASTapi coming soon).

* [Full-stack React Purity Dashboard](https://appseed.us/full-stack/react-purity-dashboard) - product page
* [Full-stack React Purity Dashboard](https://fullstack-react-purity-dashboard.appseed-srv1.com/#/auth/authentication/sign-in/basic) - LIVE Demo
* [UI Docs](https://bit.ly/31AjAwt) - provided by Creative-Tim

![React Purity Dashboard - Full-stack Version](https://4080083720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYVW6MKCi9iujNc3SK_%2Fuploads%2FfU7Mi0RgTcedptPFmlxM%2Ffs-react-purity-pro-charts.png?alt=media\&token=f59d516d-a424-46fc-a66b-66654678f05e)

## Product Dependencies

To successfully compile and use the product, please make sure your workstation has the right tools installed and accessible in the terminal window:

* [Node JS](https://nodejs.org/en/) 12.x version (or above) - used to build both parts (frontend & backend)
* [GIT](https://git-scm.com/) versioning command-line tool - used to clone the sources from Github
* A code editor: [VsCode](https://code.visualstudio.com/) or [Atom](https://atom.io/)
* Ability to work in the terminal window

## 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](/docs/boilerplate-code/api-server/node-js.md): Typescript, Flexible persistence (SQLite, Mongo), TypeORM, Validation
* [Django API](/docs/boilerplate-code/api-server/django.md): JWT Authentication over DRF, SQLite, Docker
* [Flask API](/docs/boilerplate-code/api-server/flask.md): 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.

![Full-Stack React Purity Dashboard - Login](https://4080083720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYVW6MKCi9iujNc3SK_%2Fuploads%2Fi4efjtRSCtxLpRF6F580%2Ffs-react-purity-pro-login.png?alt=media\&token=216af51e-46f7-4cc5-9f38-e2b2bf94dd54)

## **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](/docs/boilerplate-code/api-server/django.md), [Node JS](/docs/boilerplate-code/api-server/node-js.md), [Flask](/docs/boilerplate-code/api-server/flask.md). Based on your license (free or commercial) the access is granted to the request API Server. On this page, we will compile and start the free version of Node JS API (open-source product).

> Start [Node JS API Server](/docs/boilerplate-code/api-server/node-js.md) - open-source version

**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` - edit 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

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

**Step #2** - Install dependencies via NPM or yarn

```bash
$ npm i
// OR
$ yarn
```

**Step #3** - Start in development mode

```bash
$ npm run start 
// OR
$ yarn start
```

## Backend Integration

> The backend API server address is saved in `src/config/constant.js`.

```javascript
export const API_SERVER = "http://localhost:5000/api/";
```

Frontend api has been created at `src/api/auth.js`.

```bash
const axios = Axios.create({
    baseURL: `${baseURL}/api`,
    headers: { "Content-Type": "application/json" },
});
```

## Purity React Dashboard

*Official Product Information* **-** Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Purity UI Dashboard PRO is ready to help you create stunning websites and webapps.

* [Purity React PRO](https://bit.ly/3BDMqIs) - template version
* [Purity React PRO](https://bit.ly/3k7g4jw) - LIVE Demo

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. Every page is spaced well, with attractive layouts and pleasing shapes. From specially designed dashboards for smart homes, virtual reality, and automotives to CRM admins, Purity UI Dashboard PRO has everything you need to quickly set up an amazing project.

![React Purity PRO - Styled with Chakra UI](https://4080083720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYVW6MKCi9iujNc3SK_%2Fuploads%2F7dCH24PJEJ1FvZhBEsJp%2Ffs-react-purity-pro-dashboard.png?alt=media\&token=42ff391b-220a-440a-80da-c2704dfd64df)