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.
The backend is a simple Django API server built with SQLite, Django REST API and
JSON Web Tokens and Docker support.
- 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
Django React Datta - Widgets page
Thanks for reading! For support and more resources, please access: