DEV Community

SALIM MWAURA
SALIM MWAURA

Posted on

Genesis: The Next Gen Rental Listing app using ReactJS and Frappe/ERPNext

ReactJS is a frontend framework(or is it a library?) created and maintained by Facebook. To avoid much debate on whether it is a framework or a library, I will call it a tool used to create and render UI components on a browser - The Frontend.

Frappe Framework is a batteries included web framework written in Python, JavaScript and a MariaDB database. It is used to build and deploy database driven apps.More about them here

Let's be honest, all apps are database driven.
Image description

Uploading image

There is lots and lots that needs to be said about those two software stacks but for now, I will narrow my focus on the Rental Listing app: its scope, set up, and the design inspiration.

Scope
Rental listings have been built before, and you probably have seen or have used one before so let me dive into its scope.

  • A React based frontend UI with a Search engine (with filter options) landlord/tenant portal, maps integration, and easy navigation.
  • A backend (Frappe/ERPNext instance) with a repository of all properties in an organized structure.
  • REST API of Frappe! (Frappe rocks!)
  • Batteries of Frappe!(SMS, Email, Admin UI, WebHooks)

Setup
This is going to be a high level demonstration.

  • Frappe instance setup hosted on a VPS:
  • Frappe apps to install: facility_management and facility_management_website

In your frappe bench directory run the following command.

bench --site yoursite.com install-app appname git-repo
Enter fullscreen mode Exit fullscreen mode
  • A React App created using create-react-app

Design Inspiration

Zumper: https://www.zumper.com/

I will make more articles detailing each of the steps in the setup!

Top comments (0)