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

In this course, Learn & practice React, Django, Django Rest Framework, GeoDjango, Material UI, React-Leaflet, PostGIS

4.48 (37 reviews)
Udemy
platform
English
language
Web Development
category
instructor
1,579
students
17 hours
content
Jul 2022
last update
$19.99
regular price

What you will learn

Connect React and Django

Build an API with Django Rest Framework

Interactive maps with React-Leaflet

Make spatial queries with Geodjango and PostGIS

Deploy a full stack app with Digital Ocean and Namecheap

The basics of React

The basics of Material UI

The basics of React-Leaflet

Backend Authentication with Djoser

Install Nginx and Gunicorn

Setup SSL certificate

Store media files with Digital Ocean Spaces

Django storages / Boto 3

Description

In this project-based course, we will build a location-based real estate website. It is going to be a full stack web application with Django powering the backend and React Js the frontend.

We are going to build the frontend very fast by using Material UI which is a very easy and intuitive React library for building UI components. Throughout the course we will get to use lots of Material UI components that we will easily style.

We are then going to build the API with Django Rest Framework (DRF) and we are going to make requests to the API with React.

Leaflet is a JavaScript library for building interactive maps. We will add a geographic aspect to this project by placing the property listings on a map. We are going to achieve that with React-Leaflet which provides a binding between React and Leaflet.

We are also going to make our PostgreSQL database be spatially aware by adding the PostGIS extension to it. So, on top of making regular queries to the database, we are also going to make spatial queries (geometric information such as distance).

We are also going to cover user authentication with the Djoser library. We will get end users to add, delete or update property listings from the frontend. We are also going to handle both client-side errors and server-side errors in the forms.

Once we are done building the website on our local machines, we will then deploy it with Digital Ocean and Namecheap. During deployment, we are going to:

  • Push our project to GitHub

  • Get domain names for the backend and frontend

  • Setup a mailbox in “private email”

  • Setup an SSL certificate

  • Install and setup Nginx and Gunicorn

  • Store media file in the cloud with Digital Ocean spaces

I will be using:

  • Windows

  • Python 3.9

  • Django 4.0

  • React 17

  • Material UI 5

The following topics will be covered in this course:

  • The basics of React

  • React hooks (useState, useEffect, useContext, useReducer, useRef, useMemo)

  • The basics of Material UI

  • Styling with Material UI

  • The basics of React-Leaflet

  • React-Leaflet hooks (exp: useMap)

  • Building API endpoints with Django Rest Framework

  • Authentication with Djoser

  • Django signals

  • Making spatial queries with Geodjango and PostGIS

  • Calculating distances

  • Django deployment

  • React Deployment

  • Creating a remote server

After completing this in-depth project-based course, you will know how to connect Django and React. You will also know how take full advantage of a spatially or geographically aware database.

Screenshots

Django + React : Build a Location-Based Real Estate Website - Screenshot_01Django + React : Build a Location-Based Real Estate Website - Screenshot_02Django + React : Build a Location-Based Real Estate Website - Screenshot_03Django + React : Build a Location-Based Real Estate Website - Screenshot_04

Content

Introduction

Course overview
What we will build
Course outline

The basics of React

Getting started with React
React components
Introducing JSX
More about React components
React props
Looping through an array of data
State (the useState hook)
Handling events
More about state
Navigation with react-router-dom
Working with links
Section conclusion

The basics of Material UI

Introduction
Getting started with Material UI
MUI component properties
The Typography component
Styling with Material UI
Page layout with Material UI
More about the container grid
Building the home page: Introduction
Building the home page: The Header
Building the rest of the home page
Re-organizing the code
Section conclusion

The basics of React-Leaflet

What is React-Leaflet?
Installing React-Leaflet
Changing the layout of the “listings” page
The map marker
The marker popup
Storing the position of the marker in state
Displaying the listings on the map
Displaying the listings in MUI cards
Drawing/Importing shapes in React-Leaflet

Setting up the backend

