Build React Node Aws Mern Stack Real Estate Marketplace App

Beginners guide to build full stack JavaScript app using MERN (MongoDB Express React NodeJs) stack & AWS from scratch.

What you'll learn

Frontend Web Development with React

Backend/API Development with NodeJs and MongoDB

Learn to use AWS services like IAM, SES and S3

Full Login and Registration system with Email Confirmation

Forgot and Reset Password Implementation

Google Maps and Places API for Maps and Address Auto-complete

Using Google Geo-location Service for Nearby Locations based Search

Multiple Image Uploads with AWS S3

AWS SES for Sending Emails to Real Estate Agents (sellers)

Advance CRUD (create, read, update, delete)

JWT Based Authentication, Authorization and Route Protection

React Context for State Management

Real Estate Listing for Buy, Sell and Rent Properties

Properties Like and Unlike Features

Wishlist, Enquired Properties List and Ad Management

Advance Property Search with Combination of Multiple Filtering Options

User Profile Update

Agents Public Profile Page with their Listings

Load More Pagination

User Dashboard for both Buyers and Sellers (Agents)

More than 100 How-To Solutions

Requirements

Basic Understanding of JavaScript

Basic Understanding of React

Basic Understanding of NodeJs

Description

Welcome to one of the most comprehensive Full Stack JavaScript course where you will learn how to build a production quality app from scratch. This course will teach you how to build a Real Estate Marketplace app using MERN (MongoDB ExpressJs ReactJs NodeJs) Stack. Each lessons are represented as how-to solutions for easy learning and understanding the concepts.Building a massive project such as a marketplace requires a lot more than just coding experience. You should be able to plan the entire system, execute the tasks one by one until you have a fully working project. A marketplace usually consists 2 types of users. Buyers and sellers. In this app, one group of users will be buyers (people looking to buy or rent houses) and other group will be sellers (real estate agents or house/land owners wanting to sell/rent their properties).Usually this type of projects are very complicated but not anymore. Yes, you heard me right. I believe in simplicity. No matter how complex the project is, if you have used the simplest and cleanest solutions as building blocks, your app will become incredibly easy to build, manage and scale.There are massive amount of topics covered in this course. Every little detail has been covered. Every line of code has been explained. The knowledge you gain building this marketplace can be used to build any type of full stack apps. Here are some of the course highlights:Complete login registration system with email confirmation, forgot and reset passwordsJWT based authentication, authorization with refresh tokenAWS services such as IAM (Identity and access management) S3 (Simple storage service) and SES (Simple email service)Google maps and places API for displaying maps and address dropdown auto-completeGeo-location based search based on lattitude and longitudeMultiple image uploadsAdvance CRUD with MongoDB using mongoose ODM (Object document mapping)JWT based authentication, authorization and route protection (both server and client)State management with React ContextReal estate listing for buying, selling and renting house and landsContact emails for buyers to communicate with sellers (Real estate agents or home owners)Ads (Real estate listings) like and unlike featureUser wishlist, enquiried properties list and created Ads management (create, read, update and delete)Advance searching with multiple search combinations (buy, sell, rent, price range, nearby location etc)User profile update and public profile viewsLoad more pagination featureUser dashboard (for both buyers and sellers)Includes well over 100 how-to solutions that can be used as a guide to build any projects in futureThe project you will build in this course is the simplest yet most powerful app you will build while learning the fundamentals of full stack app development online. Enroll into this course to join me in this incredible journey.

Overview

Section 1: Introduction

Lecture 1 Course introduction

Lecture 2 Are you ready for this course?

Lecture 3 Download source code from Github

Section 2: NodeJs and MongoDB Project Setup

Lecture 4 How to initialize NodeJs project?

Lecture 5 How to create Node Express server?

Lecture 6 How to connect to MongoDB locally?

Lecture 7 How to use Mongo Atlas?

Lecture 8 How to load routes file in NodeJs?

Lecture 9 How to use controller functions in NodeJs?

Section 3: User Registration and Login with Email Confirmation using AWS SES (Server)

Lecture 10 How to create database model in MongoDB?

Lecture 11 How to check if user provided valid email address?

Lecture 12 Signup to AWS for using SES and S3

Lecture 13 How to send email using AWS SES?

