Project - Real estate estimation

About this project

I was tasked to make a form for real estate estimation for a french company. When a customer filled out the form on their website, the estimation is calculated in detail through an API. An email is sent to the customer with the results, as well as to the author of the site for contact. This sounds simple at first glance, but there were many technical pieces to this project that had to fit together.

My role on this project

As the only developer on this project, I played a critical role in taking an idea from concept to reality. My technical skills, eye for design, project management abilities, and commitment to client satisfaction resulted in a live, valuable product for the company. My work continues to have a positive impact on the company's leads, this website is still live and active today.

The form

The customer already had a website set up on Shopify. One of the technical challenges of this project was integrating this dynamic form to fit seamlessly as an addition to their existing Shopify theme.

The form has animations that make it look like a chat with chat bubbles that flow into view. The form is divided into sections. Depending on the users choice, the content of the next section will differ. For example a house has different questions than an apartment. For example yard space is asked for a house, but for an apartment which floor the apartment is on matters.
A design was made in Figma and presented to the customer, then tweaked to their liking.

First step of the form uses Google Maps API to pinpoint the location of the property. Then there are many questions with different states depending on your choices. The state management was written in vanilla JavaScript. At the end of the form the user is asked to verify their phone number by entering a code that is sent to their mobile device. Upon successful validation the form is handled by the back-end and the user gets redirected to a thank you page.

Photo by Scott Graham on Unsplash

APIs used for this project

This project required integrating with various different APIs that all worked together.

Google Maps

One of the essential elements of the project was the ability to estimate the value of a property accurately. Location plays a significant role in property valuation, and for this purpose, the Google Maps API was utilized. By integrating this API, the project was able to fetch precise location data of the property. This data was then used as an input for the Pricehubble API.

Shopify API

At the end of the form submission process, the project aimed to streamline the user's journey by creating a new account on the Shopify store. The Shopify API was used for this purpose, enabling the project to automate account creation while ensuring data consistency and reliability with Twillio for verification.

Twilio SMS API

In a project where user data and interactions play a crucial role, ensuring that users are who they claim to be is of paramount importance. The Twilio SMS API was an integral part of this project, serving as a verification mechanism. The Twilio SMS API was utilized to send a verification code to their mobile phones. This code had to be entered into the platform to confirm the user's identity.

Pricehubble

Property valuation is a complex task that relies on numerous variables, one of which is location. The Pricehubble API takes property data, including the location fetched from the Google Maps API, and provides valuable insights into property values. This data is crucial for the project, as it allows for accurate and data-driven property valuation. By using the Pricehubble API, the project can offer users reliable estimates, increasing their confidence in the platform.

Back-end setup for this project

The back-end for this project was entirely made in Node.js, the reason for this choice is simple, the back-end needed to be closely integrated with the front-end. Using Node.js let me quickly handle the data sent from our front-end which was entirely CSS, HTML, JavaScript. Having JavaScript also in the back-end meant I did not have to rewrite things like form validation, it could reuse much of the same logic.