Node JS API - With React UI: Berry Dashboard
Tags: webdev, node, mongodb, fullstack
Published: 2021-07-09 08:19:12

---
title: Node JS API - With React UI: Berry Dashboard
published: true
description: Simple Node JS API server built with Express, MongoDb, Typescript
tags: webdev, nodejs, mongodb, fullstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5dt8d1wuz7nv2oten1h.png
---
Hello Coders,

This article presents a simple **Node JS API Server** built with `Express`, `SQLite` and `Typescript`. The product can be used to bootstrap fast a backend server or just for educational purpose. To make this article more useful, I will mention an open-source React Dashboard already configured to work with this Node/Express server. 

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

---

- ✨ [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code
- ✨ [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard) - Full-stack Seed Project 

(already configured to communicate with the Node JS API Server)

---

![React Berry Dashboard - Open-source full-stack seed project crafted in React and Material UI.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2t35rwhy7q0yg4h7xdj.jpg) 

---

## ✨ How To use the code

As mentioned, product has a simple codebase and anyone with a basic NodeJS knowledge can compile and start locally the server with just a few commands typed in a terminal window. Bellow are the build commands extracted from the README file. Before type anything, please make sure you have a decent [Node JS](https://nodejs.org/) version, the recommended version is 12.x or above. Another dependency is to have a [MongoDB](https://www.mongodb.com/) Server up & running. 

---

> ✨ **Step #1 - Clone the sources**

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

---

> ✨ **Step #2 - Install dependencies**

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

---

> ✨ **Step #2 - Start the API server** (development mode)

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

Once the server is up & running, we can use POSTMAN to query the API server and check out the responses. The API definition of the server is also available on Github at [this](https://github.com/app-generator/api-server-nodejs/blob/master/media/api.postman_collection.json) location. 

By default, our server starts on port `5000` but we can customize the value in the `.env` file saved in the root of the project. 

> The API: 

- Register - create a new user
- Login - authenticate the user and returns a (JWT) Token on success
- Logout - kill the session 
- Check Session  - verify that a session is still active

---

### ✨ Registration request

Using [POSTMAN](https://www.postman.com/) we can test the API server with ease. Let's create a new user:

**Edit the URL**

```javascript
http://localhost:5000/api/users/register
```

**Edit the Request Body**

```javascript
{
    "username":"test",
    "password":"pass", 
    "email":"test@myserver.com"
}
```

If the user is successfully created, we should see something like this in the response field:

```javascript
{
    "userID": "60e7db4331173d284832a0ab",
    "msg": "The user is created"
}
```

![Node JS API - Registration API request in POSTMAN.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xsbupfcakmbl4z8xdrd.jpg)

--- 

Pretty simple! In a similar way we can authenticate the user or check if the session is still active or not. 

--- 

### ✨ Authenticate User (login)

**Edit The URL**

```javascript
http://localhost:5000/api/users/login
```

**Request Body**

```javascript
{
    "password":"pass", 
    "email":"test@myserver.com"
}
```

The response should include the generated JWT Token and from this point we can perform request and access the private section exposed by the API. 

--- 

Where to go from here? We can connect a React UI to *talk* with our simple API and authenticate users. 

--- 

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

This open-source React Dashboard, **designed by [CodedThemes](https://codedthemes.com/)**, can be download from the [product page](https://appseed.us/product/react-node-js-berry-dashboard) (no registration lock) or directly from Github. 

---

> ✨ **Step #1** - Clone the project

```bash
$ git clone https://github.com/app-generator/react-berry-admin-template.git
$ cd react-berry-admin-template
```

---

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

Once the React UI is up and running, we can create and authenticate users and get access to the private area of the site. 

---

![React Node JS Berry - Login page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gz0mdlvxuy7mlwmuyso1.jpg)

---

> ✨ React Node JS Berry - UI Icons

![React Node JS Berry - UI Icons page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hukznf0vp4g8u3yi9wgt.jpg)

--- 

> Thanks for reading! Feel free to AMA in the comments.

- For [Support](https://appseed.us/support) - access the AppSeed platform
- [Berry Dashboard](https://berrydashboard.io/) - the React UI crafted by [CodedThemes](https://codedthemes.com/).