Lecture 14 How to send dynamic email using AWS SES?

Lecture 15 How to build your own template to send emails using AWS SES?

Lecture 16 How to decode JWT?

Lecture 17 How to hash and compare password using Bcrypt in NodeJs?

Lecture 18 How to register or save user in MongoDB?

Lecture 19 How to apply email and password validation in NodeJs?

Lecture 20 How to login user in NodeJs?

Section 4: Forgot Password and Accessing Account (Server)

Lecture 21 How to implement forgot password feature in NodeJs?

Lecture 22 Trying out forgot password request using Postman

Lecture 23 How to allow user to access account after forgot password request?

Section 5: Protect Routes and Refresh Token (Server)

Lecture 24 How to protect routes from not logged-in users?

Lecture 25 How to send fresh token on refresh token request?

Lecture 26 Code refactoring, manual testing and recap

Lecture 27 How to get currently logged-in user from MongoDB?

Section 6: User Profile and Update (Server)

Lecture 28 How to create user public profile endpoint?

Lecture 29 How to implement user password update?

Lecture 30 How to update user profile?

Section 7: React Project Setup with React Router and Context

Lecture 31 How to create a new React project?

Lecture 32 How to use material bootstrap theme in React?

Lecture 33 How to add multiple routing system using React router?

Lecture 34 How to create and access a global state in React using Context?

Lecture 35 How to create navigation menu in React?

Lecture 36 How to create dropdown menu in React?

Section 8: User Registration, Login, Reset Password and Accessing Account (Client)

Lecture 37 How to create user registration form in React?

Lecture 38 How to store user input in local component state in React?

Lecture 39 How to make POST request using Axios?

Lecture 40 How to show server error messages using toast notifications in React?

Lecture 41 How to configure Axios globally?

Lecture 42 How to show loading status and redirect user?

Lecture 43 How to grab route params in React?

Lecture 44 Register the user by sending JWT

Lecture 45 How to solve Axios making 2 request for same endpoint?

Lecture 46 How to prevent React Context data lost on page refresh?

Lecture 47 How to create login page in React?

Lecture 48 How to implement logout in React?

Lecture 49 How to conditionally show login and logout links?

Lecture 50 How to add forgot password feature in React?

Lecture 51 How to allow user to access account on forgot password?

Section 9: Protected Pages and Refresh Token (Client)

Lecture 52 How to create user dashboard with sidebar menu?

Lecture 53 How to protect pages from not logged-in user?

Lecture 54 Axios interceptors code

Lecture 55 How to refresh token using Axios?

Lecture 56 Conditionally navigate user based on auth status?

Section 10: Create Ad to Sell or Rent, Google Places and Multiple Image Uploads to AWS S3

Lecture 57 Create Ad page with options to sell or rent

Lecture 58 How to implement sell or rent house and land options?

Lecture 59 How to use single Ad create form for selling or renting house and land?

Lecture 60 How to get google places API keys?

Lecture 61 How to use google places to auto-complete address dropdown?

Lecture 62 How to create price field with comma separated currency format?

Lecture 63 Add additional form fields to the Ad create form

Lecture 64 How to create image upload component in React?

Lecture 65 How to resize image client side in React?

Lecture 66 How to create bucket policy in AWS S3?

Lecture 67 How to upload image to AWS S3 from NodeJs?

Lecture 68 Code snippet for uploading image

Lecture 69 How to display array of uploaded images?

Lecture 70 How to delete image from AWS S3?

Section 11: Saving Ad to MongoDB with Geo Location in NodeJs

Lecture 71 How to create Ad model with mongoose?

Lecture 72 How to send new Ad create data from React?

Lecture 73 How to get geo location in NodeJs using google places API

Lecture 74 How to save new Ad in MongoDB?

Section 12: Displaying Ads for Sell and Rent

Lecture 75 Disable button and redirect user on Ad create?

Lecture 76 How to show and hide form fields based on house or land?

Lecture 77 How to query Ads for sell and rent from MongoDB?

Lecture 78 How to fetch Ads for sell and rent in React?

Lecture 79 How to create re-usable card component in React?

Lecture 80 How to make card hover effect using CSS?

Lecture 81 How to use all popular icons in React?

Lecture 82 How to format price with comma?

Lecture 83 How to use ribbon badge in React card component?

