Full Stack - React Django DRF Channels Project - djChat

Install Python on Windows by downloading from Python.org, choose 64-bit if available, add Python to path, customize installation to install on the C drive, and verify with Python --version.

Install and set up Visual Studio Code on Windows, download the 64-bit installer, and learn to open a project folder, edit Python files, and use the integrated terminal.

Create and activate a Python virtual environment on Windows using Visual Studio Code to isolate project dependencies and prevent Django version conflicts.

Learn how to install and set up Visual Studio Code on macOS, create a project folder, open and manage files, enable auto save, adjust zoom, and use the terminal.

Install python on macOS by downloading the python.org installer for 3.9.5, using the universal two installer for M1/M2, and verify with terminal using python3 --version.

Create and activate a Python virtual environment on macOS to isolate project dependencies, using Visual Studio Code and terminal commands to manage venv.

Learn to initiate project source control with Git and GitHub Desktop, create and track a repository, commit changes, and publish privately for collaborative development.

Create a new Django DRF project in a git repository, open it in Visual Studio Code, set up a virtual environment, install Django and DRF, and run the local server.

Configure environment variables to separate sensitive data from code, improving security and cross-environment management; learn to use python-dotenv, set secret keys and debug values, and access them via os.environ.

Learn how linting and formatting improve readability and correctness in Python projects by using Black with Visual Studio Code, and configure per-project settings for PEP 8 compliance and automatic formatting.

Configure Flake8 in a virtual environment and enable Python linting in Visual Studio Code to catch syntax errors, unused imports, and styling issues on save, aligning with Python project standards.

Learn how to create your first git commit, configure a gitignore to exclude virtual environments and sensitive files, generate a requirements.txt with pip freeze, and push changes to GitHub.

Define a Django custom user model with abstract user to customize authentication and fields, create an account app, register apps, and set AUTH_USER_MODEL to account.Account for easier future migrations.

Create Django models for categories, servers, and channels with proper fields and relationships. Use migrations and Django admin to seed data and enable front-end filtering of servers by category.

Configure DRF spectacular to automatically generate an API schema and view it in swagger UI, including installation, registration, and metadata customization for downloadable and interactive documentation.

Configure the Django REST framework to use session-based authentication by setting a default authentication class in settings, so endpoints authenticate users and serve data to the correct user.

Build a DRF viewset endpoint to filter servers by category for a React front end, using querysets, serializers, and a single endpoint with multiple parameters to filter by category.

Build a drf endpoint that filters servers by the authenticated user using session authentication, returning servers where member matches the current user for frontend display.

Create an api endpoint to filter a server by server id and return that server to front end, with validation and error handling using drf and appropriate http status codes.

Build an api endpoint that filters servers by quantity using a query parameter to return a limited set of servers, such as the top ten by member count.

Return server data together with its related channels by using a channel serializer and the server's foreign key relationship. Leverage the related name to include channel data for each server.

Explore building a Django api endpoint that uses annotation to count server members, expose a num_members field via serializer method field, and conditionally include it through a filter parameter.

Learn to create code comments with ChatGPT version four for small scripts, copying code into the tool to generate helpful annotations while noting indentation and production caveats.

Create Google style docstrings for a Django REST framework function using ChatGPT, detailing query parameters and examples. Demonstrate Swagger UI integration to view the documentation.

Document api endpoints with swagger ui, a schema file, and a decorator to detail query parameters such as category, quantity, by user, and by server id for testing in drf.

Configure Django to store images by creating a media folder, defining the media URL, and enabling image serving in development with URL patterns and settings.

Refactor the Django category model to store an SVG icon with a file field and a custom upload path. Implement update-time replacement and category-deletion cleanup via signals.

Refactor the server model to use image fields for icon and banner, install pillow, define upload paths, allow blank images, and handle deletion via signals to keep assets in sync.

Create Django validators with pillow to enforce uploaded image size and extension. Build a validators.py, check 70x70 max for the icon, validate extensions, and apply to the model field.

