Landlordable inspections page Landlordable property overview page
Landlordable modern architecture

.work('landlordable')

Brief

To design & develop a platform for landlords to be able to manage their properties and tenants.

Approach

I used modern architecture to develop this full-stack application. For the database, I adopted the NoSQL database MongoDB and used Prisma for object-relational mapping. In terms of the front-end, I used the ReactJs framework Remix-run for developing full-stack server-side rendering applications, coupled with Typescript for end-to-end type-safety (Prisma also uses Typescript).

Nested routes

The application makes use of nested routes. Nested Routing is the general idea of coupling segments of the URL to component hierarchy in the UI. For example, if the user is on the property details page (`/properties/{property_slug}`), when the user navigates to a nested route such as `/properties/{property_slug}/rates`, then only that partial view will be loaded within the designated nested layout.

This means that we do not need to needlessly re-render the entire UI when navigating to different pages.

Roles & authorisation

The platform has access-levels for different roles. For instance, the pages a landlord can visit differ from those that the tenant can. Therefore, I had to write custom routing logic to ensure specific roles can only visit pages/routes for which they are authorised for.