Section 13: Single Ad View with Image Gallery

Lecture 84 How to query MongoDB to get single Ad and related Ads?

Lecture 85 How to create single Ad view page in React?

Lecture 86 How to fetch individual Ad based on route params?

Lecture 87 How to create image gallery in React?

Lecture 88 How to show image gallery photos in a modal?

Lecture 89 How to generate photos array to use in React images carousel?

Lecture 90 Control the height of images using CSS

Lecture 91 How to show Ad main info beside image gallery?

Lecture 92 How to show Ad features in single Ad view page?

Lecture 93 How to show date using DayJs?

Section 14: Ad Like and Unlike (Wishlist)

Lecture 94 How to add like and unlike feature in NodeJs?

Lecture 95 How to create like and unlike component in React?

Lecture 96 How to use like and unlike feature in React?

Lecture 97 How to redirect user back to intended page?

Section 15: Google Maps, Related Ads and Footer Section

Lecture 98 How to use google maps in React?

Lecture 99 How to debug google map issues in React?

Lecture 100 How to make textarea content more readable by adding line breaks and render HTML

Lecture 101 How to display related Ads in the single Ad view page?

Lecture 102 How to create footer component with copyright and current year?

Section 16: Profile Update and Image Upload

Lecture 103 How to create user profile update page in React?

Lecture 104 How to pre-populate user info in profile update component state?

Lecture 105 How to create user profile update form in React?

Lecture 106 How to support image upload on user profile update page?

Lecture 107 How to make Axios PUT request to API to update user profile?

Lecture 108 How to allow user to update password?

Section 17: Contact Seller

Lecture 109 How to create contact seller component?

Lecture 110 How to disable form for not logged-in users in React?

Lecture 111 How to pre-populate logged-in user info into the contact form?

Lecture 112 How to send contact seller email using AWS SES from NodeJs - 1

Lecture 113 How to send contact seller email using AWS SES from NodeJs - 2

Lecture 114 Project recap and the next steps

Section 18: User Dashboard with Ads Update, Delete and Load More

Lecture 115 How to get all Ads created by user?

Lecture 116 Conditional content in user dashboard

Lecture 117 How to fetch all Ads by current user in React?

Lecture 118 How to add load more pagination feature in React?

Lecture 119 How to create Ad edit page?

Lecture 120 How to create Ad update route and controller in NodeJs?

Lecture 121 How to make PUT request to update Ad from React?

Lecture 122 How to implement delete Ad feature?

Section 19: Display Wishlist and Enquired Properties

Lecture 123 How to query liked and enquired properties from MongoDB?

Lecture 124 How to display user wishlist Ads in React?

Lecture 125 How to display user enquired Ads?

Section 20: Sellers (Agents) Public Profile

Lecture 126 How to fetch all real estate agents with public profile from MongoDB?

Lecture 127 How to show list of real estate agents in React?

Lecture 128 How to show list of real estate agents in user card component?

Lecture 129 How to show agent Ad count and resolve circular json error?

Lecture 130 How to show user public profile with their Ads?

Section 21: Display Ads for Sell and Rent

Lecture 131 How to display Ads for buy and rent in different pages?

Lecture 132 How to create Ads for sell and rent endpoints in server?

Section 22: Advance Search with Multiple Filters including Geo Location

Lecture 133 How to create search context?

Lecture 134 Create a search form and display in multiple pages

Lecture 135 How to show google places address dropdown on search form?

Lecture 136 Static price list code

Lecture 137 Create an array of static price range

Lecture 138 Price list dropdown code

Lecture 139 How to conditionally show price dropdown for buy and rent Ads

Lecture 140 How to use conditional buy rent house and lands options for search

Lecture 141 How to make search request with query string?

Lecture 142 How to search based on nearby location, price range and other data in MongoDB?

Lecture 143 How to display search results?

Section 23: Redirect, Deployment and Demo

Lecture 144 How to redirect un-authenticated user from protected page?

Lecture 145 Deployment guide

Lecture 146 Finished project demo

JavaScript Developers learning to Build Real Apps with React,JavaScript Developers learning to Build NodeJs API,JavaScript Developers learning to Build E-commerce App with Advance CRUD, Authentication, Authorization, Searching and Filtering