Taking Full-Stack Development to its Best with T3 Stack

At Eagerworks, we are committed to crafting innovative software products for startups with top-notch technologies. Creating applications for startups is as compelling as a challenging task, as requirements change continuously to achieve product-market fit.

In this agile scenario, we love using Ruby on Rails to deliver scalable MVPs because this framework gives us the flexibility we need to get productivity going. But, it’s true that this approach only achieves results in the making of applications with light frontends that can be implemented with minimum use of JavaScript.  

But what happens when a product requires a more sophisticated front-end experience? This question triggered our journey to find the best solution for our developers to create integral web applications. Spoiler alert: we found the answer. Say hello to the T3 stack. 

 

The T3 Stack: An Essential Definition

The T3 stack is a web development stack created by Theo Browne. Its focus relies on simplicity, modularity, and full-stack type safety. 

It’s impressive how fast you can start working on web application development with the help of this stack. You just need to use create-t3-app, a Command Line Interface tool that allows you to build an app template from scratch without further ado. 

T3 leverages a variety of libraries to develop fully typesafe RESTful APIs between your frontend application and the server. Thanks to this capability, productivity level rises notoriously.

 

Libraries and tools leveraged by the T3 stack

Let’s take a look at some of the libraries the T3 stack takes its power from. 

 

NextJS

NextJS is a React framework created for web development. According to its own website, it enables developers “to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tolling.” Some of the most critical features that differentiate NextJS from using Vite or Create React App are built-in server-side rendering, file-based routing, and asset optimization.

 

TypeScript

You’ve probably already heard of TypeScript before. But, if you didn’t, here’s a brief definition. TypeScript is Microsoft’s free and open-source high-level programming language. Strictly talking, TypeScript is a superset of JavaScript that adds optional static typing to the mix. 

Using a static type system helps to ensure data consistency. Bonus point: TypeScript smooths the coding experience when paired with an editor with support for Language Server Protocol.

 

Prisma 

Prisma is a next-generation TypeScript Object-Relational Mapping (ORM) tool. If you’re building a full-stack application, an ORM is of great importance. Prisma boasts an intuitive data model, automated migration, type safety, and auto-completion. 

 

Zod

Zod is a TypeScript-first schema declaration and validation library. It was designed to eliminate duplicative type declarations. Developers take great advantage of Zod: they just need to declare a validator once and it automatically infers the static TypeScript type when building an application. Zod is really tiny (8kb minified + zipped) and has zero dependencies. 

 

tRPC

TypeScript Remote Procedure Call, better known as tRPC, provides end-to-end typesafe APIs for developers to iterate fast when coding without the fear of breaking the app. tRPC wraps it up: with it, we can create fully typesafe solutions using all the tools mentioned above. 

 

NextAuth.js

NextAuth is a complete open-source authentication solution for NextJS applications. It was designed to work with any OAuth service and it offers built-in support for many popular sign-in services. It also supports passwordless email authentication, JSON Web Tokens, and stateless authentication with any backend (Active Directory, LDAP, among others). 

 

Tailwind CSS

Designed to accelerate coding, Tailwind CSS is a utility-first CSS framework meant to build any design you want on your markup. With Tailwind CSS, instead of writing custom CSS to style your application, you can use utility classes to control any detail on your application’s look and feel: padding, margin, color, font, shadow - you name it. 

 

How We Are Planning to Use the Power of the T3 Stack

After exploring the libraries and tools we can employ to take the best out of the T3 stack, here’s how at Eagerworks we plan to use it for startups’ greater good.  

As we said before, we are focused on empowering startups with the most balanced combination between cost-efficiency, scalability, and innovation for their products. Considering this, the T3 stack is a great ally to deliver solutions with a fully-featured frontend, especially in endeavors where Rails can’t keep pace. 

With the T3 stack, opportunities are endless. Providing type safety across the board will allow us to flexibly scale projects. And establishing a healthy standard for all projects will make it easier for new team members to jump in faster. The T3 Stack provides a similar level of consistency to Rails. Consistency is key, and this is exactly the reason why we’ve been using rails since our very first steps.

For additional adaptability, we’ll make sure all tools and libraries could be smoothly integrated into any existing NextJS app project that uses TypeScript.  

Next step? Exploring how we can use the T3 stack with monorepos using the template `create-t3-turbo` or a template of our own. Everything with our main goal in mind: building ahead-of-the-curve mobile and web applications while leveraging the power of type safety. Do you want your product to be the next big thing? Give us a shout! 

 

P.S.: We want to say a big THANK YOU to Theo, Jack Herrington, Christopher Ehrlich, and all the T3 stack community of amazing content creators from whom we’ve learned so much about this powerful stack.