Problem
Managing properties takes a lot of coordination and administration. The problem our project intends to address is that property owners need to oversee and maintain their rental properties. If they live far away from their properties, they need to be able to manage them remotely. They often work with property managers to help facilitate their operations. However, they could save some time and money by hiring contractors directly to do any required maintenance and renovation. Additionally, tenants need to also be able to interact with their property managers remotely.
Project Idea and Components
Property managers need to be able to view vacancies, rent payment status, manage amenities, view and approve service requests and lease applications and renewals, and view analytics about vacancies and income. Our clients already had started working on the property manager side of the software. We continued working on this application to add more key features.
Tenants need to be able to submit maintenance requests, make payments, view and reserve the amenities available to them, send referral emails, and leave a review. This side of the application was completely created by us.
The major features that we worked on:
Lease Applications
When tenants first login to the application, they need to view vacant units and submit lease applications. Property managers need to view pending applications and their statuses. After a tenant submits an application, the property manager can view this application and move it through the approval process. After the manager sends an offer to the tenant, the tenant needs to sign the application.
Manager Lease Application Page
Example
Service Requests
Tenants should be able to notify their managers when they have any issues with their units. These include issues with appliances, plumbing, electricity, etc. The tenants can submit a form to their manager with this information. Additionally, they also have the option to upload an image. Once a tenant submits this request, the manager is notified with an email. The manager is then able to edit, review, and delete these requests. They can then assign the requests to service request contractors. Whenever the managers make an update to the status of a service request, the tenants are notified about this through a message in their app. They can then go check the service request to view the full details.
Manager Service Request Page
Amenities
Managers can create, edit, and delete amenities. They can specify various details about the amenity that are displayed to the tenant, such as location and availability. Both the manager and the tenant can view a list of amenities; selecting one from the list will show more information. Selecting the availability tab displays information such as its normal open times and blackout dates, both in list form and a more visual schedule form.
The manager can also specify various reservation rules for amenities. They can approve or deny reservations and can view reservations in a list where they can filter and sort them. Tenants can create reservation requests, but they must follow the rules that the manager set. The form will not allow selecting invalid dates and times. Tenants can cancel reservations at any time.
Manager Amenity Page
Unit Data Synchronization
This feature allows the managers to manually assign to and remove tenants from units. The managers are able to view the tenant’s information. The tenants can then view other information on their end like unit, lease, occupancy, and pet fee details.
Manager Unit Page
Lease Renewal
If tenants would like to continue living at a property after the end of their lease term, they need to submit a lease renewal application. After they fill this out, the property manager can update the lease and then approve their application. Then the tenants need to confirm they agree to the new lease.
Manager Lease Renewal Edit Page
Implementation
For the frontend, we used various UI libraries and frameworks which provided us with components that were customizable and easy to use. We used React with TypeScript as the frontend backbone. On top of that, we used Ant Design as the main UI framework, which provided many components and icons to help make the applications consistent. We also used Material UI, which provided additional UI functionality that Ant Design did not (particularly with media queries). Finally, we also used ChartJS, which provided a simple interface to display data in a bar chart or pie chart.
For the backend, we used AWS DynamoDB to store the main data for the applications. AWS Amplify was used to easily interface with the database; it generated the code used to perform create, read, update, and delete (CRUD) operations, which we could easily call in the applications. We also used Firebase for user authentication. Initially, we were also using Firestore for storage of large data, like images and files. Toward the end, however, that was moved to AWS S3 buckets.