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

Install node, create a React app, and start the server with npm start to view localhost:3000, then explore public folder and index.html to see React rendering components into DOM.

Learn how to create and reuse React components, use self-closing tags and proper capitalization, import and export components, and render them across the app to build a modular user interface.

Demonstrate building components with JSX, using fragments to wrap elements, applying JavaScript expressions, and a function to render grammatically correct sentences and handle numbers with absolute values.

Learn to create and organize React components by installing a React extension, building and importing components in a folder, and preparing for props in the next lesson for real estate.

Learn how props pass data to React components, using customizable attributes like name and color to render dynamic content with curly braces syntax.

Learn to loop through an array of data with the map method, access each item's name and color, and render a list with a unique key in a component.

Learn how to manage state in React using the useState hook, with an apples example and a login-triggered header change that shows state-driven rendering.

Learn to handle events in React by creating increase and decrease buttons, wiring onClick handlers, and updating state with a function that uses the current value to increment or decrement.

Master state management in React to conditionally render components, control styling, and use a ternary operator for display based on state.

Learn to implement client-side routing with react-router-dom in a single-page React app. Navigate among home, login, listings, and property pages hosted at localhost:3000 while setting up routes and links.

Practice client side routing in a react single page app using the link component to navigate between login and listings without full page reloads.

Master the basics of React and quickly pick up Material UI, preparing you to extend your project with hooks in the next session.

Advance from React basics by setting up navigation to the homepage, login, and listing pages. Plan hooks and forms, and adopt Material UI for faster front-end development.

Install Material UI and follow the get started guide, importing components to build interfaces; explore the button component, its API, and color properties for customization.

Explore mui component properties, inspecting color, size, and variant props in the api docs, and learn to manage button color with React useState, triggering a color change on click.

Explore the typography component to replace standard text elements, set variants and alignment, and apply inline styling to headings, body text, and buttons in a Django + React project.

Install dependencies and style components with the makeStyles hook from Material-UI, define a styles object, apply classes via className, and wrap the app with StyledEngineProvider injectFirst.

Label components in Material UI, create a custom card, and arrange it within a 12-column grid using container and item, with a CSS baseline reset.

Explore how grid containers adapt with row and column directions, adjust justify content and align items, and use item containers to manage responsive layouts.

Build the homepage with a header, logo, and navigation to property listings, agencies (users), add property, and login or profile, plus a central button to view all listings.

Build a functional header for a location-based real estate site by configuring a navigation bar with logo, listings, agencies, property, and login, plus basic styling and hover effects.

Build rest of the home page by adding an image that covers the whole view with overlay text and a see all properties button linking to listing, with responsive styling.

Re-organize the code by applying a CSS baseline globally, detaching the header into an independent component for reuse, and wiring in navigation with useNavigate to route home, listings, and login.

Conclude this section by expanding knowledge of MUA and its native components, explore IMU-y components, and in the next section learn reacting to flat while setting the instance pitch.

Learn how React-Leaflet uses the open source Leaflet library to render interactive maps, display property listings with type-specific icons, show points of interest, and zoom to properties.

Install and configure react-leaflet to render interactive maps, set up a map container with center and zoom, and add markers for property listings using OpenStreetMap tiles.

Change the listings page layout by using a two-column grid with a left empty space and a right card list, and keep the map sticky as you scroll.

Explore how to place and customize map markers with latitude and longitude, and use leaflet icons for apartment, house, and office listings in a Django + React real estate site.

Learn to build a rich marker popup with typography, images, and a button, styled inline to form a polished info card for a location-based real estate map.

Store the marker's latitude and longitude in React state and update its position dynamically with functions like go east and go center, letting the map marker move based on state.

Display property listings on a map using markers from an external data file with latitude and longitude. Add type-based icons, popups with title, image, truncated description, and a details link.

Map the listings to a MUI card grid, rendering each property with a title, image, description, and price overlay.

Draw lines, circles, and polygons on a react-leaflet map using coordinates, adjust color, weight, and opacity, and import shapes from external files to delimit London boroughs.

Set up the back end by creating a Python virtual environment, installing Django and other packages, building the property listing model, and exposing all listings via an API endpoint.

Install Django inside the activated virtual environment, create a new Django project with django-admin startproject, and set up the backend API while React handles the front end.

Create a Django listings app listing model with fields for title, description, area, borough, property type, sale or rent, price, rental frequency, rooms, furnished, and posted date.

Add a point field to the listing model to store latitude and longitude for a location-based real estate site. Use a 4326 spatial reference and geos point for geographic queries.

Install GeoDjango on Windows or Linux, including selecting the correct binary extensions, configuring a virtual environment, and validating geometry support for spatial queries in Django.

Set up a PostgreSQL database with pgAdmin, enable the PostGIS extension, and connect Django to the new database before running migrations for the listing model and the Django user model.

Customize the Django default user model by adding a required email field, create a dedicated users app, and configure AUTH_USER_MODEL, migrations, and the admin panel for registration.

