Skip to content
UdemyReactPaid courseBeginner levelCertificate

Django + React : Build a Location-Based Real Estate Website (Udemy.com)

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

Created by: ABDEL KARIM DIOUF

Last updated February 2023

icon
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

How it compares

Against the other 173 rated Udemy courses in React on CourseDuck:

  • Rating4.2 out of 5higher than 16% of them
  • Reviews191#133 of 174 by number of reviews
  • Length17.7 hourslonger than 58% of them
  • Last updatedFebruary 2023earlier than 60% of them

icon
Course 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 (Updated for React 18-Works perfectly fine, check out the lectures on the Bonus section for more details)

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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

ABDEL KARIM DIOUF

With a background in Civil and Water Resources Engineering, I began my career working on the design and delivery of essential infrastructure such as water supply systems, wastewater networks and stormwater drainage projects. My responsibilities also included land surveying and site engineering, where I used total stations, differential GPS and drones to collect accurate field data and support construction activities.

During these projects, I saw how valuable Geographic Information Systems (GIS) are for understanding sites, managing assets and supporting engineering decisions. This experience sparked a strong interest in programming, especially using Python to analyse spatial data, automate technical workflows and improve project efficiency.

Over time I expanded these skills into full-stack development and began creating GIS-enabled applications that support everyday engineering tasks such as mapping, data collection and project monitoring.

Today I combine my engineering background with modern digital skills to explore better ways of planning, visualising and managing civil infrastructure. My courses focus on practical programming that supports real engineering work in water, civil and site engineering, helping learners develop useful tools and build smarter, data-driven solutions.

icon
More React courses

$139.99

$94.99

$74.99

$69.99

$89.99

$99.99

icon
Reviews

4.2

191 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Abdulaziz on 9/18/2025

It has been very insightful, and I have learned a lot from the tutor. I would like to congratulate the tutor for taking the time to prepare the course material and for explaining the concepts with such clarity. I am looking forward to the remaining part of the course.

By Andrew Browne on 11/2/2023

Great course for first time user of React. The course is well paced and easy to follow along with. If you have prior experience coding in Javascript and wan't a crash course in React and Material UI, this is for you!

By Pedro on 10/15/2023

Please consider a v18 upgrade or else the videos are hard to follow as of $today. I was disapointed after discovering that the course and MUI styling was not updated to React 18. Although we have a bonus section with what needs to change to make it "React 18 compatible" (and in fact it's a small change), it assumes that you have your project complete using React 17 and only then you change a few bits to make it R18 compliant. Still, we would have to follow along all videos using legacy coding and convert in realtime as we go. When time is limited, this slows down the pace considerably.

By Sandor Kornhauser on 6/29/2023

The course covers a lot of material. I really learned a lot about mapping, authentication and API requests. For improvement, I think some of the code could be simplified and refactored in some parts. As for deployment, there are configurations that could be a lot cheaper; but I understand that would require much more detail about servers. The course is definitely worth taking

By Geoff Dix on 5/28/2023

I had a lot of trouble after installing package react-router-dom, the npm start command failed to run. I looked on the Udemy course pages and could not fand any help and went back to earlier lectures to see if I had missed something. I wasted a several hours searching for a solution before uninstalling NodeJS v18 (latest) and installing an earlier version - NodeJS v16.20. Very frustrating GD The lessons are going along well - only minor errors (on my part) to debug. Much better now

By Vivien HOUNSOUNOU on 4/12/2023

This is trash, don't buy: - editor font size is so small, who does that when you are recording videos for other people? Terminal font size is ridiculously small, who does that in broad 2022/2023? - volume is ridiculously low, didn't invest in proper micro. Difficult to hear what he is saying at all time - copy/paste code snippets without explaining where it's coming from and what it's doing. Didn't get a thing about section 42 That's why I like to stick to the few like Brad Traversy, Maximilian Schwarzmuller and Mosh Hamedani but unfortunately, they can't offer everything. I repeat, DON'T BUY

By Anthony Narine on 3/7/2023

The course and instructor was great. You learn a lot building this project out. I didn't give it a full 5 and this has nothing to do with the instructor. Abdel took the time to answer multiple questions i had and was very helpful. MUI unfortunately had a new version come out and if you're new like I am you will have to spend some extra time getting up to pace with the new version, other than that, amazing course.

By Rory Samson on 1/3/2023

So far so good. I wanted a somewhat speedy recap on modern react that I can follow along with my preferred react scripts (vite with typescript and TSW). Aside from getting re-acquainted with react I am particularly interested in incorporating django in future projects as a back end, looking forward to it. Abdel has a very precise, dryly humorous approach that I love! My only note so far is it might be a good idea to use Vite scripts instead of CRA in a future iteration of the course. Not because CRA doesn't do the job well enough, but because popular programming influencers tend to recommend against using it these days, and it might turn-off potential students. There are some patterns that might cause issues in React 18 strict mode (unnecessary useEffect usage), but I personally enjoyed refactoring these aspects of Abdel's solution.

By Sam S on 11/24/2022

Exceptionally good. Wholesome tutorial covers A-Z of a nice useful project explaining concepts around Backend, Frontend, Django, React, authentication, authorization and real life kind of deployment. Tutor demonstrated his expertise and kept the learning process very interesting and engaging too. Great value for money and our time. Waiting for more courses from Karim.

By Regina Obe on 5/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.

Showing all 10 reviews on CourseDuck

Read all 191 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 84 / 100