On November 3rd, 2022, we launched version 2.0 of Punchlist. An all-hands effort by the entire team over the course of three months culminated in a brand new application that is 10 times smaller, 3 times faster and a lot better looking than our beloved (but aging) version 1.
The Backstory
Punchlist was initially a challenge that Pete (Co-Founder and CEO) set for himself: learn how to code and build a tool that he wanted but did not exist yet. For six months he worked with tutorials on one screen and a code editor on the other. Finally, in April, 2019 he released a working version, which he quickly started to show to agencies around Atlanta. Punchlist was extremely well received and soon became their go-to tool for collecting feedback on client projects.
Three years later that same side project has grown into a company that was selected for Techstars, raised more than 2 million dollars and now serves thousands of customers in over 80 countries.
Today, Punchlist is being used in ways that surpass what Pete envisioned at the outset. The original use case was agencies working on a couple of projects a month and using Punchlist to “wrap things up.” Now customers are creating multiple new projects each day and sometimes gathering thousands of pieces of feedback throughout the entire project lifecycle
But before all of this, Pete had to start with a framework. He chose Laravel. The reasons were clear: good documentation, friendly to beginners, incredible ecosystem and community.
However, as the product and the company continued to grow, the original code base became a serious impediment to building all the feature ideas we had, and to respond quickly to meet customers’ needs. When we decided it was time for a new UI, and migrating from Bootstrap to Tailwind, we made the decision to go all the way with a full rewrite.
You Did What???
Hear me out. I (almost) never advocate for a rewrite. Often I prefer incremental changes and a measured approach to paying off technical debt. We discussed it, changed our mind several times, and finally decided that this was one of those rare occasions where a re-write made sense.
Some of the decisions that were made in the early days of the application had locked in outdated dependencies that made it extremely difficult to move forward, and some of the mitigation measures that were implemented to work around those issues were making progress very slow and painful.
We were confident in our team’s ability to meet the ambitious goal of rebuilding the entire application in just 90 days. We would implement a brand new UI, follow best practices, apply lessons learned over the previous three years, and eliminate any bloat and technical debt.
Picking the Stack
One of the most attractive benefits of doing a full rewrite is that it gives you an opportunity to pick the stack anew. Up to this point Punchlist had been Laravel, Vue 2 and Bootstrap. In our early conversations, the only firm decision we made was that the new UI would use TailwindCSS. We briefly discussed whether any language or framework other than Laravel and PHP would make sense, and it was clear that no one on the engineering team even wanted to consider it. We adopted Vue 3 with Composition API and Inertia JS as the two major changes. The former makes for more concise code and reusable components, while the latter allows us to get the best out of Laravel while maintaining a delightful user experience.
On the tooling side we changed from Webpack to Vite and happiness increased by an order of magnitude while the bundle size did a great ant-man impersonation going from over 6MB to 640KB.
Laravel 9 + Vue 3 + InertiaJS + Tailwind is a developer’s dream. We are now able to move faster, the application is more performant and very snappy, and the UI feels new and fresh. We are now pushing releases and features at a speed that was simply impossible a little over three months ago.
More Tech Tidbits
We use Git + Github for our source control, and deploy using Github Actions. We use Laravel Vapor to manage our AWS stack (Lambda, RDS, SQS, S3, and more).
And That’s Not All…
While we were rebuilding our entire app, we also redesigned and launched our new website. It was another big lift, but we wanted our website to match the rewritten application’s quality, performance, and design.
In early 2022, our friends at Edgar Allan reached out to us about featuring the Punchlist website in their video series about building with Webflow. We gave them the reins and they built an incredible foundation for our new site.
So as we neared the end of our application rebuild, we decided to go all-in on Webflow and finish the work Edgar Allan had started. We already feel that it’s been another great choice. Webflow allows us to focus on the content and the experience instead of fiddling with plugins and .htaccess files. WordPress was a good choice for us in the beginning, but Webflow is definitely a huge step in the right direction, especially given all the announcements they made last week at WebflowConf.
The Future is Awesome
We have so many ideas for what’s next. Here are just a few:
- We recently became a launch partner in the new Webflow Apps Marketplace. We will continue to add features to this integration to become even more useful to the awesome developers that have adopted both platforms.
- We plan to add more media types for Punchlist projects. In addition to the ones we currently support (live websites, images, PDFs) we are working on others that will allow users to keep any kind of creative project in Punchlist.
- We are working on providing public API access to the Punchlist app. We don’t want to put out a half-baked API, so we are working hard to give developers the right tools and documentation to build creative solutions using our platform.
As always we’d love to hear from you! Tell us what you love or don’t like about our app, what’s missing, or what would you like us to release next. Even more, reach out to us and let’s nerd out about anything development and design. You can find me on Twitter as @nicdev or talk to the whole team @punchlist.
* A few extra notes on performance
- Empty dashboard loads 41% faster
- Dashboard with 5 projects loads 51% faster
- New project created loads 255% faster
- Project with 10 items loads 319% faster
- JS bundle size reduced from 6.3MB to 197KB
