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.
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
