Lecture Notes: Building a Property Website with React

Introduction

• Host: F My
• Topic: Building a property website
• Technologies: React, Redux, Node.js, MongoDB
• Goal: Create a complex portfolio project

Application Overview

• Demo Features:
  • User registration and login.
  • Property categories and listings.
  • User wishlist functionality.
  • Property publishing by hosts.
  • Search functionality.

User Authentication

• Registration Process:
  • Fields: First Name, Last Name, Email, Password.
  • Profile photo upload.
  • Password confirmation.
• Login Process:
  • Validates user credentials.

Application Structure

• Components:
  • Home Page
  • Listing Details
  • User Registration and Login
  • Property Publishing
  • Wishlist

Building the Frontend

Register Page

• Form for user input.
• Photo upload functionality.
• Password matching validation.

Home Page

• Displays categories and listings.
• Filters listings based on categories.

Categories

• Clickable categories leading to filtered property listings.
• Demo of filtering functionalities.

Backend Implementation

MongoDB and Express

• Set up a server with Express.
• Create models for User and Properties.
• Implement routes for user registration, login, and fetching listings.

User Schema

• Fields: First Name, Last Name, Email, Password, Profile Image, Wishlist, etc.
• Ensure email uniqueness.

Property Schema

• Fields: Title, Description, Category, Price, Host ID, etc.
• Relationships between properties and users.
• Enable CRUD operations.

Implementing Search Functionality

• Enable users to search listings based on keywords.
• Fetch relevant listings from the database.

Creating the Wishlist

• Users can add or remove properties from their wishlist.
• Ensure that property ownership does not allow adding to personal wishlist.

User Experience Enhancements

• Responsive design for various devices.
• Implement a loading state for better UX during data fetching.

Final Steps

• Test all features: registration, login, property publishing, and wishlist.
• Deploy the application for public access.
• Document the code for better understanding.

Conclusion

• Building a property website using modern web technologies is a valuable project for a portfolio.
• Encouragement to continue coding and exploring complex projects.