React & Django Full Stack: Advanced

Set up two separate projects for a full-stack app, creating a Django backend API with Django REST framework and a React frontend, while configuring Python virtual environments and project scaffolding.

Create a Django REST framework backend by adding a group model with name, location, and description, plus serializer and view, then wire routes and migrate to test with the frontend.

Register models in Django admin, test the API with Postman, and verify group data flows from admin to API endpoints, ensuring serializer and routing work end-to-end.

Connect a React front end to a Django backend by fetching data with the use effect and fetch API, and configure CORS headers to enable local access.

Fetch data and display it on screen by using useState and useEffect to store groups and render them with map, including loading and error handling.

Refactor the app by moving components to a dedicated components folder, creating a group list component, updating imports, and removing unused logos, animations, and clutter for a cleaner, modular UI.

Learn to integrate Material UI in a React project, install it via npm, load Roboto fonts and Material Icons, and explore components, styling, and theming to speed development.

Create the app layout by building header, sidebar, and main components, and ensure list items use unique keys and display ids from the api serializer.

Import and place a logo as an asset, define a root CSS variable for background color, and apply it to the header to unify the app’s styling.

Learn to style a two-column layout with CSS grid in a React and Django full-stack app, creating a sidebar and main area, and using color variables for consistency.

Harness Material UI theming to define a custom palette and typography, wrap your app in a ThemeProvider, and apply primary and secondary colors across components.

Add a router with react router dom and wrap the app in a browser router. Make the group list clickable to navigate to a details page using switch routing.

Enable navigation by wrapping each list item in a Link from react-router, routing to details and passing the dynamic group id so the details view can render the selected data.

Build a group details component that reads the group id from the URL using a router hook and displays content for the selected group, paving the way for data fetching.

Learn to fetch a single group by id and centralize api calls into a group service, simplifying components and reducing duplication while handling list and detail data.

Learn to create a custom hook in React to fetch group data, handle loading and error states, and extract shared logic from components for cleaner code.

Create a new event model linked to groups with team one and team two, and time fields, plus serializers, views, and admin integration for managing event data.

Apply the new event model to the database via migrations, create and update API endpoints, and use serializers to expose related events for groups.

Learn to apply multiple serializers for one model by using a group serializer for lists and a full group serializer for details, overriding retrieve with context-aware data.

Demonstrate displaying a nested model in a React/Django app by rendering group name, location, and description, and listing related events with a map and React fragments.

Learn to manage dates and time zones when displaying events, converting to a universal format for consistent read/write across clients, using the looks library for formatting.

Learn to format datetime by importing a date-time library, parsing the event time with from format, and producing a reusable date and time display in 24-hour and 12-hour formats.

Add icons to the event list using Material icons, import the calendar today and time icons as React components, then style them with Material UI styles.

Learn to create component-scoped styles with makeStyles and style object, applying per-component styling to icons. Define colors object in theme and access it via a theme provider for app-wide consistency.

Explore user authentication in a django rest framework app by generating and using auth tokens, enabling login, per-user token creation, and endpoint-based token access to the API.

Implement a custom authentication flow in Django REST Framework by creating a custom token view that returns the token plus serialized user data (id and username).

Extend Django user data by adding a user profile model linked one-to-one to the user, include an image field with dynamic upload path, and expose it via nested serializers.

Implement a login ui that authenticates via the api by collecting username and password with styled text fields and a submit handler that prevents page refresh.

Authenticate from front-end by posting user credentials to the API via fetch, handling the JSON response to obtain a token and user profile, and store them for app-wide awareness.

Build a React context and provider to share authentication data and tokens across components, using a custom hook to access user info from anywhere.

Wrap your application with the authentication provider to expose a shared authentication context across components, using a hook to access and update authentication data and the user.

Explore local storage for persisting login state in a React and Django full stack app, including get, set, and delete operations, string-to-object conversion, and provider-based state management.

Demonstrate a logout flow by clearing local storage and updating the user interface to show the username when logged in, using a context provider for global access.

Build a register component in a React/Django full-stack app, add a register link, and implement a front-end form with username, password, repeat password, and email, with client-side password match validation.

This lecture demonstrates enhancing a rest framework API to register users securely by customizing the user serializer with write-only password, adding a users endpoint, and preventing password exposure.

Implement a custom user creation flow with a serializer that handles profile data, validates input, hashes passwords, creates the user, links a profile, and issues a token.

Registering a user from the frontend uses the backend register endpoint, sending username, email, password, and a one-to-one profile, handling serializer results and token creation.

Organize your react project by moving user components into a dedicated folder, updating imports, and creating an account component to handle post-registration information and authentication flow.

Learn to enable avatar uploads by building a front-end file input, creating form data, and sending a multipart request to an api to update the user profile on the server.

Configure Django to serve static and media files, define static and media roots, wire URLs, and display uploaded avatars from the API in the front end.

Create a reusable user component that receives user data via props to display username and avatar, using Material UI Avatar and custom styling for consistent layout across the app.

Define PropTypes to enforce prop contracts, using shapes for user and profile, and mark required fields like name and image.

