2020 - 2022
The Bindel is an online rental platform for short-term stays in Austin, Texas that offers a fun and simple user experience for guests.
Its important to move fast when you're an engineering team of one. This reality favored practical, fast-to-develop languages and frameworks. The backend was built in Python with FastAPI and MongoDB, and NuxtJS + Typescript for the frontend. The entire project was hosted on DigitalOcean and a simple Bash script was used for CI/CD.
At the time NuxtJs seemed like a great choice. It had Server-Side-Generation (SSG) capabilities and I was familiar with Vue's template system from another recent project. Nuxt also had fast Single Page Application (SPA) for users that felt snappy and responsive. Unfortunately, Nuxt's bundle sizes were large and difficult to manage. It was a fair trade-off at the time. But in hindsight, I should have chosen another framework. Nuxt went end-of-life fairly early in our development cycle and the migration path to Nuxt v3 was painful.
Bindel OpenAPI (Swagger) documenatation for managing units.
I was happier with how the backend turned out. FastApi and MongoDB worked great together. FastAPI's out-of-the-box OpenAPI support made it a dream to integrate with the frontend. The automated OpenAPI (Swagger) documentation helped to validate backend functionality independently of the frontend implementation. MongoDB was reliable, fast and helped us to move quickly. Later, Mongo's Aggregation Pipeline made it easy to build cross-collection views as new data needs emerged.
The Bindel — Wireframes illustrating the location and unit-type pickers in their open and intentionally hap-hazard appearance.
We wanted a playful user experience that easy to navigate. One key area that received extra attention was the neighborhood and unit-type picker where those navigation menus haphazardly unfold into a stack of cards. Each card featured a neighborhood with a cute picture to entice interest. The unit picker worked but with slightly bigger cards to help distinguish amenities.
Bindel navigation menu implemented.
For the rental detail page, we relied heavily on previously established patterns. People already know how to shop stays online. Our efforts focused on making the experience fast. Opening the photo gallery is instantaneous, and so is interacting with the rest of the page, calendar, buy-box, etc.
To get the best speed, we focused on two things. First, getting the page to "paint" as quickly as possible. This let the user's start using the page quickly. Second, we aggressively loaded and cached the data users might need next. One example of this was to load the rental availability. With the availability loaded and cached, the date picker instantly showed availability with no delay.
The website has a significant amount of admin functionality, which included managing neighborhoods, unit types, and pricing, each with its own dedicated admin interface. The admin experience also handled reservation management, guest lifecycle, invoicing, and payments. To improve upon Stripe's out-of-the-box functionality, we developed our own invoicing tool that handled the intricacies of the housing rentals. Our primary goal was to make the process simple and error-proof for the customer-facing staff.
Visit The Bindel.
© Spence Wetjen. Made in Austin, Texas USA.
