Skip to content
Nate
Stephens

Pacing Page - AirDNA

Forecast the rental market resurgence in response to the Covid pandemic

Screenshot of the Pacing Page on the AirDNA MarketMinder app.

The Project

The Covid pandemic in 2020 dealt a considerable blow to the short-term rental industry. AirDNA's customers were asking what does the future of travel look like? Which markets are likely to rebound the fastest? Our response was to quickly provide a new set of data projections. "Pacing" is the rate at which reservations are made for a particular date in the future. By comparing this year`s trends to last year's, pacing is a powerful forecasting tool that can be leveraged to gauge demand, revenue, and even upticks in the overall supply of vacation rentals.

Challenges

This project had the shortest timeline I had worked on yet and also came with limited direction. In addition, the frontend lead was out on maternity leave so it required the team to step up. While the other dev on our team focused on current projects and other maintenance needs, getting the Pacing Page done was primarily my task. This was also the beginning of all departments working from home due to lock-down mandates.

Personal Growth

This was the first project I built from the start using TypeScript. It was also one of the first implementations of using the Recharts charting library and React-Query for fetching and caching of data (server-state management). This was a great opportunity for me to build confidence working somewhat autonomously and by learning new tech through direct implementation into production. I was also able to gain experience building a larger scale component library by creating composable chart templates built on top of Recharts. This enabled us to build all future charts faster and allowed for easier global refactors and style updates across our all charting UI's.

Technical Details

As mentioned, this was my first time starting a new large-scale project with TypeScript. It was also some of the first implementations of Recharts and React-Query in our codebase.

  • React
  • TypeScript
  • Recharts
  • React-Query
  • Styled-Components