Introduction
When it comes to saving food and reducing waste, TooGoodToGo (TGTG) has made significant strides. However, as an avid user of the TGTG app, I noticed a missing piece in the experience. The app lacked a feature to notify users when a coveted “magic bag” becomes available again. Determined to bridge this gap and enhance the user experience, I embarked on a mission to create TGTG Notify - a service which solves exactly this problem.
Tech stack
TGTG Notify consists of two parts: the monitor process and the web app. In this post, we’ll only focus on the web app. The web app is built using the popular React meta-framework Next.js. To ensure fast development while maintaining type-safety, I used the well-known T3 Stack, which includes tRPC, next-auth, and Prisma. This choice ensured type-safety, which, in my opinion, is one of the most important factors when building an app for consumers.
For the UI, I utilized the popular UI component framework ChakraUI. It was easy to work with, especially since I had previously built a project with MUI. Regarding the database, I decided to try MySQL again after working on a PostgreSQL project. I chose to use Planetscale since it offers a generous free tier, which you should definitely try! Additionally, Planetscale supports edge functions through their serverless DB driver. Another useful feature was their branching capability - here I could have a separate database for production and development, which was perfect during the development phase.
Finally, for hosting, I selected Vercel due to its simplicity, ease of use, and CI/CD workflow, which seamlessly integrated with my development process.
Lessons learned
Most of my lessons were learned during the deployment of the web app to production or staging for my family members to test. It was during this phase that I realized the importance of having a CI/CD flow and how it significantly enhances the effectiveness of development. Additionally, I discovered the value of using edge functions. Initially, I hadn’t tested edge functions during development since I was unaware of their possibility. However, during the deployment to Vercel, I quickly learned the need to optimize my edge functions for maximum effectiveness. Currently, my application relies on edge functions for 99% of its functionality, while the remaining function is a serverless function (session request). It’s truly remarkable!