React Node JS - Open-Source Fullstack Starters
Tags: react, node, fullstack, webdev
Published: 2021-10-11 16:08:49

---
title: React Node JS - Open-Source Fullstack Starters
published: true
description: A curated list with Open-Source seed projects crafted in React and Node JS on top of modern UI kits: Soft UI Dashboard, Berry Template and Data Able.
tags: react, nodejs, fullstack, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or1pwynobq14xy8dpx8h.gif
canonical_url: https://www.admin-dashboards.com/react-node-js-open-source-fullstack-starters/
---
Hello Coders!

This article presents a curated list with open-source source seed projects crafted in **[React and Node JS](https://www.admin-dashboards.com/react-node-js-open-source-fullstack-starters/)** on top of modern UI kits and templates. All products are actively supported and the permissive license allows the usage for commercial projects (unlimited copies). For newcomers, **Node JS** is an open-source, cross-platform, back-end JavaScript runtime environment, and **React** is a popular JavaScript library for coding user interfaces backed by Facebook. 

*Thanks for reading!* - Content provided by **[Admin Dashboards](https://www.admin-dashboards.com/)**.

---

- ✨ **[React Node JS](https://appseed.us/product/react-node-js-berry-dashboard)** - Berry Dashboard
- ✨ **[React Node JS](https://appseed.us/product/node-js-react-soft-dashboard)** - Soft UI Dashboard
- ✨ **[React Node JS](https://appseed.us/product/react-node-js-datta-able)** - Datta Able 

--- 

All starters are crafted using an identical design pattern where the React UI is decoupled from the Node JS backend and the communication is secured by *web tokens*. To make this article more useful, I will present in the next section how to build the Berry Dashboard using a [minimal programming kit](https://docs.appseed.us/content/tutorials/minimal-programming-kit) (`Node JS`, `GIT` and `VsCode` code editor) and type a few commands in the terminal window.   
 
---

## ✨ How to compile a sample

The mentioned products can be used in many ways (under Docker, with a simulated backend .. etc) but probably the most useful way to use the products is to compile the backend and and frontend and play with the code on both sides. Here is the plan:

- Download, compile, and start the [Node JS API Backend](https://github.com/app-generator/api-server-nodejs)
- Download, compile the [React UI](https://github.com/app-generator/react-berry-dashboard): Berry Dashboard 
- Configure the UI to communicate with the backend
- Register a new user 
- Authenticate and access the private pages 

--- 

### ✨ Download & start the [Node JS API Server](https://github.com/app-generator/api-server-nodejs)

This open-source product is a simple Express server that uses SQLite for persistence and TypeORM as DB interface. Authentication Flow uses json web tokens via Passport library - passport-jwt strategy and the deployment part is covered by Docker. The full list with features are listed on the project [README](https://github.com/app-generator/api-server-nodejs).

---

**Step #1** - Clone the project

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

At this point, we can interact with the server using POSTMAN on address `http://localhost:5000`. 

---

### ✨ Download and compile the [React UI](https://github.com/app-generator/react-berry-dashboard)

Berry Dashboard is a `pixel-perfect` open-source templated styled with **Material-UI**, a popular components library for React. 

---

**Step #1** - Clone the project

```bash
$ git clone https://github.com/app-generator/react-berry-dashboard.git
$ cd react-berry-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
```

The UI starts automatically on port `3000` and expects a running backend server on port `5000`. If anyone need to customize the backend address, this can be done via configuration: 

---

### ✨ Configure the backend server address

**API Server URL** - `src/config/constant.js` 

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

--- 

Once the backend and the frontend are up & running, we should be able to register new users, authenticate and access the private pages. 

![React Node JS Berry - Open-source full-stack project, the login page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vu3jdw96bhkmf0unef2.png)

---

> **Using the same process, we can compile and start the other projects** - In case of any issues, feel free to ask for help in the comments sections. 

--- 

## ✨ [React Node JS](https://appseed.us/product/react-node-js-berry-dashboard) Berry Dashboard

Berry is a creative [React Dashboard](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) build using the Material-UI by CodedThemes. It is meant to provide a nice User Experience with highly customizable feature-rich pages now available in a full-stack product.

- 👉 **[React Node JS Berry Dashboard](https://appseed.us/product/react-node-js-berry-dashboard) - product page**
- 👉 [React Node JS Berry Dashboard](https://react-node-js-berry-dashboard.appseed-srv1.com/) - LIVE Demo

Berry Dashboard is a complete game-changer React Dashboard Template with an easy and intuitive responsive design as on retina screens or laptops.

---

![React Node JS Berry - Open-source full-stack project, the dashboard page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79btlqevenrw2370mbec.png)

---  
 
## ✨ [React Node JS](https://appseed.us/product/node-js-react-soft-dashboard) Soft UI Dashboard

The product comes with a modern, innovative design crafted by Creative-Tim on top of Material-UI. [Soft UI](https://appseed.us/ui-kit/soft-ui-design-system) 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.

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

For a complete full-stack experience, the product is powered by a simple, yet powerful, Node JS API that manages a simple JWT authentication flow: login, register and logout using Express, Typescript, and TypeORM for database interface.

---

![React Node JS Soft Dashboard - Open-source full-stack project, the VR Room page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f4nthmpclyxei933lfc.png)
 
---

## ✨ [React Node JS](https://appseed.us/product/react-node-js-datta-able-pro) Datta Able

Datta Able is a colorful free React Admin Dashboard crafted by CodedThemes. It comes with high feature-rich pages and components with fully developer-centric code.

- 👉 **[React Node JS Datta Able](https://appseed.us/product/react-node-js-datta-able-pro) - product page**
- 👉 [React Node JS Datta Able](https://react-node-js-datta-able-pro.appseed-srv1.com/) - LIVE Demo

**Datta Able** React comes with error/bug-free, well structured, well-commented code and regularly with all latest updated code. This modern UI Kit crafted by CodedThemes features a rich UI Kit and pre-built pages: dashboard, maps and authentication pages.

---

![React Node JS Soft Dashboard - Open-source full-stack project, the dashboard page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/507c3me89t0kqjnhqhtx.png)

---

> **Thanks for reading!** For more resources feel free to access:

---

- 🔥 More **[React Apps](https://appseed.us/apps/react)** (free & commercial) crafted by AppSeed
- 🔥 Free **[React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j)** - a curated list published here on Dev.to