React Berry Fullstack - Available for download in three versions
Tags: webdev, react, fullstack, appseed
Published: 2021-10-04 15:46:14

---
title: React Berry Fullstack - Available for download in three versions
published: true
description: React Berry Dashboard, a modern pixel-perfect dashboard built with Material-Ui components is now available as a full-stack product.
tags: webdev, react, fullstack, appseed
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9v01vgco61qg3y0g08z.jpg
canonical_url: https://blog.appseed.us/react-berry-fullstack/
---
Hello Coders!

This article presents full-stack versions of **[React Berry Dashboard](https://appseed.us/product/react-node-js-berry-dashboard)**, a modern and quite popular dashboard template styled with M-UI (legacy Material-UI) components library.  The React template was enhanced with a simple JWT Token Authentication powered by different API servers (all free): Node JS, Flask, and Django.

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

---

- ✨ [React Berry Node JS](https://appseed.us/product/react-node-js-berry-dashboard) - free product
- ✨ [React Berry Django](https://appseed.us/product/django-react-berry-dashboard) - free product 
- ✨ [React Berry Flask](https://appseed.us/product/flask-react-berry-dashboard) - free product 

---

Another important part is the [Unified API Interface](https://docs.appseed.us/boilerplate-code/api-server/api-unified-definition) shared by all API servers and implemented by the Berry Dashboard. In other words, the transition from a Django backend API to a Node JS API is possible without code changes in the React Frontend. For more information about this concept feel free to read the [documentation](https://docs.appseed.us/boilerplate-code/api-server/api-unified-definition) or contact the support team on [Discord](https://discord.gg/fZC6hup).

---

![React Berry Dashboard - Login Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stssk6m477juh5qr733g.gif)

---

## How to use the code

All full-stack versions of Berry can be compiled and started in a local environment using an identical workflow:

- **Download the API backend**: Node JS, Flask or Django
- Compile and **start the API server**
- Download and **compile Berry React** frontend
- `Create users`, `sign in` and access the private pages.

Let's build in the following section the full-stack version of React Berry using, for instance, a Django API server. The build instructions are provided by the product documentation and the [README](https://github.com/app-generator/django-react-berry-dashboard) file saved on Github.

---

## Build the Backend API Server

The API server that manages the JWT Tokens comes with a simple intuitive codebase and a few nice features: DRF library, JWT Authentication, SQLite persistence, and Docker for deployment.

---

![Django API Server - Open-source Product.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnvdh7s8rb8o7th0gitf.png)

---

**Step #1** - Clone the [sources](https://github.com/app-generator/api-server-django) (published on Github)

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

---

**Step #2** - Create a virtual environment

```bash
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
```

---

**Step #3** - Install dependencies using PIP

```bash
$ pip install -r requirements.txt
```

---

**Step #4** - Start the API server

```bash
$ python manage.py migrate
$ python manage.py runserver 5000 
```

At this point, the Django API should be up & running and we can use POSTMAN to test the service and create users or move forward and build React Berry Frontend.

---

## Compile and start the React UI

React Berry Dashboard is also published on Github and we can compile and start the UI by typing a few commands in the terminal window as specified in product [README](https://github.com/app-generator/react-berry-dashboard).

**Step #1** - Clone React Berry from Github

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

Once the product starts (this might take a while) we should be able to communicate with the API server to create users and authenticate. In case anyone needs to update the backend server address, this can be done in `src/config/constant.js`:

```javascript
const config = {     ...
    API_SERVER: 'http://localhost:5000/api/' 
};
```

---

![React Berry Dashboard - Icons Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5gx834x43c7mc66q3bg.png)

---

In the same way, we can use Flask or Node JS (soon Laravel) as a backend API server for this amazing material-based design.

---

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