25
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
![](https://res.cloudinary.com/practicaldev/image/fetch/s--2GdGExom--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/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.
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
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:
Django React Datta - Login Page
![](https://res.cloudinary.com/practicaldev/image/fetch/s--uO32ouUm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdxdys342gzm8lu9efx5.jpg)
Django React Datta - Widgets page
![](https://res.cloudinary.com/practicaldev/image/fetch/s--FrUc-Csw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/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 - product page
- (free) React Node JS Datta Able - product page
- Free React Dashboards - a curated list published here on Dev
25