Make a new commit on the main branch to capture changes, then push to origin to save the updates to the GitHub repository.

Install Node.js, verify the version, and create a new React project with Vite and TypeScript. Start the dev server with npm run dev to view at localhost:5173.

Create a home component in a new pages directory under src, and export it for routing. Learn to build a concise functional component with an arrow function and React fragment.

Explore client-side routing with React Router, installing react-router-dom and creating a browser router with JSX routes that map '/' to a home component, while introducing TypeScript basics for React components.

Install and integrate Material UI into a React project, using pre-built components and icons to build responsive, design-consistent web apps with Box, flex, and CSS baseline.

Build the primary app bar as a reusable template in a React project, wiring a Material UI app bar with a dense toolbar, theming, and responsive styling.

integrate google fonts into an existing react/mui project by importing IBM Plex Sans in a main css file, overriding typography, and loading it in the app entry to apply globally.

Enable responsive font sizes in the theme to shrink h1–h6 and subtitle1 on smaller screens. Override defaults if needed to ensure fonts adapt from desktop to mobile for readability.

Create a responsive app bar with a left drawer and an icon button that reveals a menu on small screens, using Material UI breakpoints, z-index, useState, useEffect, and accessibility.

Create and configure a primary drawer in the home page, switching between permanent and temporary modes based on screen size, with responsive width, transitions, and an open/close toggle.

Build a toggleable drawer in React by wiring an open/close state to a toggle button, swapping chevron icons, and passing open and close handlers as props.

Create a persistent secondary drawer with material ui, 240px wide and matching the primary app bar height, with a right border and prepare for api data integration by enabling scrolling.

Build the main component as a reusable frame in a React TSX template to host content like chat or servers, with a layout that handles drawers and independent scrolling.

Build a react-django drf workflow by installing axios and making the first api request to fetch categories and their servers. Resolve cors with django cors headers to enable cross-origin requests.

Configure Django CORS headers to allow requests from the React frontend during development. Add CORS headers to installed apps and middleware, and set allowed origins to localhost:5173.

Learn to build a jwt axios interceptor that intercepts requests and responses, configures a dedicated axios instance with a base url, and handles 401/403 errors via navigation to login.

Build a React hook useCrud to perform create, read, update, and delete operations against your API. Centralize requests with an interceptor, base URL, and TypeScript types for reliable data handling.

Create a flexible popular servers component in the primary drawer, fetch data from the API with the crud hook, and render a list of servers with icons and links.

Build the explore categories in the secondary drawer by creating a category API endpoint, serializer, and view set, then render a React ExploreCategories component with linked category items.

Build the main component for exploring servers, wiring the home and category views to display servers by category using useParams and dynamic routes, with grid and card layouts.

Populate the primary app bar's mobile menu by reusing the explore categories component in a dropdown, with a 200px minimum width and theme-based padding for accessible small-screen category access.

Implement dark mode in a React Django app by building a reusable color mode context, a toggle, and a theme that respects system preferences and saves user choice.

Learn how to install Django Channels and switch from wsgi to an ASGI server to enable real-time websockets, routing, and chat functionality in a Django project.

Install uvicorn with pip and run an ASGI server for the Django app, replacing the WSGI server. Configure uvicorn on port 8000 with four workers and auto reload for debugging.

learn how to route http and websocket traffic using a protocol type router in a django channels setup, creating urls, websocket url patterns, and a consumer to handle websocket requests.

Build a django channels consumer to enable sending and receiving messages over a json websocket, integrating front-end and back-end chat functionality.

Build a multi-user chat with Django channels by using channel layers to route WebSocket messages to groups representing chat rooms, with an in-memory layer for local development.

Build a server page template with a left server drawer, middle channels, and a messaging interface. Wire routing to /server/:id and pass server data to components with error redirects.

Implement server channels (chat rooms) by wiring channel data into the server channel component, render channel names, and enable server-channel navigation with id validation and redirects.

