This content originally appeared on DEV Community and was authored by Sm0ke
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
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:
Django React Datta - Login Page
Django React Datta - Widgets page
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
This content originally appeared on DEV Community and was authored by Sm0ke
Sm0ke | Sciencx (2021-07-27T15:08:55+00:00) Django React – Datta Able (Free Full-stack Product). Retrieved from https://www.scien.cx/2021/07/27/django-react-datta-able-free-full-stack-product/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.