Vercel + PlanetScale CI/CD pipeline using Github Actions for T3 Stack NotesApp (Next.js + tRPC+ Prisma + Tailwind) — Part 1: Introduction and tech stack discussion

Introduction

In this series we are going to take a look at how you can create a simple notes app using T3 stack, while using PlanetScale as a database and Vercel as hosting platform. After that, we will configure a pipeline which will allow you to build more complex application with nice automated database schema changes and deployments.

Before we dig into implementation which is described in Part 2 of this series, let’s take a look at the stack we are going to use and why is it so awesome.

Why T3 stack?

The T3 Stack is a web development stack created by Theo, designed with simplicity, modularity and full-stack type safety in mind. The core components of this stack include Next.js and TypeScript. Additionally, Tailwind CSS is commonly incorporated. For backend features, developers can also include tRPC, Prisma and NextAuth. The stack’s modularity allows developers to swap in or out pieces based on their specific needs, providing flexibility and customization. The “create-t3-app” CLI facilitates the setup of a modular T3 Stack app by generating a template tailored to individual requirements. It’s important to note that T3 Stack is opinionated, guided by its core beliefs called “T3 Axioms”. These axioms emphasize solving specific problems, responsibly adopting new technologies and prioritizing type safety in order to enhance productivity and reduce bugs in web applications.

Why Vercel?

Vercel stands out as an exceptional deployment platform for its seamless and hassle-free experience. With Vercel, you can deploy your web projects quickly, securely and with exceptional performance. It’s integration with Next.js simplifies the deployment process even further. Vercel’s automatic scaling ensures that your applications handle any amount of traffic without breaking a sweat. Additionally, the platform provides real-time collaboration, continuous deployment from Git and built-in features like serverless functions, enabling developers to focus on building great products rather than worrying about infrastructure. Whether you’re working on a personal project or a large-scale application, Vercel’s ease of use and powerful features make it a great choice for smooth and efficient deployments.

Another important feature of Vercel is the branching feature. Once connected with your Github repository, Vercel gives you deployments to different environments (production, development and preview) based on the branches you push your code to.

Why PlanetScale?

PlanetScale presents an innovative solution in a realm of databases, revolutionizing the way scalability, performance and developer experience come together. As a MySQL-compatible serverless database, PlanetScale defies traditional limitations, offering the agility of horizontal sharding, non-blocking schema changes and an array of powerful features in a seamless package. PlanetScale is based on the groundbreaking technology of Vitess, originating at YouTube in 2010 to address massive MySQL scaling challenges.

At the heart of PlanetScale’s power are its distinctive features that empower developers and accelerate productivity:

1. Non-blocking schema changes: A game-changer in a connected world, PlanetScale’s workflow eliminates downtime and maintenance windows. Schema changes unfold seamlessly, safeguarding customer experience and financial losses. The process is intrinsic to PlanetScale, requiring no additional setup and delivers zero-downtime schema changes.
2. Branching workflow: Overcoming the complexities of schema changes, PlanetScale’s branching workflow enables non-blocking changes on production databases. By creating isolated development branches that mirror your main database, you can test schema changes with confidence. Deploy requests facilitate seamless integration of changes, reducing risks and enhancing team collaboration.
3. Revert a schema change: PlanetScale’s safeguarding extends to reverting schema changes effortlessly. Accidental or unfavorable changes can be instantly rectified without data loss, streamlining the recovery process.
4. Scale with sharding + unlimited connections: PlanetScale’s robust architecture, powered by Vitess, enables horizontal scaling through sharding. This approach distributes data across databases, minimizing strain on any single one. With built-in connection pooling and limitless connection support, PlanetScale wipes out connection limits that often stifle MySQL databases. This is why PlanetScale is great choice for serverless applications.
5. Insights: PlanetScale Insights offers comprehensive query performance analytics, delving into individual query performance. Graphical representations provide a visual overview of query latency, throughput and more. The integration of Insights equips developers with data-driven insights for proactive optimization.
6. PlanetScale Boost (beta at the time of writing): Addressing the complexity of query caching, PlanetScale Boost simplifies implementation with minimal adjustments. Cache invalidation becomes obsolete as Boost automatically adapts to changes, ensuring cached queries remain efficient and relevant.
7. No downtime import tool: Transitioning databases is a challenge, but PlanetScale simplifies it. With the import tool, you can switch databases with zero downtime, as PlanetScale keeps both databases synced during the transition, eliminating data loss and reducing migration hurdles.
8. Connect, CLI and API: PlanetScale empowers users with flexibility through tools like PlanetScale Connect for ELT, the pscale CLI for efficient interaction and an API for programmable integration, supporting diverse workflows and scenarios.
9. Read-only regions: To enhance global application performance, PlanetScale enables the creation of read-only regions with a simple click, eliminating the complexities of manual replication.

PlanetScale isn’t just a database — it’s a paradigm shift in how databases empower modern software development.

Desired system behaviour

• We want to allow user to create and read notes
• Locally we want to use local database inside Docker container (some people tend to use PlanetScale dev branch for local development, but this can become problematic if there are multiple devs working on the same database)
• PlanetScale dev branch will be used by both development and preview Vercel environments, while the main branch will be used in the Production environment.
• Once there is a push (containing schema changes) to the Github dev branch, schema changes are pushed to the database dev branch
• Once there is a pull request (containing schema changes) from dev to the main Github branch, a deploy request gets created on PlanetScale
• If a pull request (containing schema changes) has been merged from dev into the main Github branch, the corresponding deploy request will be deployed to the main database branch
• If a pull request (containing schema changes) has been closed, the corresponding deploy request will also be closed

Note that preview environment won’t always be in sync with it’s database, but it can still be useful for testing features/fixes which do not include schema changes.

Implementation

The implementation details are described in Part 2 of this series.