Switch between chat rooms by wiring server channels to channel IDs, enabling websockets access to each channel and real-time messaging within selected channels on a Django channels server.

Implement channel message history by saving messages in Conversation and Message models, linking them to channels, with timestamps and cascade deletes, enabling per-channel history in the frontend.

Design a simple server landing page that shows a home screen or a channel chat interface based on URL parameters, pulling server name and description from data.

Builds a dynamic templating solution for the server component, adding a responsive side menu of channels for the selected server and a top app bar showing the current channel.

Learn to implement a message template in a chat interface by displaying avatar, user name, timestamp, and message in a structured list, with inverted scrolling so the message appears first.

Create a fixed bottom, sticky message input with a full-width, multi-line text field (max four rows), handling submit and enter to send, then clear the input.

Implement a bottom-aligned message scroll in the djChat chat interface by building a custom scroll container that auto-scrolls to the latest message when entering a channel.

Learn to manage time and date in a chat app by parsing timestamps with date.parse, formatting date and time using two local time string, and displaying the sender with timestamp.

Install and configure simple jwt for django rest framework to secure user login. Add token and refresh endpoints, test with curl, and implement a login form to obtain access tokens.

Learn how json web tokens enable stateless authentication with access and refresh tokens in a client–server flow, covering login, token expiry, and refreshing tokens, plus security considerations.

Create a login form on the front end using Formic to streamline form state, validation, onSubmit, and submission, with username and password initial values and a /login route.

Build an authentication context and service in React to share login state across components, implement login/logout flows, and manage access and refresh tokens.

Demonstrate authenticating a user with access and refresh tokens to access a protected api endpoint from the frontend, plus building a backend account endpoint that returns the username.

Protect routes in a stateless jwt authentication flow by checking token existence and expiry, using is logged in state in an auth context, and wrapping routes with a ProtectedRoute component.

Build a logout flow that clears tokens and user data from local storage, updates the is logged in status, and validates protected routes via a test login page.

Build a jwt interceptor that automatically refreshes the access token using the refresh token, handling 401/403 and redirecting to login when needed, with configurable lifetimes in settings.

Explore localStorage versus HttpOnly cookies for access and refresh tokens, showing XSS risks, how HttpOnly prevents JavaScript access, and the implications for browser authentication and security practices.

Move from local storage to http-only cookies for jwt authentication by extending simple jwt views, returning tokens as cookies, and configuring cors and with-credentials for secure cross-origin login.

This lecture shows how to extend DRF Simple JWT authentication to read access tokens from cookies, validate them, and authenticate users, with updated settings and frontend calls that use cookies.

Subclass the Simple JWT token obtain pair serializer to include the user ID in the token payload and response, then wire cookies and front-end storage to fetch user details.

Implement token-based websocket authentication with jwt in a Django Channels project, securing the chat server, protecting routes, and handling token validation and user authorization.

Refresh expired WebSocket access tokens using a refresh token, handle 4001 authentication errors, and auto-reconnect with token refresh in a Django Channels setup.

Refactor the chat interface by extracting websocket connectivity into a dedicated chat services module and a useChatWebSocket hook. Separate logic from presentation to clarify responsibilities and improve message handling.

Refactor the app by moving auth services and color mode into the router, wrap with browser router, and use navigate to redirect users to the login page on logout.

Build a logout API in the rest framework to clear http-only refresh and access tokens by resetting cookies with expiry zero, and return a logged out successfully response.

Learn to validate a login form with Material UI and Formik, enforce required username and password, display meaningful errors, handle unauthorized responses, and route on success.

Build a registration form and wire it to the API register endpoint to create users with a username and password, handling 409 conflicts and 201 created on the front end.

Build a server membership system for the djChat app with join and leave endpoints. Connect a front-end membership context to gate channel chat based on current membership.

Learn how to enforce server membership in djChat by validating user authentication and membership via server lookups and the member link table, ensuring only members can send messages in channels.