Description
This Tenant and Landlord Service Request System is a comprehensive digital platform that facilitates efficient communication, tracking, and management of service tickets between tenants and landlords.
Technologies
ReactJS
Figma
FeathersJS
Selenium
MongoDB
Project Overview
Figure 1: Tenant Portal Cover Page
Tenant and Landlord Portal was the final industry project for the course 50.003 Elements of Software Construction. As it was an industry client project, the code is not public.
The purpose of this project was to provide practice for the entire Software Development Life Cycle (SDLC) which consisted mainly of gathering requirements, planning, designing, implementation and testing.
In this project, I contributed more on the requirements gathering, system design, part of UI design, frontend implementation and testing.
View project Video
Problem Definition
The aim of the project was to implement a web application that is a comprehensive digital platform that facilitates communication, tracking and management of service tickets between tenants and their landlords. More specifically, the portal is built for real estate owners and landlords who manage properties (mainly shopping malls) and lease units to tenant.
Outcome
Our completed web application managed to achieve all the project requirements as gathered from the client with the key features being support for 4 different actors with full-fledged features. The 4 actors are tenant, landlord, service providers and admin.
Design Process
Project Requirements
The project started with an initial requirements gathering session with the client and thereafter, I came up with the use case diagram as well as User Requirements Specification (URS) for the project. I also served as the main liaison with the client, providing me with experience in this aspect.
Use Case Diagrams
A use case diagram is a a diagram that shows the actions an actor (users or other systems) can perform on the system. Its purpose is to provide a high-level understanding of how a system operates and what it should achieve.
This project marked my first endeavor into formal software system design and drafting of use case diagram. Below is one of the diagrams drafted.
Figure 2: Use Case Diagram ( Click Image for High Res PDF )
Software Design
There are several project design elements that had to be considered before diving into implementation. The team drafted up several designs such as the class diagram, database schema, entity relations diagram, sequence diagram, a state machine and Figma designs.
I led the sequence diagram and ER diagram designs and helped out with the state machine.
Sequence Diagram
A sequence diagram is a UML diagram that shows how our actors interact in time.
It illustrates how each actor triggers or will react based on certain "messages". An example of one of the diagrams I drafted can be found below:
Figure 3: Sequence Diagram ( Click Image for High Res PDF )
UI Design
I designed several of the screens for this project and some can be seen below:
.png)
Figure 4: First Draft of Main Service Request Page
Figure 5: Notifications Page
.png)
Figure 6: Login Pages
Implementation
For this project's implementation, I focused on the frontend development for the pages I designed and did the integration for the frontend and backend.
Frontend Development
Below are some of what I developed:
Login, Account Creation, 2FA, Password Reset and Notifications
I developed the authentication pages for this application. Some of the screens are also shown. The difficulty for this was the integration with the backend due to inexperience.
Figure 7: Login Pages
Figure 8: Notification Page with real notifications
A key learning point for this project was that I learnt how to better coordinate with backend services, learning how to better read the schemas and call the necessary service or APIs.
Dashboard/Request Pages
Mainly developed and worked on all the dashboards for every user type for this application. An example of the final dashboard can be seen here:
Figure 9: Building Dashboard
Figure 10: Landlord Dashboard
A key learning point for this portion was managing all the various differences between each dashboard and its functionalities. While each table had the same design, they had varying functionalities. An example is shown above where the buildings dashboard have "Actions" which in this case is delete but landlord dashboard instead have "Status" that take information from each service request.
Testing
Testing of the software was also part of the project. I worked on both unit testing using Jest and UI integration testing using Selenium for this application.
Unit Testing
In general, for the unit testing, the team and I conducted rendering test for the frontend, mocking test and also routing test.
Figure 11: Input Validation Test
A simple example of a unit test I did was an input validation test that ensured that each input text field had proper input validation as shown above.
Selenium UI Testing
In addition to unit tests, I also implemented integration tests via Selenium IDE. This allowed me a first time experience with Selenium as well as integration and end to end testing.
In the example below, you can see the multiple test suites created for various end to end tests such as account creation, ticket management and more.
Figure 12: End to End and Integration Testing with Selenium
Through this, I was also able to learn about Selenium Webdriver as well as best practices for testing such as Page Object Models (POMs), Fixtures, and AAA pattern.
I was also able to learn and make use of a good workflow where I use Selenium IDE to identify the selectors and use that to generate POMs for Webdriver to write more comprehensive testing code.
Conclusion
From this project, I learnt the importance of thoroughly studying documentation and system designs and adhering closely to the agreed-upon designs. There were moments of misalignment and instances where clarity could have been improved, these challenges served as invaluable learning opportunities. I also learnt and created my first React web application and used Selenium for the first time which were all valuable development experiences for me.