The 4 horsemen of type safety, or the best stack for your hackathon project

Hackathons?

Hackathons are a great opportunity to show your skills. Choosing a category is frequently the first step. Then your team comes up with a brilliant plan, and you’re ready to go! Now all you have to do is create it in 24 hours and all the glory and money will be yours!

Wait, a complete project in 24 hours?! Well, it doesn’t have to be a fully functional product. But the more you have, the easier it will be to turn your hackathon win into a functioning business!

24 hours and one app

As a software developer and chief innovation officer, I enjoy experimenting with new technologies, libraries, and packages. Combining these solutions to create a tech stack is like solving puzzles or building with Lego – some just fit together perfectly!

I am sure many of you, dear readers, are familiar with the LAMP (Linux, Apache, MySQL, PHP) stack or variations of MongoDB, Express and Node.js-based stacks like MEAN, MERN, or MEVN, where you only change the frontend library or framework. While all of these have their advantages, there is one stack that I believe is ideal for hackathon projects or even for production-ready, full-stack apps developed by a single team.

In my opinion, the key to moving quickly with a full-stack app is type safety. The key elements of type safety include: autocompletion, validation of code at runtime, ability to verify the inputs and outputs, and – of course – safety.

Introducing the four horsemen of typesafety

TypeScript

TypeScript (TS) is the one language to rule them all. According to Matt Pocock, the creator of the Total TypeScript course, by 2025 TypeScript will be the most popular language for new programmers.

In fact, you’re probably already using TypeScript, albeit unknowingly. Many popular IDEs (such as VSCode, WebStorm, Visual Studio, and Sublime Text) use their auto-completion features thanks to TS.

Studies have shown that TypeScript could have prevented 15% of the JavaScript bugs in public projects on GitHub. Furthermore, TypeScript can help you write better and faster code. This is because it makes it possible to share types within your application across both frontend and backend.

Prisma ORM

Prisma is a next-generation object-relational mapping tool for Node.js and TypeScript. It unlocks a new level of developer experience when it comes to working with databases. It features a user-friendly data model, a streamlined migrations system, type safety, and auto-completion capabilities. The process of working with databases begins with schema, an intuitive way to specify database tables in a human-readable format. You can either define models manually or introspect them from an existing database.

After you define the schema and apply migrations, it’s time for Prisma Client. It’s an auto-generated and typesafe query builder for Node.js and TypeScript. It can be used in a variety of Node.js backend applications such as REST APIs, GraphQL APIs, gRPC, serverless applications, and microservices.

For the fast changing apps, having a reliable migration system and typesafe query builder gives developers the extra level of confidence. All the bugs in queries and mutation would be spotted by you IDE.

tRPC

If you’ve ever been faced with the choice between REST and GraphQL for your next project, I am afraid that you have to add tRPC to the decision list. tRPC is a powerful solution for building and consuming APIs. It uses TypeScript to enable seamless type sharing between the client and the server, without relying on code generation. It also provides enhanced autocompletion capabilities for inputs, outputs, and errors. This results in minimal runtime overhead and no need for a build pipeline. tRPC is compatible with popular libraries and frameworks like React, Next.js, Express, Fastify, Svelte, Nuxt, Remix, and Koa. This makes it simple to integrate with existing applications. It has also been thoroughly tested and supports subscriptions and request batching.

The biggest advantage of tRPC for any application built by a single team is the speed at which you can move forward. Adding new routes and procedures, and using them right away on the frontend with the power of Tanstack Query, feels incredibly good.

Next.js

Next.js is a versatile React framework that provides building blocks for developing fast web applications. It gives you the finest developer experience with all the features you need for production. Hybrid static and server rendering, smart bundling, and route pre-fetching are just a few, and there’s more. No config is needed.

The latest release of Next.js includes the beta version of the app directory. It is an introduction to a new mental model for building hybrid applications that leverage both the server and the client, based on React Server Components. Instead of rendering your entire application client-side, React now allows you to choose where to render your components based on their function.

Next.js is an amazing framework, that can be easily used in applications of any size. It’s trusted by millions of developers and companies, and the core team works in Vercel. And I cannot praise Vercel enough.

But there’s more – introducing T3 stack

I am neither the first , nor the last one to talk about these technologies. Theo Browne, CEO of Ping.gg, and an amazing team of contributors created a T3 stack. It includes all four solutions, and even more – Tailwind CSS for styling and Auth.js (formerly next-auth.js) for handling authentication. The latter is an excellent solution to incorporate the incredibly complex matter of security into a Next.js application without the hassle of having to build it yourself. Tailwind, on the other hand, makes it easy to create a visually appealing app. It does so by providing building blocks such as good default colours, spacing, and other primitive utilities. And, unlike component libraries, it does not prevent you from taking your app to the next level and creating something beautiful and unique.

T3 stack is modular, so you can choose what parts you want to use in your next application. The T3 axioms include: problem solving, responsibility, and non-optional type safety.

I have worked with a lot of technologies and stacks. Currently, T3 is in my opinion the best way to start a full-stack, typesafe Next.js app. It is a great choice for single teams building apps.