Building a Real estate app a full stack web application
using React, Redux and Django with the Django Rest
Framework to implement our rest API
Using Built in Django Admin to do things like
Adding Realtors and Listings
Django React Full Stack Real Estate App | Part 1 -
Overview
This is going to be a real estate application that have a
couple pretty awesome features:
On the Homepage we have a form with a set of criteria
so we can set whether the house we are looking for sale or
rent the minimum price of the home number of bedroom
bathrooms the type square footage the days that it was
listed number of photos that it must have at least 5 photos
keywords each listing is going to have description
so that home we are looking for a home that has school
nearby pool parks things like that and then we also have
the home has open houses or not
so when we submit we will get back some listings
1. You will learn how to use the JSON Web Token
authentication scheme with Django and React.
2. You will learn how to implement pagination using
Django Rest Framework.
Pagination implemented only on the homepage using the
react side
3. You will learn how to implement pagination using only
React.
we also have listing page as well that wil showing all the
listings in the application and we also see all the
pagination
4. You will learn how to implement a contact form.
someone send the message we will seeing the criteria of
who sent the message like their Name email Subject
Message all that gonna be stored in the Admin Panel
5. You will learn how to to customize the Django User
Model.
6. You will learn how to implement custom styling using
SASS.
7. And you will learn how to deploy and Django & React
application using Digital Ocean and Nginx.
In this part I'll be doing an overview of the awesome
application we're going to be building!
To stay up to date with all the strategies and ways to
create successful businesses with your web development
skills, make sure you subscribe to My YouTube channel
Today.
Quick Demo of the Applications we are building both the
Front Facing website and the admin area
Homepage :
Big Search Box with some fields with some functionality
Latest Listings Sections whatever the latest three listings
at the database those will be placed here
we are using postgres for database
Down at the bottom with some static markup with some
services and so on
About page we have some about data and
Realtors Section image and details
Realtors can get added in the admin area and they
automatically will be shown here
and there will be a check box for the seller of the month
so we can choose that in the admin area
whoever the seller of the month will automatically will
show up right at the page
so we have dynamic data from the about page
we have featured listings page
we have six listings right now if more listing added
we have pagination down here since we have set six per
page
we have main image the price some more data if i click
more info that takes us to single listing page we have
breadcrumbs we have the title we have address
we have the realtor
Realtors and Listings are going to have relationship so
that on the listing page we can access any of that
particular realtors information that we want because the
idea here is that each realtor will be assigned certain
listings
as you can see the Kayle Brown is the realtor for this
listings here
we have main image we have some small image that open
up in a light box
we are using light box 2 for this
and we have some Data like the
Square feet
Price Description
Bedrooms
Bathrooms
Lot size
Realtors
Listing Date
Enquiry Button when click it will open a Modal Window
if someone registered and logged in the mail and name
will be auto populated from the database for that user
Take a Look of a Homepage Search Box Functionality
one field has pool in the description so i am going to
search for the word pool it will take to the search result
page which has a
we can search like bedrooms with 3 bedrooms it will go
far a page with has 3 b3drooms
we can also search with a price
we can also search by state or city
so all this search will let you to learn how to set query set
how to filter your data when you are fetching from the
database
New User Account Registration Page
name mail password submit django message format with
using Bootstrap message disappear after 3 seconds using
javascript
now user logged with its credentials it will it to the
dashboard
dashboard is just a list of any inquires that you made
now we if the user like any listings and made an enquiry
with realtor
if we made an same enquiry with a same property it will
throw an error
now they have a dashboard with the enquiry
