React, Next.js and Django: A Rapid Guide - Advanced

Install the jungle framework via quickstart, then create a new project with jungle admin start project. Run Python manage.py runserver to start the jungle project.

Configure a Django backend in Docker with a Dockerfile and docker-compose.yml, using Python 3.9 and Django REST framework, and map volumes and ports for live development.

Connect to database via Docker with a YAML file, create a Django custom user model extending AbstractUser using email as username, add rest framework, and run migrations for dockerized MySQL.

Configure a dockerized database service with environment variables, volumes, and a mapped port, then run migrations inside the Django backend container using manage.py migrate.

Create a custom management command wait_for_db to wait for the database, retrying until connected, then start the server using docker-compose up --build to rebuild containers.

Create a custom Django user manager and model, implement create_user and create_superuser, and register the user with the admin while preparing a rest api.

Implement admin authentication endpoints for register, login, get the authenticated user, logout, and update own information and password, in a rapid guide to React, Next.js and Django.

Implement authentication for two Django apps, administrator and ambassador, by sharing common models and routes in a core and common module, and expose a register API via Django REST framework.

Register a new user by building a Django rest framework serializer, hashing the password, and validating password confirmation in the register view, while setting ambassador to zero for admin users.

Develop the login API view by handling post requests with email and password, validating the user with a serializer, checking the password, and preparing for the JWT token generation.

Learn to generate a JWT in Django: build a JWTAuthentication class, create a payload with user id and expiration, sign with a secret key using HS256, and return a HttpOnly cookie.

Explore static methods by refactoring login logic to call functions directly on the class, removing instance initialization, and invoking GwG authentication plus and Gennari JWT as static methods.

Learn how to log out a user by calling the logout API view with a post request, deleting the JWT cookie, and returning a success response to invalidate authentication.

Update your own profile information via the profile info API view. Change first name, last name, email, and password using put requests and partial updates, validated by the user serializer.

Create an admin get endpoint to fetch ambassadors by filtering users with the ambassador flag, using the user serializer in a shared API view.

Use the Faker library to seed ambassador data in a Django project by building a populate ambassadors command, creating 30 users marked as ambassadors with fake names and emails.

Create a product model with title, description, image, and price fields. Migrate, serialize, and expose a CRUD API using a product generic API view with authentication.

Define a Link model with code, user foreign key, and many-to-many products relation; run migrations and build a Django REST API view to fetch a user's links with a serializer.

Develop the order and order item models with their fields and relations, run migrations, and expose data via API views and serializers. Calculate the order total from order items.

Set up the ambassador app in python, configure urls and common routes, and implement register and login api views with ambassador handling via api/ambassador, preparing to cover scopes next.

Learn to implement scope-based authentication using JWT payloads to distinguish ambassador and admin users, validate scope, and restrict access across login routes.

Define a revenue property on the user model and compute ambassador revenue from completed orders and their order items, then include this revenue in the user API response.

Explore ambassador endpoints by adding unique product retrieval methods from both front and back ends, create links, and study our own versus general stats shared across ambassadors.

Create product endpoints using a Django REST framework API view, reuse a product serializer across front-end and back-end, and return serialized product data.

Learn to set up Redis with Django cache, configure default cache, and cache product data using both backend and cache the whole page, demonstrating Docker Compose and performance gains.

Sort products by price using a sort query parameter, toggle ascending and descending orders, and use a reverse flag to control the product list.

Set nine products per page, read the page from query strings, calculate start and end indices, filter the products, and return total, current page, and last page, including search.

Learn how to clear caches for product updates in Django, including backend and frontend cache invalidation using Redis keys and looping through keys in a Docker Compose environment.

Create links via a post request using the link API view and serializer, secured JWT authentication for an ambassador, and assign a six-character random code to products through many-to-many relationships.

Fetch per-user link stats via a stats API view secured with authentication. Retrieve the user’s links, gather related orders, and calculate revenue to format a concise response for each link.

Create a rankings api view with authentication, fetch all ambassadors, compute each revenue, assemble name and revenue pairs, and sort by revenue in reverse order for the response.

Rank ambassadors by revenue using redis sorted sets, adding scores with zadd and retrieving in descending order by score. Update rankings and return r0, r1 in utf8 for front-end use.

Define three endpoints for the checkout flow: fetch order data, create the order with complete false for stripe verification, and update the order from zero to one to complete.

