What is Listing Lab?

Listing Lab is an application for generating text content about real estate listings. To do this, I created a UI for keeping track of houses, tracking back end data jobs in real time, customizing and saving prompts, and managing subscriptions. On the back end I implemented a type-safe event driven architecture, to manage and coordinate data aggregation and transformation jobs, update the client on the status of these jobs, and gracefully handle failures. In the following sections I'll go into how I designed and implemented them.

Application features

This application features authentication, an API layer, a backend job layer, a responsive UI, realtime communication using websockets, payments integration, and local caching of user settings.

Infrastructure features

Deployed entirely serverless on AWS using SST for managing deployments across environments. Static content is deployed on a Cloudfront distribution for caching and lower latency. Realtime communication with clients are accomplished using AWS IoT core topics, which uses MQTT and websockets for sending messages. Backend data jobs are orchestrated by Inngest, which deploys Step Function like work flows to AWS Lambda, and provides full type safety in development for events. The API layer is built using tRPC, a type-safe library for React Router, and is deployed to Lambda. Database layer is a SQLite database deployed on Turso.

UI Features

Front end is written in React, and styled with Tailwind. I use tRPC for managing and reacting to queries to the backend layer. For customizing prompts and changing UI state, I use local storage to reduce Lambda and database load. Additional UI interactivity such as drawers, modals, sliders, and resizable panels, is implemented using ShadCN, a UI library that offers a way of adding easy to customize components, directly into your React code.

FAQ

Next, let's take a look at some code samples to see specifics of the implementations.