Django + React : Build a Location-Based Real Estate Website

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course overview

Lecture 2: What we will build

Lecture 3: Course outline

Chapter 2: The basics of React

Lecture 1: Getting started with React

Lecture 2: React components

Lecture 3: Introducing JSX

Lecture 4: More about React components

Lecture 5: React props

Lecture 6: Looping through an array of data

Lecture 7: State (the useState hook)

Lecture 8: Handling events

Lecture 9: More about state

Lecture 10: Navigation with react-router-dom

Lecture 11: Working with links

Lecture 12: Section conclusion

Chapter 3: The basics of Material UI

Lecture 1: Introduction

Lecture 2: Getting started with Material UI

Lecture 3: MUI component properties

Lecture 4: The Typography component

Lecture 5: Heads up!

Lecture 6: Styling with Material UI

Lecture 7: Page layout with Material UI

Lecture 8: More about the container grid

Lecture 9: Building the home page: Introduction

Lecture 10: Building the home page: The Header

Lecture 11: Building the rest of the home page

Lecture 12: Re-organizing the code

Lecture 13: Section conclusion

Chapter 4: The basics of React-Leaflet

Lecture 1: What is React-Leaflet?

Lecture 2: Installing React-Leaflet

Lecture 3: Changing the layout of the “listings” page

Lecture 4: The map marker

Lecture 5: The marker popup

Lecture 6: Storing the position of the marker in state

Lecture 7: Displaying the listings on the map

Lecture 8: Displaying the listings in MUI cards

Lecture 9: Drawing/Importing shapes in React-Leaflet

Chapter 5: Setting up the backend

Lecture 1: Introduction / Virtual environment setup

Lecture 2: Installing Django

Lecture 3: Setting up the listing model

Lecture 4: Adding the Location field to the listing model

Lecture 5: Installing GeoDjango

Lecture 6: Error when adding the POSTGIS extension

Lecture 7: Setting up a spatial database (PostgreSQL & PostGIS)

Lecture 8: Setting up a custom user model

Lecture 9: Creating property listings in the Admin panel

Lecture 10: Creating an API endpoint for property listings

Chapter 6: Connecting Django and React

Lecture 1: Introduction / setting up Django Cors Headers

Lecture 2: Making requests from the frontend to the backend

Lecture 3: Introducing the useEffect hook

Lecture 4: Making requests with Axios and the useEffect hook

Lecture 5: The correct way of fetching data with React

Chapter 7: Handling image fields

Lecture 1: Adding image fields to the listing model

Lecture 2: Rendering images in React

Chapter 8: User authentication

Lecture 1: Introduction / Installing Djoser

Lecture 2: Building the Registration page

Lecture 3: Building the Login page

Lecture 4: User Registration (Part 1)

Lecture 5: User Registration (Part 2)

Lecture 6: Another way of managing state in React

Lecture 7: Using the immer-reducer in the Register file

Lecture 8: Logging in (Part 1)

Lecture 9: Logging in (Part 2)

Lecture 10: Conditional rendering of the header (Part 1)

Lecture 11: Conditional rendering of the header (Part 2)

Lecture 12: Logging out (Part 1)

Lecture 13: Logging out (Part 2)

Chapter 9: Adding listings from the frontend

Lecture 1: Introduction / Updating the listing model

Lecture 2: Building the “Add property page”

Lecture 3: Placing the map on the form

Lecture 4: Uploading images

Lecture 5: Finalizing the form

Lecture 6: Making the request to add a property listing (Part 1)

Lecture 7: Making the request to add a property listing (Part 2)

Lecture 8: Modifying the “listings” page

Chapter 10: Handling user profiles

Lecture 1: Introduction

Lecture 2: Creating the Profile Model

Lecture 3: Using Django signals to create a profile for each user

Lecture 4: Applying restrictions in the “Add property” page

Lecture 5: Building the profile page (Part 1)

Lecture 6: Building the profile page (Part 2)

Lecture 7: Building the profile page (Part 3)

Lecture 8: Modifying the “listings” page

Lecture 9: Building the “Agencies” page

Lecture 10: Displaying the number of listings for each user

Lecture 11: Building the “Agency Detail” page

Chapter 11: Listing detail page

Lecture 1: Introduction / Creating the component

Lecture 2: Setting up the listing detail component

Lecture 3: Building the image slider