Register listing and user models in Django admin, implement a listing form with latitude and longitude as a point, using a clean method, and prepare an API for React frontend.

Serialize the listing model with Django REST framework to create a JSON API endpoint for property listings, using a listing serializer and a ListAPIView.

Connect the front end and back end by enabling cross origin resource sharing with Django cors headers, installing the package, adding it to installed apps, and configuring allowed origins.

Make frontend requests to the Django backend with fetch and the actions library, handle JSON responses, and render property listings in React using useEffect.

Introduce the useEffect hook in React by creating a component, running code on mount with an empty dependency array, and using useState to manage a count, with console logs.

Learn to replace fetch with axios for data requests in React, using useEffect and async/await, store results in state, render listings and markers, and add basic error handling.

Learn to fetch backend data in a React app, manage loading state, and safely render property listings with a cleanup function that cancels requests to prevent memory leaks.

Add multiple image fields to the listing model, install Pillow, configure media root and media url, and migrate to enable uploading pictures via the admin panel.

Render listing images in a React front end for a Django real estate site. Ensure media is served during development and verify both servers run to display pictures correctly.

Install and configure the authentication library to enable token-based registration, login, logout, and password reset, with migrations and admin panel verification.

Build a frontend Register component in a Django + React app with four fields (username, email, password, confirm password) in a grid, and provide a link to the login page.

Quickly set up the login page on the front end and adjust the form to sign in. Implement react router navigation to login and sign-up paths for seamless page switching.

Register users by posting from the front end to the Django endpoint, sending username, email, password, and password confirmation. Use useEffect and state to trigger on form submit at localhost:8000.

Bind form fields to state with onChange and useEffect to track username, email, and password, delivering a working registration that saves to the back end.

Discover how to manage complex React state with the useReducer hook, replacing useState in multi-property scenarios; build a reducer, dispatch actions, and update multiple values.

Consolidate register form state with an immer reducer, replacing separate fields with a single state and dispatch-driven updates for username, email, and password fields.

Implement a front-end login for Django + React real estate app by submitting username and password to the backend and obtaining an authentication token, with state managed by a reducer.

Learn to reflect a logged-in state by fetching authenticated user data from /users/me using the login token, store that token from the response, and display the username in the header.

Retrieve user information after sign-in and render the header with the user name instead of a log in button. Pass data via context and dispatch to enable header conditional rendering.

Learn to render the header based on authentication by using a global state with use context, display the username of the logged-in user, and persist login data in local storage.

Implement a user-triggered logout flow by adding a username button that reveals profile and logout options via a menu, then style and test the ui.

Learn to implement a logout in a Django + React real estate app by clearing local storage, posting to /token/logout to destroy the token, and redirecting to the homepage.

Update the listing model to include a seller field linked to the user and replace location with latitude and longitude for front-end property submissions via a draggable map marker.

Develop the add property page on the front end with a submit-enabled form, accessible at /property for signed-in users, including title, description, area, price, rooms, and image uploads.

Learn to embed an interactive map in a property form, drop a draggable marker, extract latitude and longitude, and dynamically pan and polygon-annotate boroughs for London real estate listings.

Add a single 'upload pictures' button to support up to five images for a property listing. Store uploads as an array and render image names for user feedback.

Finalizes a dynamic, responsive real estate listing form by configuring fields, dropdowns for listing type and property status, grid layouts, and conditional price display based on status and rental frequency.

Create a property listing by building a form data payload with title, area, price, and pictures, then post when send request increments using useEffect and seller id from global state.

Create a backend endpoint for adding property listings using a generic api view, duplicate code, keep the serializer, and route the frontend to /create and then redirect to /listings.

Modify the listings page by adding a map marker button on each card to fly to the property and display the seller username, while ordering listings by date posted.

Build the profile model and profile page to view and update profiles, with auto-created backend profiles on sign-up, then build the agency and agency title pages.

Create a one-to-one profile model for each user with cascade delete, including agency name, phone, bio, and a profile picture; use Django signals to auto-create profiles on signup.

Use Django signals to automatically create a profile for every new user by wiring a post save signal to a create profile function and registering the signal in apps.py.

Learn to enforce adding a property by fetching the current user profile, storing agency name and phone, and conditionally rendering the submit button for various login states.

Build a profile page for a Django + React real estate site to collect agency name and phone number, fetch the user profile, and update it via a form.

In this part, build and update the user profile on a Django and React site by wiring the update form, including profile picture handling, to the back-end profile update API.

Prefill the profile form with server data via a child component, enable profile updates with conditional picture display, and show a loading spinner while data loads.

Modify the listings page to display the seller_agency_name instead of the seller user name by updating the listing card and using the backend listings endpoint, reflecting the serialized data approach.

Display the number of property listings per user by adding a seller listings field to the profile serializer, using a method field to return the seller's listings.

Build the agency detail page by creating a React component, routing by agency id, fetching the agency profile and its listings, and displaying the profile photo, bio, phone, and listings.