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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!