Real Estate Pub-Sub - Real Estate PubSub Model With Vue

Overview

Real Estate PubSub Model

Introduction

In the Real Estate Pub/Sub System, when a user subscribes to topics, the system notes the preferences of the subscriber and stores them for future use by the broker. Whenever a new property is added, the system will notify all the subscribed users.

How to deploy the application

  1. Install Docker from the link based on your system preference (https://docs.docker.com/get-docker/)
  2. Open Terminal and switch to the parent path of the downloaded source code(real_estate_pub_sub)
  3. This project uses ports 8080, 5000, 5002, 5005-5008 and 3003 on your local system hence ensure that these ports are free. In case they are used already use lsof -i :<port number> and kill the running port using kill -9 <PID> command from the terminal.
  4. Hit docker compose up command to start the build and deploy the image

You find these images created for the client, publisher, subscriber, and database when you run docker ps command

Containers.png

Open a browser and enter http://localhost:8080/login to see the application running.

Pre-populated Login Credentials

You can log in using the above credentials. You can also Sign up as a new user.

Architecture Diagram

Block Diagram.jpeg

Interaction Diagram

Real Estate Pub Sub Sequence diagram.jpeg

Publisher as a User

  • A publisher as a user can log in to the system and post new properties for sale based on the fields.
  • Publisher can also view the list of all the properties which he posted
  • He can inform his preference of posting from Manage Advertisement in settings.
  • Advertise / De advertise can be done from this tab.

Subscriber as a User

  • A subscriber user can log in to the system and show his topics of interest by subscribing/unsubscribing from the Manage Subscriptions panel.
  • Users can view the list of properties of his interest and also the master list of properties.
  • User will be notified in real-time using WebSocket connection if there is a new property posted in his topics of interest

Publisher Container (Port: 5000)

  • Whenever a Publisher uses the app all the APIs will be to this server.
  • This server hosts a list of API like which manages
    • Advertise/De advertise
    • Publishers Properties list (added by user)

Subscriber Container (Port: 5002)

  • Whenever a Publisher uses the app all the APIs will be to this server.
  • This server hosts a list of API like which manages
    • Subscribe/Unsubscribe
    • Subscribers Properties list (Based on topics he has subscribed to)
  • The subscriber uses WebSocket to notify the users in real-time after getting the filtered list from the broker.

Broker Container(Port: 5005-5008)

  • We’re implementing a centralized broker in our real estate pub/sub-model.
  • The broker is responsible for filtering the data published by the publisher or External Data source and notifying the subscriber based on their subscriptions.

Database Container(Port: 3003)

  • We use a MySQL database to store all the relevant Data.
  • This is a centralized container that interacts with broker, subscriber, and publisher containers.
  • The entity-relationship model can be found in the below image.

Pub_Sub ER diagram.jpeg

Topics

Topics for Subscription is based on two fields

  1. Cities
    1. Buffalo
    2. Syracuse
    3. NYC etc.,
  2. Room Types
    1. 1 BHK
    2. 2 BHK
    3. 3 BHK etc.,

External Data Source

For the External data source, we are using US real estate API provided by RAPID API (https://rapidapi.com/datascraper/api/us-real-estate/) Using this API we fetch a few properties based on the filters which can be given as query params and populate it in the UI.

Tech Stack

Frontend → VueJS

User Authentication → Firebase

Database → MySQL

Server → Python + Flask

Rendevous Implementation

Rendevous.jpg

Going forward we now have deployed multiple instances of broker networks to distribute the load amongst them. To Distribute the load, each broker will be responsible for a specific set of topics where we have to ensure that at least one broker is responsible for a topic.

Whenever there is an event from the publisher it hits the broker whichever is up and running and this broker checks if he is responsible for the event if so then the Event will be processed by this broker. In case if he is responsible for the topic the Broker will get the list of brokers who are responsible for the topic and passes the event to the responsible broker. The responsible broker list can be more than one and this passes to the broker who has a connection with the current broker network.

Broker List and responsible topics(Cities):

  • Broker 1 ⇒ Buffalo, Syracuse, Albany
  • Broker 2 ⇒ NYC, Lancaster, Niagara Falls
  • Broker 3 ⇒ Newark, Philadelphia, Boston
  • Broker 4(Considered Backup) ⇒ Buffalo, NYC

We have an admin user role who can manage the topics handled by each of these brokers which can be found in the settings popover.

🎩 Vue Demi is a developing utility allows you to write Universal Vue Libraries for Vue 2 & 3

?? Vue Demi (half in French) is a developing utility allows you to write Universal Vue Libraries for Vue 2 & 3

VueUse 1.4k Jan 22, 2022
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

DesignRevision 396 Dec 21, 2021
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

SAP 180 Dec 23, 2021
An emerging UI framework for Vue.js & Vue 3 with only the bright side. ☀️

Wave UI An emerging UI framework for Vue.js & Vue 3 with only the bright side. ☀️ Demo & Documentation antoniandre.github.io/wave-ui install npm i wav

Antoni 333 Jan 15, 2022
MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

MADE Apps 3 Jan 11, 2022
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

DesignRevision 395 Jan 20, 2022
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.6k Jan 22, 2022
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 33.3k Jan 15, 2022
Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va

Buefy 9.1k Jan 19, 2022
A Vue.js 2.0 UI Toolkit for Web

A Vue.js 2.0 UI Toolkit for Web. Element will stay with Vue 2.x For Vue 3.0, we recommend using Element Plus from the same team Links Homepage and doc

饿了么前端 51.6k Jan 19, 2022
Translate Bulma css api to vue components

vue-bulma-components The goal of this library is to use the bulma class syntax as components and props. 3kb minified Demo and try the live demo too :)

null 158 Aug 21, 2021
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive impl

BootstrapVue 13.6k Jan 17, 2022
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 310 Jan 11, 2022
UI Components for Vue

VueFace VueFace is an open source component library for VueJS framework with around 40 components at the moment. It supports 20+ themes for giving dif

Sudheer Jonna 73 Sep 20, 2021
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | 简体中文 Features An enterprise-class UI design system for desktop

vueComponent 15.9k Jan 15, 2022
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 313 Jan 15, 2022
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

null 1k Jan 3, 2022
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

Framevuerk Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on Vue.js. Setup First of all, you shoul

null 270 Dec 21, 2021