TheLazy.Dev
Portfolio GitHub

Blog

react |django |webdev |fullstack

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

sm0ke

Sm0ke

Posted on July 27, 2021

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 - Open-source fullstack product provided by AppSeed and CodedThemes.

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
Enter fullscreen mode Exit fullscreen mode

Step #2 - Create a virtual environment

$ virtualenv -p python3 venv
$ source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Step #3 - Install dependencies (via PIP)

$ pip install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

Step #3 - Start the API server

$ python manage.py migrate
$ python manage.py runserver 5000
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step #2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

Step #3 - Start in development mode

$ npm run start 
// OR
$ yarn start
Enter fullscreen mode Exit fullscreen mode

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.

Django React Datta - Widgets page

Django React - Datta Able, the widgets page.

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

💖 💪 🙅 🚩
sm0ke
Sm0ke

Posted on July 27, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

July 27, 2021