Django React - Datta Able (Free Full-stack Product)

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.

Django React Datta Able - product page
Django React Datta Able - LIVE Demo
Django React Datta PRO - premium version

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

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

Step #2 - Create a virtual environment

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

Step #3 - Install dependencies (via PIP)

$ pip install -r requirements.txt

Step #3 - Start the API server

$ 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:

$ 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

$ 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

$ npm i
// OR
$ yarn

Step #3 - Start in development mode

$ 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: