React and Django: A Practical Guide with Docker

Install the jungle framework and Django, create a jungle project with the provided commands, start the admin server, and review the initial migration note as you begin making changes.

Set up Docker for a Django API by creating Dockerfile and Docker Compose, installing Python 3.9 and project dependencies, configuring database connections, volumes, and port mappings, then run the server.

Run migrations inside a docker container using Docker Compose, locating the admin_api service and running Python manage.py migrate. Create a Django superuser and log in at localhost:40000/admin.

Create your api in Django Rest Framework by defining a hello view and wiring it to a url under the api prefix, then test get and post endpoints with Postman.

Define a user model with first name, last name, and unique email, migrate the database, fetch all users in a view, and prepare for registration in the next tutorial.

Add a password write-only field to the user serializer to hide the password in API responses during registration, while exposing first name, last name, and email and handling many-to-many relations.

Generate a JWT token by building a payload with user id and expiration time, sign with a secret key using HS256, and set the token in an HttpOnly cookie.

Add role and permission models, connect users to a role with a foreign key and on delete behavior, and implement a many-to-many role-permission relation via a join table, then migrate.

Create and load fixtures for permissions, roles, and users in a dockerized Django app using manage.py loaddata, prepopulating data for admin, editor, and viewer roles.

Extend a permission API view in Django REST framework, create a permission serializer, enforce authentication, and fetch all permissions through a tested admin login flow.

Discover how to implement API viewsets in Django REST framework, exposing list, retrieve, create, update, and destroy, with a string primary key and authentication and permission classes.

Learn to configure a Django REST framework role serializer to return roles with nested permissions by using a permission serializer and many-to-many through relationships.

Completes the five role methods by validating and saving updates via a serializer, returning updated role data, performing delete with no content responses, and testing with Postman.

Build user endpoints with Django rest framework generics by extending GenericAPIView and using retrieve, list, create, update, and destroy mixins to return consistent response data for the front end.

Implement a custom pagination workflow for user lists using page and page_size query parameters, returning the paginated data plus meta including last_page and current page for a scalable api.

Update user data by managing the user–role relation with a serializer field, use a single url related field, apply partial updates, and set a default password.

Implement profile info and profile password api views to handle partial updates via put, validate password confirmation, and save user data for seamless profile management.

Implement a small change to fetch the authenticated user’s data by returning the user’s permissions from the role, exposed to the front end via a lambda function.

Define a Django product model with a title, description, image, and price fields, configure it in settings, run makemigrations and migrate, and verify the new products in the database.

Upload images by configuring a media folder and route, importing the necessary Django REST framework parsers, handling file data from requests, and serving the media via the configured media URL.

Develop and manage an order system by creating order and order item models, migrations, serializers, and api views with authentication and pagination, then seed data and test with Postman.

Create a serializer method field named total to compute each order's sum by multiplying price and quantity across its order items, via a get_total function.

Create a chart API view that uses a raw SQL query to group orders by date, sum item quantity times price, and return labels and totals for the front-end chart.

Implement view and edit permissions for routes in a Django project, using a permissions file, user serializer, and conditional access based on authenticated users.

Enable cross-origin access by installing the corsheaders package for Django, then configure middleware and settings to allow credentials so cookies pass between the frontend and Django during login.

Integrate a bootstrap dashboard template into a React project, convert class to className, fix element closures, and update the public index to create a new component.

Learn how to build and refactor a React app by creating navigation, menu, and dashboard components in TypeScript (tsx), exporting them, and integrating them into update.tsx.

Create a register component in React with first name, last name, email, password, and password confirm, using onChange and onSubmit to prevent default and send data to the server.

Learn how to send data to a server in a react and django app using axios, comparing a promise-based post request with an asynchronous await approach to register a user.

Implement logout functionality by sending a post logout request with Axios, clearing the token from cookies on the back end, and redirecting to login.

Define a role class with id, name, and permissions; create a permission class; assign permissions to roles, display roles on the user list, and enable create, edit, and delete actions.

Implement React Router Link and NavLink with active styling, wire the menu, fix highlight behavior, and set a redirect from the main page to the dashboard.

Implement pagination in a React and Django app to display 15 users per page with next and previous buttons. Manage a page state and fetch users for the current page.

Create a user form in React with first name, last name, email, and a role dropdown; fetch roles on mount, populate the dropdown, and redirect to user list after submission.

Create an edit flow that pre-fills a user form with fetched data, initializes state for first name, last name, and email, and updates the role select accordingly.

Explain how to update a user in a react django app, ensuring unchanged fields preserve their values by binding default state to inputs and handling redirects after save.

Add a roles component in the secure folder, fetch roles with axios, render them in a table with id, name, and actions, and implement create and delete operations.

Create roles in a React and Django app by building a role creation form that loads permissions, renders checkboxes, and submits the selected permissions to the server.

Build a role edit page in React and Django, prefilling data, handling permissions with selected items, and updating the role via a put request.

Build a React products component, fetch product data with Axios, and render a dynamic list showing title, description, image, price, and delete actions.

Learn to implement pagination in a React and Django app by refactoring duplicated code into a reusable pagination component, using last page props and a handle page change.

Refactor a reusable deleter component for React with TSX by extracting a delete button, passing id and endpoint via props, and wiring a handle delete across products, users, and roles.

Create a product form in tsx with title, description, price, and image upload, posting to the products endpoint, and redirecting after saving the test product.

Upload images in a React app by handling file input, creating form data, posting with Axios, and using the response URL to display a new product.

Create an image upload component using tsx, wire props and state for the image value, and implement an image changed callback to notify the parent component when the image updates.

Develop and display orders in a React and Django app by creating an orders component, fetching orders, rendering them in a table, and adding pagination with previous and next pages.

Implement a client-side CSV export for orders by wiring an export button to an Axios get call returning a blob, then create and trigger a download link.

Install c3 and its type definitions, update the dashboard component to render a bar chart with a time-series x axis and sales data fetched via axios.

Explore building a user profile in a React and Django app with Docker, updating name, email, and password with confirmation, using axios calls and redux to prevent redundant requests.

Install Redux, create actions and reducers, configure a Redux store, and wire React-Redux provider to manage user state with an immutable update using a set user action.

Connect Redux with components using React-Redux, map state to props, and map dispatch to props to read and set the user, updating across components to reduce calls to one.

Learn how to implement a TypeScript getter for a user’s full name that behaves like a property, and how instantiating the user with a constructor ensures automatic name updates.

Wrap up this tutorial and recall what you learned from it, then message me with any questions.