Node JS React - Soft Dashboard (open-source Full-Stack project)
Tags: react, node, fullstack, opensource
Published: 2021-10-11 07:52:50

---
title: Node JS React - Soft Dashboard (open-source Full-Stack project)
published: true
description: Open-source full-stack project crafted by AppSeed and Creative-Tim on top of React, Node JS, and Material-UI design: Soft Dashboard (open-source project).
tags: react, nodejs, fullstack, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd6ggkcsa9blubtu6bz6.png
canonical_url: https://blog.appseed.us/node-js-react-soft-dashboard-free-version/
---
Hello Coders!

This article presents an open-source full-stack seed project crafted on top of **Soft UI Dashboard** (free version) using **[React and Node JS](https://appseed.us/product/node-js-react-soft-dashboard)** for the backend logic. The product comes with a modern UI, a production-ready Node JS API backend and JWT Authentication flow for `login`, `logout`, `register` actions. For newcomers, **React** is a popular JavaScript library for coding user interfaces backed by Facebook, and **Node JS** is an open-source, cross-platform, back-end JavaScript runtime environment. Thanks for reading!

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

---

- 👉 [Node JS React Soft Dashboard](https://appseed.us/product/node-js-react-soft-dashboard) - product page
- 👉 [Node JS React Soft Dashboard](https://node-js-react-soft-dashboard.appseed-srv1.com/authentication/sign-in) - LIVE demo

---

![Node JS React Soft Dashboard - open-source full-stack seed project.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgf5bhh83xivmvht9rgf.gif)

---

This open-source full-stack product can be downloaded directly from Github and compiled locally with a few commands typed in the terminal. In order to successfully build the product, make sure the workstation environment has a [minimal programming kit](https://docs.appseed.us/content/tutorials/minimal-programming-kit) already installed and accessible in the terminal: `Node JS`, `GIT`, and a modern editor like `Atom` or `VsCode`.

---

## ✨ How to build from [sources](https://github.com/app-generator/react-soft-ui-dashboard) 

- Clone and download the [Node JS API](https://github.com/app-generator/api-server-nodejs) backend
- Start the API server on port `5005` (default port)
- Clone and compile the [React Soft Dashboard UI](https://github.com/app-generator/react-soft-ui-dashboard)
- `Configure the frontend` to communicate with the API

The frontend comes already configured to communicate with the API server using port 5000. For more information please access the product page that provides the link to the official documentation.

---

## ✨ Soft Dashboard - UI Presentation

This innovative design is crafted by Creative-Tim on top of Material-UI, the most popular components library for 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. 

> [Soft UI Dashboard React](https://www.creative-tim.com/product/soft-ui-dashboard-react) - product page (template version)

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. Soft UI Dashboard React has everything you need to quickly set up an amazing project.

---

![Node JS React Soft Dashboard - Login Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w92j9uynib5kvas9rd4.png)

---

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

---

![Node JS React Soft Dashboard - RTL Sample Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1jkigxvpmfvx5l4a4qr.png)

---

> **Thanks for Reading!** For more resources, please access:

--- 

- [AppSeed](https://appseed.us/) for more [React Apps](https://appseed.us/apps/react) or support
- Free [React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) - a curated list published here on **Dev.to**