An app that merges data science and web development to predict the value of real estate homes in Austin, TX.

The machine learning model mathematically finds a pattern by combing through 15,175 real estate listings in the Austin, Texas, area to compute the pricing of a property. The model uses logistic regression and takes a supervised learning algorithm approach.

A listing can have an excessive amount of detail that is unnecessary for what we want the model to do. Real estate prices also increase over time. A technique called feature engineering was applied to clean the data and reap better results.

Nulls, duplicates, and outliers that represent erroneous data were removed and appreciated to the time scale at development to provide a more accurate prediction. Once the dataset was evaluated, an 80/20 (Pareto Principle) training split was applied to validate the measure of the model performance.

FRONTEND

React, Semantic UI, and Styled Components were used to build the stylish and responsive view layer of the application. Collecting all the data required to compute the price prediction in one form could be overwhelming for the user, so a multi-step form was added to the form design. Drop-downs take standard inputs such as home type, number of parking/garage spaces, bedrooms, bathrooms, etc. Input fields take user typed information such as the lot and living area size.

To ensure only valid value types make it to the server, form validation was implemented with HTML5 and Javascript. If validation fails, the form throws an error message and does not proceed to the next step. A back button on each form also allows navigation to the former step for any input edits. Finally, the form data is submitted by hitting the 'Predict' button.

Additionally, D3.js, a data-driven document library was used to visually represent dynamic data and create scatterplot and line charts fetched from the server to lay out the results.

BACKEND

The backend was built with Python. Python has an extensive set of libraries such as NumPy and Scikit-learn that supports multi-dimensional arrays, matrices, and high-level mathematical functions used in machine learning.

Flask, a micro-framework for Python and functions as a dev server, was used to implement API endpoints that request latitude and longitude data from a third-party geolocation service based on the address entered and serves the prediction along with graphical data. In production, a WSGI server was implemented.

Swagger UI or OpenAPI is also integrated into the backend to allow visualization and interaction of API resources from the web without going through the main website. This was to demonstrate forethought to team collaboration and host the API documentation securely on the web.

DEPLOYMENT

The application is deployed on an AWS EC2 instance and runs on a Linux AMI. The deployment architecture consists of Nginx acting as a reverse proxy and web server. It serves static content and directs requests to the WSGI server, uWSGI, which uses uwsgi protocol to communicate with the Python application. AWS Secrets Manager was also explored in the deployment to store the API Key for the geolocation service and security.

Connect with family, friends, and peers to collaborate and challenge each other to an activity. The player with the most consistent streak wins.

Streak is a social networking app that allows users to create an activity and keep track of its progress alongside friends incentivizing completion in a fun and enjoyable way.

The idea is users can add other users under the friend collection and add those friends to an activity. Participants can check in and increment their score as they complete the challenge until the expiration.

This was a previous project done as a group but I rebuilt it with considerations to improving and completing some of the features that wasn’t fully built out before.

The main functionalities are built with Google's Firebase Web SDK and the UI is built with React, Chakra UI, and Styled Components. It is designed from the mobile end to fit the screens of different devices and to showcase its capabilities as a mobile product as if it is an iOS or Android app.

Google Firebase Web SDK offers authentication, storage of media assets and a NoSQL database called realtime database that syncs data across all connected clients in realtime and allows secure access directly from React. It uses data synchronization instead of http requests providing a more immersive experience.

Registration and the authentication sign-in flow is handled with the Firebase Auth API. Users can sign in using an email address and password or their Google accounts. Functionalities such as editing or deleting users were also implementented.

One quality Firebase offers is allow attaching an observer to the global authentication object. It watches for user sign-in state changes. I utilize this to obtain user-specific data including their authentication token in client-side routing to customize access to the main dashboard and other protected pages. I also used React’s provider pattern with the context API to share user data across components without having to pass props down at every level to produce a more efficient rendering as well as other techniques.

The main dashboard displays the user’s avatar, display name, activity metrics, challenges the user is participating in, friends count, challenge expiration, and a navigation bar.

Selecting the avatar allows making account changes such as uploading an image file or deleting the user account. When an image file is uploaded by the user, it is stored in Firebase Storage and the reference to that file is stored in the Firebase Realtime Database.

Due to an observer placed on the database user reference, all activity, friend, streak, and account changes are reflected right away.

Another interesting feature that was implemented is the search functionality. Users can search for friends by running a partial or full name search to add them to their friends collection or to just check out who else is down for a challenge.

This is a microservices-based application and is a fully functional mockup of BestBuy’s product page.

The highlight is building microservices and integrating those with the whole of the service as a distributed system.

Each microservice is an application in and of itself and is loosely coupled with other microservices thereby enabling efficient development, deployment, scalability, and maintenance. This project allowed exploration of these concepts.

The project was also about handling a complex system in a dev team. It was about dividing up the work among team members and working collaboratively on a single code base to produce a single frontend application by the end of the project timeline.

There is also an added complexity in the deployment. Each service is configured, deployed to a runtime instance (AWS EC2), and runs on its own database. In terms of structure, each microservice sits behind a proxy and load balancer giving form to a products page with navigation and customer reviews capability on the client-side.

Other dev team members are Brian Vargas and Lee McHale. We operated in an agile methodology and used Trello, a collaboration ticketing tool to include metrics on ticketing, feature implementation, and bug tracking. We also followed a feature branch workflow with Git and used pull requests to merge the features while practicing code reviews regularly. 

The application consists of 3 microservices: 

• Product Details
• Navigation
• Customer Reviews

I developed the Product Details service. This is the page that leads to the sale. It is the component that provides information on the specific product such as its description, dimensions, materials, sizes, and colors along with a series of photos or videos of the product. 

The service UI consists of a breadcrumb or the path taken to arrive at the specific product page at the top, the product title and specs, overall customer rating in stars that opens up to a histogram, a carousel of images, dropdown selection of the product type, an option to select a replacement plan, and an add to cart button.

The software design uses an MVC pattern. The view layer was built with React and CSS. The controller and model were built with Express.js and MongoDB. The product catalog consist of some selections of Nintendo Switch, Playstation 4, and Xbox games and the product API endpoints serve media assets per the product SKU or name identifier.

At the end, it all came together as a product page featuring Nintendo Switch Mario Kart.