Django React - Datta Able (Free Full-stack Product)
Tags: react, django, webdev, fullstack
Published: 2021-07-27 15:08:55

---
title: Django React - Datta Able (Free Full-stack Product)
published: true
description: Open-Source Fullstack product that uses a simple React UI and Django API Server. 
tags: react, django, webdev, fullstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jjcpn0h2vkhpmtu4el5.png
canonical_url: https://appseed.us/product/django-react-datta-able
---
Hello Coders,

This article presents an open-source full-stack product that uses a decoupled **React UI** and a simple **Django Rest API** for authentication. This simple starter might help beginners to accommodate faster with a full-stack pattern by coding simple features on top of existing code. Sources are available on Github under the MIT License. 

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

---

- [Django React Datta Able](https://appseed.us/product/django-react-datta-able) - product page
- [Django React Datta Able](https://django-react-datta-able.appseed-srv1.com/) - LIVE Demo
- **[Django React](https://appseed.us/product/django-react-datta-able-pro) Datta PRO** - premium version

---

![Django React Datta Able - Open-source fullstack product provided by AppSeed and CodedThemes.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26eqh8vp7u0o5dbhklg1.gif)

--- 

This free product can be used in many ways: the first one might be educational. Beginners can clone the project and experiment the build and code simple things on top of both parts of the project: backend and frontend. Other way is to use the product in production and reuse the features for a hobby or commercial end-product. 

--- 

## How to build the backend

The backend is a simple Django API server built with SQLite, Django REST API and `JSON Web Tokens` and Docker support. 

> Product requirements:

- Python3 (Python2 is not supported) 
- Django 3.2.5 (latest stable version)
- DRF Library

---

**Step #1** - Clone the sources

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

---

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

```bash
$ virtualenv -p python3 venv
$ source venv/bin/activate
```

---

**Step #3** - Install dependencies (via PIP)

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

---

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

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

At this point, the API server should be up and running. 

--- 

Product comes with `Docker` configuration and the set up is considerably faster: 

```bash
$ docker-compose up -d --build
```

---

## Start the REACT UI

To built the UI a decent Node JS version is requited (>= 12.x) and also GIT to clone/download the project from the public repository.

---

**Step #1** - Clone the project

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

--- 

At this point, we should see the React UI running in the browser. By default guest users are redirected to the login page. Once we create a new user and successfully authenticate, the app unlocks all private pages: 

> **Django React Datta** - Login Page

![Django React - Datta Able, the login page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdxdys342gzm8lu9efx5.jpg)

--- 

> **Django React Datta** - Widgets page

![Django React - Datta Able, the widgets page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0i7k87apjgxuduepucp.jpg)

---

> **Thanks for reading!** For support and more resources, please access:

- (free) [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard) - product page
- (free) [React Node JS Datta Able](https://appseed.us/product/react-node-js-datta-able) - product page
- Free [React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) - a curated list published here on Dev