Full Stack Web Tutorial: Django, React JS, JWT Auth, REST, Bootstrap, Pagination

Timur Bakibayev, Ph.D.
Level Up Coding
Published in
19 min readApr 12, 2021

--

Learn by doing

We will write a Sales Orders Management System using Django REST for the back-end, and React JS for the front-end. We will add authentication with JWT and will cover the back-end with tests.

We will also use the CDN version of React JS, not the “create-react-app”. This will simplify the development, as we WILL NOT need to run two servers: one for Django and one for React.

Of course, we will be using Functional Components in React.

Bonus: Sweet Alerts for beautiful animation :)

Takeaways: complete project source code on GitHub

Contents:

  1. Create a Python Django Project
  2. Define the Models
  3. Add authentication (with tests)
  4. Add tests for sales orders API
  5. Implement the API: GET and DELETE
  6. Implement the API: POST and PUT
  7. Initialize the Front-End with React JS
  8. Import Bootstrap and Sweet Alerts
  9. Authenticate from Front-End
  10. Display the orders table (GET)
  11. Implement “Add new Order”
  12. Implement “Edit Order”
  13. Implement “Delete Order”
  14. GitHub Repository
  15. Conclusion

Create a Python Django Project

I assume you have installed Python3 already.

We will need these libraries to start:

pip install django
pip install djangorestframework
pip install markdown
pip install django-filter
pip install djangorestframework-simplejwt

Create the project and the app:

django-admin startproject sales
cd sales
python manage.py startapp app

This should prepare your project files. Make these changes to settings.py:

Add your app to INSTALLED_APPS:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes'

--

--