Full Stack Web Tutorial: Django, React JS, JWT Auth, REST, Bootstrap, Pagination
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:
- Create a Python Django Project
- Define the Models
- Add authentication (with tests)
- Add tests for sales orders API
- Implement the API: GET and DELETE
- Implement the API: POST and PUT
- Initialize the Front-End with React JS
- Import Bootstrap and Sweet Alerts
- Authenticate from Front-End
- Display the orders table (GET)
- Implement “Add new Order”
- Implement “Edit Order”
- Implement “Delete Order”
- GitHub Repository
- 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'…