Real Estate React client ?️

What’s this project is about

Real estate for sale & for rent website. Real estate website’s visitors can easily filter their searches by type, location, price, and other predefined and custom criteria. Each property goes with a detailed description, community and property features, location, price, and a great image gallery. Buyer of real estate can find contacts of seller. In case seller enabled online appointment feature for advertisement – buyer can fill in form to make online appointment request.

Disclaimer: This project was merely a learning exercise as well as my first sizeable project delving into React, Redux & other used technologies.

Technologies Used

Terms & Conditions

This project was created in 2 and a half weeks. React Site & API Server was built as Portfolio project, after a Full-Stack Developer cource: Codaisseur.

Main goals of this project:

  • Create Full Stack App independently
    • Using new knowleges from Full Stack course
    • Finding and using new technologies for specific tasks
  • Brainstorm idea
  • Create Wireframes & Datastructure
  • Train Git Usage
    • Work on different branches
    • Create regular PR
    • Write a small summary when you make a PR
    • Create regular commits
    • Make sure latest working version is always on the master branch
  • Finish the exististing functionality and polish
  • Style Project
  • Deploy project

Installation & Setup Guide

  • git clone [email protected]:senior-dev-1019/RealEstateReact.git
  • cd RealEstateReact
  • npm install
  • npm run start

To run on local machine, API server should run on same local machine, using port: 4000

Deployment Guide

Before deployment API link should be changed in actions, and on payment page(CheckoutForm.jsx).


Datastructure for db

Advertisement

Advertisement data structure

  • isForSale: Boolean,

  • isForRent: Boolean,

  • realEstateType: TEXT – can select from categories

  • adress

  • postcode

  • city

  • price

  • Year of construction

  • year of last renovation

  • Living space

  • Number of rooms/bedrooms/bathrooms

  • description

  • Status: Available/sold

  • Energy label

  • Heating

  • Warm water – Boiler/central

  • Location Description

  • Garden – optional

  • Type of parking

Extras(especially for rent): e.g.: optical internet free parking city view/nature view / cannal view air conditioner bath

User

username: TEXT, password: TEXT, email: TEXT, phoneNumber: Text,

User roles

User Roles

Calendar

Used to make a new appointment:

Each calendar event has:

  • hasOne Customer
  • hasOne Seller
  • date: Date
  • time: time
  • message: TEXT
  • customer PhoneNumber
  • customer Email
  • canceledByCustomer: Boolean
  • canceledBySeller: Boolean

App Screens

User Roles

User Roles

  • Manager of Company can activate and suspend accounts of company agents.
  • Company Agent can not log in to site, after registration (while manager have not confirmed account)
  • Company Agents can use Company Balance to add new advertisements
  • Company manager can Top Up Balance for all company

Top Up Balance using Stripe

Top Up Balance using Stripe

One step to add your Advertisement

One step to add your Advertisement

Upload Images to your Advertisement

Upload Images to your Advertisement

Add Extras to your Advertisement & Check finished Advertisement

Add Extras to your Advertisement & Check finished Advertisement

Check Main Page & Search for Advertisements

Check Main Page & Search for Advertisements

Basic Mockups for Project

Image of Single advertisement page

Image of Single advertisement page

Image of Search Page

Image of Search Page

GitHub

View Github