We just completed an entire re-factor of Bugflow's frontend to use Nuxt 3. By using Nuxt 3, we get the amazing developer experience provided by Nuxt for our app and an all-in-one frontend by implementing Nuxt Content V2 for our Blog and Changelog.
Let's take a look at some of the changes.
Bugflow needed to perform a proof of concept: "Can we two-way-sync visual feedback and bug reports from a user's browser, to the repo of their choice, ensuring the dev knows exactly what to fix." Turns out, we can, and it's awesome! We've been using Bugflow for our internal client projects for over 5 months and the process has dramatically improved how we communicate changes from client feedback to developer deployment.
However, we hit a wall. We were recording bugs from an authenticated user using a 3rd party auth cookie. Most modern browsers now ban this practice. We decided to take this opportunity to clean up some of our "proof-of-concept" code, build a solid API using Laravel, and re-factor our frontend to Nuxt 3 so we could easily deploy updates and implement browser extensions. Following the same practices from our book we were able to design a system that scales and we can grow efficiently so we can deploy features and enhancements and you can write better, bug-free code!
To put it simple, the developer experience provided by Nuxt 3 is un-matched. The tooling, the speed, the solid functionality, the plugins, etc. are all simply amazing. Combined with the power of Vue 3, we can create stable, reactive front-ends that scale and allow us to take Bugflow in the direction we need. The speed of development and stability are un-matched. This translates to how users will use the app. There's a significant improvement in not only the UI/UX that's a breeze with Nuxt 3. The frontend is also more stable and easier to use. We've designed Bugflow for speed and Nuxt 3 allows us to do that simply.
Our goal is to grow our app with what we know and what we are comfortable with. Luckily, the Nuxt 3 ecosystem has an amazing blog plugin. We updated our blog & changelog to be powered by Nuxt Content V2. Our marketing site has a fully powered, server-side rendered blog that increases our lighthouse scores and allows us to stay in one familiar technology throughout development. We can quickly provide feedback on the latest and greatest features of Bugflow so you can squash bugs quicker.
We now have a completely separate Laravel API that powers our application. That means our Nuxt 3 frontend will hit the same API as our browser extensions and other future planned integrations. We can also provide quick processing by scaling individual, high traffic endpoints. Reported bugs through Bugflow will always have the highest priority and scalability so your team can fix them as soon as possible.
We pride ourselves on replicating 100% of our production environment locally during development. This ensures we can launch a stable product, eliminate unnecessary issues due to discrepancies, and replicate real world issues locally. We have both our Nuxt 3 instance and Laravel PHP instance running on Docker, specifically using Server Side Up's PHP Docker Images.
When we're ready to release a feature, we have automated pipelines to build and publish Bugflow with zero-downtime deployments. Users will never lose a bug and always have the newest features.
This refactor was something we didn't take lightly. We needed to make sure we only refactored once and designed our code to scale to what comes next. Up until this point, we've been dialing our feedback process by using Bugflow every day on our client applications and internal apps. So far, the experience with Bugflow has bene incredible! Our clients enjoy using it, we can fix their bugs and record feedback right to our repos. We now have a solid structure to scale our app for what's next.
What's next is our Chrome and Firefox extensions. As we mentioned, the big driving factor for this re-factor was the elimination of using the 3rd party cookie for authentication. Since we had to remove that form of auth, we needed a way for authenticated users to report bugs from their own account.
We currently have these two extensions in beta, being implemented on our projects, and with CI deployment pipelines being built. When we open up Bugflow on day 1, users will be able to use the extension of their choice and report bugs. We will be able to deliver enhancements and features automatically to these extensions as we would deploying to the web.