Full Stack - React Django Drf Channels Project - Djchat

React, Django, Channels and DRF. Building a live chat application.

What you'll learn

Develop Django projects with RESTful APIs using Django REST Framework (DRF) and efficiently manage project source control.

Build a robust chat server administration API with features like server filtering, channel management, and related data retrieval.

Create visually appealing front-end interfaces using React, React Router, and Material-UI for seamless user experience.

Integrate external APIs into Django projects using Axios, handle CORS, and implement CRUD operations for efficient data handling.

Implement secure authentication mechanisms using djangorestframework-simplejwt, including token-based login, registration, and WebSocket authentication.

Requirements

Prior experience in using the Django framework would be advantageous

Knowledge of relational database principles would be advantageous

Having a computer would definitely be advantageous

Description

The course focuses on building a chat server administration API and integrating it with a front-end templating framework. It also covers API integration and building chat services with features like authentication.The first module covers source control and project initiation, including creating a new Django DRF project and configuring environment variables. It also teaches configuring Visual Studio Code for linting and formatting.The second module focuses on building a chat server administration API. It covers generating names, designing chat servers, and creating the necessary models and database tables. It also includes configuring API documentation and creating API endpoints for filtering servers and returning related data.The third module introduces front-end templating with React. It covers creating a new React project, routing, integrating Material-UI, and building components like the app bar, primary draw, and principal component.The fourth module covers API integration using Axios. It teaches making API requests, configuring Cross-Origin Resource Sharing (CORS), and creating a CRUD hook. It also includes building components for exploring popular servers and categories.The fifth module focuses on building chat services using Django Channels. It covers installing and configuring Channels, implementing web sockets, and creating chat room functionality. It also includes templating for server pages and implementing message history.The sixth module covers authentication using the djangorestframework-simplejwt library. It covers token-based authentication, creating login and registration forms, protecting API endpoints, and implementing WebSocket authentication.The final module extends chat services with additional features.The course provides a comprehensive guide to building a Django DRF project with chat server administration, integrating with a front-end framework React, and implementing essential features like authentication and chat functionality.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Build Technical Preview

Section 2: Setup Guides

Lecture 3 [Windows] Installing Python

Lecture 4 [Windows] Visual Studio Code Induction

Lecture 5 [Windows] Creating Virtual Environments

Lecture 6 [macOS] Visual Studio Code Induction

Lecture 7 [macOS] Installing Python

Lecture 8 [macOS] Creating Virtual Environments

Section 3: Django DRF Project Initiation

Lecture 9 Source Control: Initiating Project Source Control

Lecture 10 Build: Create a New Django DRF Project

Lecture 11 Build: Configuring Environment Variables for your Project

Lecture 12 Linting and Formatting: Configuring Visual Studio Code for Black Formatting

Lecture 13 Linting and Formatting: Configuring Visual Studio Code for Flake8 Liniting

Lecture 14 Source Control: Create your first commit in a Git repository

Section 4: Chat Server Administration API

Lecture 15 Build: Initiate Chat Server Administration App

Lecture 16 Build: Creating a Django Custom User Model (AbstractUser)

Lecture 17 Build: Chat Server Administration Models (Database Tables and Fields)

Lecture 18 API Documentation: Configuring DRF-Spectacular with Swagger UI: Installation and

Lecture 19 Build: Configuring Default Authentication Classes in Django DRF

Lecture 20 Build: Creating an API Endpoint for Filtering Servers by category

Lecture 21 Build: Creating an API Endpoint for Filtering Servers by User

Lecture 22 Build: Creating an API Endpoint for Filtering Servers by Quantity

Lecture 23 Build: Creating an API Endpoint for Filtering Servers by Server ID

Lecture 24 Build: Returning Related Data - Server Associated Channels

Lecture 25 Build: Creating an API Endpoint for Filtering Servers and Returning Annotation o

Lecture 26 ChatGPT: Creating Code Comments with ChatGPT

Lecture 27 ChatGPT: Creating DocStrings with ChatGPT

Lecture 28 API Documentation: Creating an API Endpoint Decorator for Detailing Endpoints

Lecture 29 Build: Configuring Django to Handle Storing Images

