Django & React Codebase

Open-source Django Starter bundled with React, React-Flow provided by App-Generator. The code for this starter is fully explained here.

• 👉 Django & React - LIVE deployment
  • ReCharts sample page
  • ReactFlow sample page
• 🚀 Free Support via Email & Discord

Feature:

• 🚀 Stack: Django & React
• ✅ Tooling: Webpack
• ✅ Design: Datta Able - Free Version
• ✅ Sections covered by the design:
  • ✅ Admin section (reserved for superusers)
  • ✅ Authentication: Django.contrib.AUTH, Registration
  • ✅ All Pages available in for ordinary users
• 🚀 Deployment: Docker, CI/CD flow via Render

Start with Docker

👉 Step 1 - Download the code from the GH repository (using GIT)

$ git clone https://github.com/app-generator/django-react-starter.git
$ cd django-react-starter

👉 Step 2 - Start the APP in Docker

$ docker-compose up --build 

Visit http://localhost:5085 in your browser. The app should be up & running.

Manual Build

Download the code

$ git clone https://github.com/app-generator/django-react-starter.git
$ cd django-react-starter

👉 Build React Frontend

$ yarn       # Install React
$ yarn dev   # development build (with LIVE Reload)
$ yarn build # production build

👉 Build Django Backend

Install modules via VENV

$ virtualenv env
$ source env/bin/activate
$ pip install -r requirements.txt

Set Up Database

$ python manage.py makemigrations
$ python manage.py migrate

Start the APP

$ python manage.py createsuperuser # create the admin
$ python manage.py runserver       # start the project

At this point, the app runs at http://127.0.0.1:8000/.

Charts Provisioning

Open the Django shell and create manually new records:

$ python manage.py shell
>>> from apps.home.models import Sales
>>>
>>> s1 = Sales() # Use the default country `USA`
>>> s1.save()
>>>
>>> s2 = Sales() # Use the default country `USA`
>>> s2.save()
>>> 
>>> s3 = Sales()
>>> s3.country = 'ger' # Create a sale from `Germany`
>>> s3.save()
>>> 
>>> s4 = Sales()
>>> s4.country = 'france' # Ans another one from France
>>> s4.save()

Once the information is saved, the /charts route should render the information:

Codebase Structure

The project is coded using a simple and intuitive structure presented below:

< PROJECT ROOT >
   |
   |-- core/                            
   |    |-- settings.py      # Project Configuration  
   |    |-- urls.py          # Project Routing
   |
   |-- apps/
   |    |-- home/            # Handle the default route  
   |
   |-- frontend/             # React Code
   |
   |-- requirements.txt      # Project Dependencies
   |-- manage.py             # Start the app - Django default start script
   |
   |-- ************************************************************************

---

Django & React Codebase - Open-Source starter crafted by App-Generator.