From Launch to Landing: PAD UI

By: Huy Ngo

Hey there! I’m Prog the friendly Progressive Frog, and welcome to my PAD. As they say, mi casa es su casa. Hop on in and let’s talk about how we built the all-in-one user platform you know as CTA PAD.

How we Started CTA PAD 

PAD started off as (and still is) an idea to deliver data systems and infrastructure for organizations efficiently at a low-cost. When we first started on this journey, our first offering was user accounts with direct access to GCP and BigQuery. That way, users could grab a warm cup of coffee or tea, hop straight into PAD, and immediately start working with the data in their projects. And this was great! 

However, we soon realized we wanted a setup that was even more user-friendly. Many folks were already logged into their personal Google accounts, and having to hop back and forth just to access PAD felt like a bit of a chore. That goes against our entire PAD hospitality ethos!

We rolled up our sleeves and got to work. Our first iteration was to make something that tied in to Google Chrome and helped users easily get to PAD using their CTA account. Chrome user profiles automatically helped out with one part, but we still needed a way for users to quickly hop into whatever project they had access to.

Enter: The Hopper (A Chrome extension)! You might start to notice a theme with the names here, and we’d apologize, but frogs will be frogs.

Hopper was a Chrome web extension that users could access at any time to hop to any PAD project they could access, as well as a few other essential links. It was a small and unassuming home extension for PAD, but it was charming, and most importantly, it was ours (and yours)!

Hopping to a Bigger Pond

Alas, eventually, we outgrew Hopper, it was time for something new. 

We needed something more flexible and built from the ground up to serve all our partners and users better. When guests visited, we got asked if we could sync data from third-party sources such as Facebook, LinkedIn, and other social media outlets. This was a challenging conundrum because sites like those don’t let you have access unless you’re explicitly authorized by the respective user account (but don’t worry, we’re not deterred so easily). 

To address this, a solution beyond a Chrome extension was necessary, one capable of bidirectional communication and information exchange. This led to the development of a website named Pond.

With the help of Firebase, we rolled out Pond and let users connect and authorize their social media accounts to sync data into PAD while still maintaining the core features that Hopper had (such as hopping to projects). This was big! It was my first hop into a proper user-facing platform.

For a time, all was well in the Pond. Vibes were good, frogs were hopping, bugs were buzzing. But once again, quicker than a flash, we outgrew Pond.

Renovating the Pond into PAD

This time, with more experience, skills, and a whole lot of JavaScript/TypeScript and Python (specifically, a React frontend and a Django backend), we now had the tools to build a fast, modern, and responsive platform. 

After a long time in the workshop, I was finally ready to unveil my new home to welcome guests to my not-so-humble-but-still-humble-at-heart abode once more. Drum roll, please…

🥁🥁🥁🥁🥁🥁🥁🥁🥁🥁

PAD UI!

A platform that’s easy to navigate with new functionality for our users and a robust and flexible backend that can handle all the APIs, models, and permissioning needed to support our front end.

In the new PAD UI, users far and wide can access all sorts of critical tools, like the just released budget page, matching jobs, hopper syncs, and more leaps forward in the coming months - like our brand new List Cutter.

And that’s all, folks! Thank you for visiting and coming along for a tour of PAD and listening to me croak about the history. Feel free to take a look around, help yourself to hypothetical snacks and plop down on the couch. Let us know if you need anything and if you want a personalized 1:1 tour of CTA PAD, set up a time with our capable team.

Next
Next

How to Best Prepare for 2026