Develop the checkout link data endpoint by building a link API view and serializer to expose a many-to-many relation with products and a user, identified by a unique code.

Create an order via a post request, validate the link, save order data, build order items from products and quantities, and compute decimal revenues for admin and ambassador, returning success.

Apply atomic transactions to wrap orders and order items, ensuring that on error all inserts roll back and the database remains consistent.

Configure and send order completion emails using MailHog in a Django app, wiring the api view to notify admin and ambassador with revenue details and docker localhost considerations.

Create a React admin app with TypeScript, initialize the project using a TypeScript template, and start the development server on port 3000.

Learn to integrate a bootstrap dashboard template into a React project by cleaning starter files and building header and menu components with TypeScript for a reusable navigation layout.

Create pages for users, login, and register, then wire routes with BrowserRouter and exact paths in a React-based setup. Install react-router-dom and apply a dedicated login style and template.

Implement a type-safe logout flow by passing the authenticated user through layout and navigation, handling nullability, and logging out via an API call that redirects to login.

Fetch ambassadors via an API to populate a users list, render a name and email table with actions, and redirect the main page to /users.

Add table pagination using the materiality component, configuring count, page, and 10 per page; slice users from page*perPage to (page+1)*perPage and disable per-page options.

Model links with an id, code and an orders array; build a links page by reusing the users table and calculate each link’s order count and revenue with a reduce function.

Create a products page in a dedicated folder, define a product type with id, title, description, image, and price, and load products into state. Include pagination and delete actions.

Create a reusable product form component to add new products, including title, description, image, and price, handling submit to send data to the server and redirect to the products list.

Learn to update products by adding an edit button, reusing a single product form for create and update, prefilling data with useEffect, and handling data submission across routes.

Build an orders page by modeling orders and order items, listing orders with an accordion, and showing order items in a table with product title, price, and quantity.

Create a profile page with two forms to update your information and password, prefill first name, last name, and email, and use redux to fix duplicate backend requests.

Set up redux in a react project by creating actions and reducers, implementing a set user action and state update, configuring the store, and wrapping the app with react-redux provider.

Set up a React ambassador project, configure port 4000, add bootstrap templates, create a layout and product components, and implement routing with react-router-dom.

Copy common components and redux setup across projects, adjust models for orders, configure ambassador as base URL, and wire login, register, and authenticated user state via redux.

Fix and enhance the header component by wiring dynamic title and description with Redux and user state, switching to revenue-based messaging when authenticated, and updating login and register links.

Create two pages, stats and rankings, to fetch start data from the server and render it in a table using object keys for rank names and revenue.

Build a dynamic product listing in a react/next.js frontend with backend integration, including navigation links, active states, product components, data fetching, and synchronized front-end and back-end rendering.

Implement a product search by wiring a filters state to product components and sending the search query to the backend. Filter frontend results by title and description in lower case.

Learn to implement product sorting by price in ascending or descending order using a dropdown, with filter props and synchronized front-end and back-end logic.

Implement lazy loading and pagination by incrementing the page, loading more products, concatenating with the spread operator on the front end, and hiding the button on the last page.

Add click-to-select functionality for products by maintaining a selected values array, toggling items on click (add or remove), and signaling selection with a border.

Generate links for selected products using a generate function that calls a backend, display notify alerts for success or failure, and auto-hide notifications after a timeout.

Set up a Next.js checkout app in TypeScript, convert pages to tsx, install TypeScript and TypeScript React, and run on port 5000 to enable Stripe integration.

Update the template by integrating bootstrap in a Next.js project, clean up the form by removing unused fields and fixing inputs for a Stripe-ready checkout.

Map routes in Next.js by adding pages for success and error, create a shared layout, and use dynamic routing with code parameter to render and test checkout flows.

Learn to fetch ambassador details and product lists by using useEffect with a code dependency and Axios calls to a backend, then render user and product data.

Initialize all product quantities to zero and update them via a change handler based on product id. Compute the live total by reducing price times quantity across products.

Submit form by mapping inputs to lowercase underscores, using onChange handlers and a submit function posting to /orders with user data and product quantities for Stripe validation in next tutorial.

Learn how to integrate Stripe checkout by using the publishable key, load Stripe.js, and redirect with a session ID to handle payments, errors, and success pages.

Confirm the order by sending a backend request to /orders/confirm using the provided source on the success page. Await the asynchronous operation and complete the checkout flow.