React NodeJS Purity - Open-source Full-Stack Seed Project
Tags: react, fullstack, opensource, webdev
Published: 2021-10-26 14:39:47

---
title: React NodeJS Purity - Open-source Full-Stack Seed Project
published: true
description: Open-source full-stack product crafted on top of Purity Dashboard, a modern design from Creative-Tim using React and Node JS as the backend framework.
tags: react, fullstack, opensource, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp5uphnrozx4lffsl5wb.png
canonical_url: https://blog.appseed.us/react-nodejs-purity-dashboard-open-source/
---
Hello Coders! 

This article presents an `open-source` full-stack project crafted on top of a pixel-perfect Chakra UI design using [React and Node JS](https://appseed.us/product/node-js-react-purity-dashboard). **Purity Dashboard** can be downloaded from Github under the MIT license and used for unlimited hobby & commercial projects.  The product is built in two-tier pattern where the **React** UI is decoupled from the backend and `communicates securely using JWT tokens` managed by the **Node JS Backend**. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- ✨ [React Purity Dashboard](https://appseed.us/product/node-js-react-purity-dashboard) - product page
- ✨ [React Purity Dashboard](https://node-js-react-purity-dashboard.appseed-srv1.com/#/auth/signin) - LIVE Demo

---

![React Node JS - Purity Dashboard, open-source project.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3mak7lhyrgbbpu4hmpf.gif)

---

## ✨ Product Features

This full-stack ready seed product comes with a few useful features out-of-the-box that might help beginners, and not only, to code and deliver faster a new end-product using modern technologies.

- Modern UI - **Purity Dashboard**, crafted by Creative-Tim
- `JWT Authentication Flow` - Login, Logout, Register methods
- `Production-ready API Server` - Node JS/Express
- `Docker support` for backend and the frontend
- Free support via Github (issues tracker) and [Discord](https://discord.gg/fZC6hup)

**Purity UI Dashboard** 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. All components can take variations in color, that you can easily modify using Chakra's style props.

Designed for those who like modern UI elements and beautiful websites, Purity UI Dashboard is ready to help you create stunning apps and dashboards. This Free Chakra UI Dashboard is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.

---

> Purity React Dashboard - User Profile

![React Node JS Purity - Profile Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zirbsy7s3jovo26fawra.png)

---

> Purity React Dashboard - Billing Page

![React Node JS Purity - Billing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tib5tfi6yjv977dte5mn.png)
 
---

## ✨ How to use the product

This open-source product is a complete full-stack seed product that covers all layers from the UI to the database using a two-tier architecture:

- React Frontend (Purity Template)
- JWT Authentication: users can register, Sign IN, and logout
- Node JS Backend:  responsible with persistence

In order to use the product, we need to build both parts: the `API backend` and the `React Frontend`. Both parts are already configured to work and communicate using compatible settings. 

---

### Start the Backend Server

**Step #1** - Clone the [Node JS Backend](https://github.com/app-generator/api-server-nodejs) from Github

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

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

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

**Step #3** - Run the SQLite migration via TypeORM

```
$ yarn typeorm migration:run
```

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

```bash
$ npm dev
// OR
$ yarn dev
```

**Step #5** - Production Build (files generated in `build` directory)

```bash
$ npm build
// OR
$ yarn build
```

**Step #6** - Start the API server for production (files served from `build/index.js`)

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

At this point we should be able to test the API server using POSTMAN or any other command line tool like `curl` to create and authenticate new users by sending requests with bellow signatures: 

> **Register** - `api/users/register`

```
POST api/users/register
Content-Type: application/json

{
    "username":"test",
    "password":"pass", 
    "email":"test@appseed.us"
}
```

<br />

> **Login** - `api/users/login`

```
POST /api/users/login
Content-Type: application/json

{
    "password":"pass", 
    "email":"test@appseed.us"
}
```

--- 

### Start the React UI

> **Step #1** - Clone [Purity React](https://github.com/app-generator/react-purity-ui-dashboard) (from Github)

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

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

---

> Configure the backend server

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` 

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

Once the React UI is up & running, we should see the login page: 

![React Node Purity Dashboard - Login Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf7lisv0m1zqba0yx7d6.png)

--- 

> Thanks for Reading! For more resources, feel free to access: 

- 👉 More [React Apps](https://appseed.us/apps/react) - index provided by AppSeed
- 👉 Free [React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) - a popular article published on Dev