Introduction / Virtual environment setup
Installing Django
Setting up the listing model
Adding the Location field to the listing model
Installing GeoDjango
Setting up a spatial database (PostgreSQL & PostGIS)
Setting up a custom user model
Creating property listings in the Admin panel
Creating an API endpoint for property listings

Connecting Django and React

Introduction / setting up Django Cors Headers
Making requests from the frontend to the backend
Introducing the useEffect hook
Making requests with Axios and the useEffect hook
The correct way of fetching data with React

Handling image fields

Adding image fields to the listing model
Rendering images in React

User authentication

Introduction / Installing Djoser
Building the Registration page
Building the Login page
User Registration (Part 1)
User Registration (Part 2)
Another way of managing state in React
Using the immer-reducer in the Register file
Logging in (Part 1)
Logging in (Part 2)
Conditional rendering of the header (Part 1)
Conditional rendering of the header (Part 2)
Logging out (Part 1)
Logging out (Part 2)

Adding listings from the frontend

Introduction / Updating the listing model
Building the “Add property page”
Placing the map on the form
Uploading images
Finalizing the form
Making the request to add a property listing (Part 1)
Making the request to add a property listing (Part 2)
Modifying the “listings” page

Handling user profiles

Introduction
Creating the Profile Model
Using Django signals to create a profile for each user
Applying restrictions in the “Add property” page
Building the profile page (Part 1)
Building the profile page (Part 2)
Building the profile page (Part 3)
Modifying the “listings” page
Building the “Agencies” page
Displaying the number of listings for each user
Building the “Agency Detail” page

Listing detail page

Introduction / Creating the component
Setting up the listing detail component
Building the image slider
Displaying more information about the property listing
Displaying information about the seller
Displaying the points of interest on the map (Part 1)
Displaying the points of interest on the map (Part 2)
Displaying the points of interest on the map (Part 3)
Displaying the points of interest on the map (Part 4)
Deleting a property from the frontend
Updating a property from the frontend

Handling feedbacks

Introduction / Login page feedback
Signup page feedback
“Add property” page feedback
Profile update feedback
Listing update feedback
Listing delete feedback
User logout feedback

Handling form errors

Introduction / Errors in the login form
Client-side errors in the registration form (Username)
Client-side errors in the registration form (Email)
Client-side errors in the registration form (Password)
Client-side errors in the registration form (Password retype)
Server errors in the registration form (unique username or password)
Server errors in the registration form (password validation)
Errors in the “Add property” form

Deployment

Introduction
Initializing the project with Git
Pushing the backend project to GitHub
Setting up a remote server with Digital Ocean
Creating a new user in the remote server
Setting up a firewall
Setting up Django in the remote server
Creating a “settings” file in the remote server
Running the migrations in the remote server
Setting up Gunicorn
Setting up Nginx
Setting up a domain name for the backend
Adding the domain name to the remote server
Setting up a domain name for the frontend
Updating the URLs in the requests (Part 1)
Setting up a Private Email mailbox and an SSL certificate
Updating the URLs in the requests (Part 2)
Digital Ocean spaces / Django storages
Compressing images with Pillow
Fixing the digital ocean one-click-app refresh problem
Updating the registration process
Code cleanup

Reviews

Abhilash
May 22, 2022
One of the best Django project-based courses. Waiting for a more exciting Django course from the instructor.
Regina
May 5, 2022
This course is hands-on and easy to follow. Everything just works as you try it. Everything is explained in simple words and terminology is defined before it is used. No acronyms and such out of the blue that make you scratch your head "What's that". Even if you are new to web development, this class provides you the fundamentals you need to build a completely functional location aware application in React, connect it with a database, and deploy it to a cloud provider.

Charts

Price

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

Rating

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

Enrollment distribution

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

Coupons

DateDiscountStatus
4/21/2022100% OFF
expired
8/2/2022100% OFF
expired

Related Topics

4628904
udemy ID
4/5/2022
course created date
4/21/2022
course indexed date
Mauricio
course submited by