Implement a change password feature via rest api by sending old and new passwords from the front end, validating and updating the user password with a custom serializer.

Develop a front-end change password form with old, new, and repeat fields, connect to the backend change password endpoint via a user service, and ensure passwords match before submission.

Demonstrate adding a notification system in a React Django app using a notification container and manager with the React Notifications plugin to show alerts for password changes and image uploads.

Create a reusable utils function to convert API responses to JSON, validate 200–300 status, and throw errors for non-OK responses, enabling centralized error handling across front-end services.

Configure token authentication and permissions in a DRF viewset. Define authentication and permission classes, test access with or without a token, and enforce access rules for actions.

Discover how token-based authentication uses headers to authorize API calls, enabling actions like password changes and securing user data via front-end services.

Implement a many-to-many member model to link users and groups, including admin and unique together constraints, index optimization, and corresponding serializers and admin views for managing group membership.

Enhance a group serializer by embedding member data and using a serializer method field to build a custom members list, including per-member points and user details instead of IDs.

Display and serialize group members by rendering user objects in a reusable component, showing usernames, profiles, and points in group details. Enable joining and leaving groups.

Learn to build a custom join group API in a React and Django full stack app, validating data, creating member records, and returning clear success or error messages.

Learn to implement leave and live group functionality in a React and Django full-stack app, including API calls, member retrieval, and UI toggling based on group membership.

Learn to determine if the authenticated user is in a group by checking group members with their user id, using useEffect to update state, and toggle join or leave actions.

Add a new comment model linked to groups and users with automatic timestamps, enabling group conversations. Include group comments in the group serializer for display, and implement migrations.

Develop a front-end workflow to display group comments by creating a comments folder with plural and singular components, passing group and user data through props, and rendering each comment description.

Split comments into smaller components, including a single-comment display, and style the container with a grid and tape-like borders. Prepare typography and time formatting while enabling comment creation.

Implement a multiline text field for comments, enable a submit button when text exists, and post the comment via API with token, group, and user data to update the list.

Build and manage event functionality by creating an event list component, wiring it to group events, enabling an event detail view, and a UI to create new events.

Create a new event component, display it in the event list, and enable clicking to navigate to an event detail page by passing the event id via a dynamic route.

Fetches full event details on click using the event id, mirroring the group details flow with an event hook and a dedicated event service.

Build a bet model for events with user and event relations, score fields, and points; implement minimal and full serializers and expose bets via the API.

Fetch event data from the API and display its team and time in the event component. Implement loading and error handling with state-driven rendering once data arrives.

Enhance the front end by displaying teams, scores, and user bets in the events go component. Implement conditional rendering, map bets, and a table-based layout to present users and points.

Design a front-end number input form to capture match scores, store them via an api, and prepare secure scoring with admin validation and cheating prevention.

Create a custom post endpoint named place to handle bets, disable the default API create actions, and enforce validation, token-based user retrieval, and event-time constraints before betting.

Place bets via a single endpoint that creates or updates a bet by validating user group membership and event timing, then saves score1 and score2 from the request.

Connect the front end to the new bets place API by implementing a place method, sending token-authenticated requests, and updating the UI for new and updated bets.

Discover how to pass state to routes using React Router history and location, create an event form that receives group data, and read state with useLocation.

Style a reusable TextField component with Material UI, create a shared elements file, and apply a custom theme to produce white text on a dark background with label styling.

Learn to build a reactive event creation form in React for a Django backend by handling submit, managing team and time fields, and integrating date-time pickers.

Create an event by capturing input, converting to UTC with Luxon, and posting to the events API with token and data, then navigate back to the group details.

Fix the user interface for event creation by resolving the utc daytime mismatch with a timezone library, and improve the interface with clearer forms, icons, and navigation links.

Compare each event's time with the current moment to distinguish future from past, enable or hide the betting form, and use a date-time library to display a human-readable time difference.

Enable an admin UI in a React and Django app to set event scores, using conditional rendering and a ternary operator for past and future events.

Create a Django API endpoint to save event scores and compute points for all bets, awarding 3 for exact scores and 1 for correct outcomes.

Update event pages in a Django API-backed React app by sending updates through a serializer, reflecting live score changes, and enforcing admin-only edit permissions with user notifications.

Learn to check if the current user is admin for an event by using a serializer method field and user context, fetched via the event's api and group members.

explore styling events in a React and Django full stack app by implementing conditional rendering, basic styling with accent colors, layout tweaks, and responsive elements for event pages.

Update the members view by fetching real points from bets, then use Django's aggregate sum to compute each member's total and display it in the group details component.

Learn how to assign gold, silver, and bronze trophies to top members by points, sorting data on the front end, and rendering dynamic icons with color-coded classes.

Restrict serialized data by showing only the current user's bets for an event until the event starts, implemented with a custom serializer method field and backend filtering.

Add a new serializer field to return the number of bets for an event, query the database, and display it in the user interface with conditional visibility.

Learn to refactor a group list into reusable components, passing group data via props, and handle navigation with React Router history to the group details page.

Style group list items as components in a React and Django full stack app, using a bordered container grid to show name, location, and member counts.