Lecture 30 Build: Model Refactor for Icons and Banners in Django Model (Category)

Lecture 31 Build: Model Refactor for Icons and Banners in Django Model (Server)

Lecture 32 Building: Creating a Django Model Validation Class for Image Field Creation and

Lecture 33 Source Control: Commit and Merge

Section 5: Front End Templating

Lecture 34 Build: Create a new React Project with Vite

Lecture 35 Build: Pages Directory and Home Component

Lecture 36 Build: React Routing Introduction with React Router

Lecture 37 Build: Install MUI and integrate it into the existing project

Lecture 38 Build: Creating the Primary App Bar (Part-1) Framework

Lecture 39 Build: Integrating Google Fonts into an existing React/MUI project

Lecture 40 Build: Responsive Fonts

Lecture 41 Build: Creating the Primary App Bar (Part-2) Responsive

Lecture 42 Build: Primary Draw (Part-1) Framework

Lecture 43 Build: Primary Draw (Part-2) Functionality

Lecture 44 Build: Secondary Draw (Part-1) Framework

Lecture 45 Build: Main Component (Part-1) Framework

Section 6: API Integration

Lecture 46 Build: Install Axios and create first API request (CORS Intro)

Lecture 47 Build: Configuring Cross-Origin Resource Sharing (CORS)

Lecture 48 Build: Create a global configuration file

Lecture 49 Build: Axios Interceptor

Lecture 50 Build: Create a CRUD Hook

Lecture 51 Build: Primary Draw Component - Popular Servers

Lecture 52 Build: Secondary Draw Component - Explore Categories

Lecture 53 Build: Main Component - Exploring Servers

Lecture 54 Build: Primary App Menu - Explore Categories

Lecture 55 Build: Dark Mode

Section 7: Building Chat Services

Lecture 56 Build: Installing Django Channels

Lecture 57 Build: Installing and Managing Uvicorn

Lecture 58 Build: Implementing WebSockets - Routing

Lecture 59 Build: Channel Consumer + Sending and Receiving Messages

Lecture 60 Build: Towards Multiple User Chat Rooms

Lecture 61 Build: Server Page Templating

Lecture 62 Build: Implementing Server Channels

Lecture 63 Build: Switching Chat Rooms (Channels) in a Server

Lecture 64 Build: Implementing Channel Message History

Lecture 65 Build: Server Landing Page

Lecture 66 Build: Templating - Dynamic Channel Selection

Lecture 67 Build: Templating - Message Template

Lecture 68 Build: Templating - Message Input

Lecture 69 Build: Templating - Message Scrolling

Lecture 70 Build: Templating - Message DateTime

Section 8: Authentication

Lecture 71 Build: Installing djangorestframework-simplejwt

Lecture 72 Theory: Refresh and Access Tokens

Lecture 73 Build: Creating the Login Form

Lecture 74 Build: Authentication Context and Authentication Services

Lecture 75 Build: Protecting API Endpoints

Lecture 76 Build: Implement Protected Routes

Lecture 77 Build: Logging Out Users

Lecture 78 Build: JWT Interceptor - Using Refresh Token

Lecture 79 Theory: LocalStorage vs HttpOnly Cookie

Lecture 80 Build: Customising Simple JWT - HTTP Only Authentication

Lecture 81 Build: JWTAuthentication Class Customisations

Lecture 82 Build: Returning the User ID - Subclassing JWT Serializer

Lecture 83 Build: WebSocket Authentication

Lecture 84 Build: WebSocket Refresh Access Token

Lecture 85 Refactoring: useChatServices Custom Hook

Lecture 86 Refactoring: Incorporating Custom Hooks to allow access to the Router

Lecture 87 Build: Removing HTTP Only Cookies on Logout

Lecture 88 Build: Handling Login Form Validation

Lecture 89 Build: Registration Form

Section 9: Extending Chat Services

Lecture 90 Build: Server Membership

Lecture 91 Build: Server Membership Chat Restrictions

Beginners, Developers, Students, and Enthusiasts new to the React and Django Framework,Developers, Students, and Enthusiasts looking to refresh their knowledge of React, Django, DRF and Django Channels