Property Analyzer

Compare profit or cost of ownership based on different combinations of properties and investment scenarios.

A case study that demonstrates my ability to solve business problems with a financial background.

Property Analyzer Mockup
Role
Concept, site development, calculator functionality.
Technologies
HTML, CSS, JS, Firebase, Excel.
Purpose
Academic group project
Developing a JavaScript web app for dynamic investment and financial calculations.
Challenge

Tasked with solving a specific user segment's problem as our semester project, my classmates and I chose to help home buyers. Purchasing property is stressful and confusing. Current tools are limited to calculating only the specifics like monthly payments. In reality, these investment decisions are based on a number of factors that should be considered together as a whole.

Completeness

Loan and payment tools only show a fraction of the full picture.

Flexibility

Calculating each scenario one at a time makes options difficult to compare.

Uniqueness

Different properties and financing options are assumed to use the same variables.

Solution

We combined previously independent calculations into one, providing a more complete view. This includes not only mortgage payments, but also additional variables that are often afterthoughts such as income tax, maintenance and even commission fees. Investors should be made aware of these hidden costs! With all relevant factors in mind, they can be confident that they are making the best possible decision. In addition to this, the ability to mix and match properties with various financial scenarios makes comparisons quick and easy.

process
Initial research

If order to provide insights to potential buyers, first we needed a deep understanding of what went into these calculations.

Trying out existing tools further convinced us that we could fill a real gap given that they simply did not provide enough information. Mortgage payments are only half of the story!

So, what else is missing?

To answer this, I suggested we specifically dive into Montreal's market. Narrowing our scope meant we could actually find all possible conditions our app needed to include, allowing it to be truly dynamic. It needed to provide an accurate investment outlook for very specific inputs. This was a necessary step as we realized that it's far from a cookie-cutter calculation.

For example, a condo has additional fees compared to a house. A revenue property has tax benefits over a non-revenue property. Neighbourhoods have varying growth rates which should be reflected in future selling prices. Location also deals with differences in commission percentages and welcome tax. These are all things we had to consider.

Minimum viable product

To test the concept itself and the actual calculations, I made a fully functioning prototype in Excel. This served as the base for our actual web app.

Excel Prototype Putting my finance and Excel knowledge to good use.

Getting the calculations right took a lot of time and some serious tinkering. My future self is thankful for not having done this initially with JavaScript.

Design and code

I used Figma and Webflow to create and refine the UI I had originally sketched. Webflow proved to be a great intermediate step as it helped me reverse-engineer the design and learn how to build a clean looking site with HTML and CSS.

UI Sketches First concept sketches.

At first the front-end was designed with fake data. Then came the hard part... making the site functional with dynamic calculations and DOM manipulations to display them in real-time.

One by one, we recreated the Excel functions with JavaScript and connected them to their placeholders in the HTML. Last step was to connect to the database and finally we had a working calculator!

features
takeaways
Not only was this my first time coding, but this was also true for all three of my group members! Collaboration, especially at the beginning of lockdown, was probably the most difficult part of the process. Taking the "learn by doing" approach and adding functionality as I went was incredibly valuable to my understandings of how all the technologies works together. This project introduced me to the power of code and what is possible even for a beginner like myself to create.
Keep clear documentation
Since part of my role included setting up the front-end, it would have been beneficial to have some sort of documentation or comments in the code explaining my work. At a certain point, the codebase became quite messy and required a major cleaning before I could properly have my teammates jump on to complete their parts.
Divide the work
While we had already separated tasks and who was in charge of which features, we had trouble completing our work in an efficient manner. Next time, I'd look into splitting up the actual functionality into separate files so that it's more manageable and straightforward to maintain, as well as being easier to understand for everyone.
Become a professional googler
Understanding how to ask the right questions was a key factor to my ability to succeed. Knowing where to look and how to properly integrate existing information is equally as important.
See more projects
Bolt Bootcamps
Shop Unknown