I’ve been playing around with tech stacks a lot lately, exploring use cases and building small projects. One stack has stood out to me for a lot of reasons and it all starts with create-t3-app. It’s as simple as “$npx create-t3-app” and you’re off to the races. The three t’s are tailwind, tprc, and tailwind, but create-t3-app is more than that. The template pulls together for you a NextJS app, and you can opt to include or leave out nextAuth, Prisma, tailwind, and or trpc. Lets get into what makes this all special.

If you don’t already know about NextJS, it’s time to get acquainted. From Wikipedia: Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites. Okay, but what does this mean in english? First, you get to develop with react, but enjoy server side rendering of the initial page loads that will allow you both a better user experience, and easier SEO since the crawlers can actually get the page content on load. Another great thing about NextJS is that it’s also your backend. There’s an /api directories in your pages directory where you can write api endpoints for your application to access that are automatically translated to lambda functions and deployed.

NextAuth is a really great, plug and play auth solution that will facilitate auth against a number of third party auth providers such as Discord, Facebook, GitHub, Google, and about 40 others! Bring your own database (or not) you can enable auth on your NextJS app quick and easy. This is by far the easiest 3rd party auth integration experience I’ve ever had.

Prisma is a fantastic database abstraction layer that allows you to both build schema, and actually interact with the data without having to understand the specific database type. With 10 different supported database types you can quicky create your data model right in your codebase, manage migrations and deployment from cli, and enjoy a strongly typed NoSQL experience in your Typescript code.

tRPC gives you type safety with your APIs! Opinionated api router and endpoints, that then give your frontend code types to compare and validate against. There’s a lot more to it including cache management, but you just need to build with it to really appreciate how much it enhances the developer experience.

If you don’t know what tailwind is at this point, there’s probably a thousand different resources that can explain it better than I. For me, I use tailwind to help reduce the decisions I need to make about css organization, class names, etc. At the same time it’s super light weight, and easy to use. Most developers I know initially balk at it and have a very hard time, but especially due to it’s so widely used, give it a couple weeks and then reevaluate.

So, why create-t3-app? It’s focused on developer experience, reducing package bloat, and type safety which is going to accelerate your development speed and reduce errors. As with any set of tools, it’s not a panacea, but it solves such a wide range of problems so elegantly, it’s my first choice for most new projects and I highly recommend adding these tools to your arsenal.

I’ve been playing around with tech stacks a lot lately, exploring use cases and building small projects. One stack has stood out to me for a lot of reasons and it all starts with create-t3-app. It’s as simple as “$npx create-t3-app” and you’re off to the races. The three t’s are tailwind, tprc, and tailwind, but create-t3-app is more than that. The template pulls together for you a NextJS app, and you can opt to include or leave out nextAuth, Prisma, tailwind, and or trpc. Lets get into what makes this all special.

If you don’t already know about NextJS, it’s time to get acquainted. From Wikipedia: Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites. Okay, but what does this mean in english? First, you get to develop with react, but enjoy server side rendering of the initial page loads that will allow you both a better user experience, and easier SEO since the crawlers can actually get the page content on load. Another great thing about NextJS is that it’s also your backend. There’s an /api directories in your pages directory where you can write api endpoints for your application to access that are automatically translated to lambda functions and deployed.

NextAuth is a really great, plug and play auth solution that will facilitate auth against a number of third party auth providers such as Discord, Facebook, GitHub, Google, and about 40 others! Bring your own database (or not) you can enable auth on your NextJS app quick and easy. This is by far the easiest 3rd party auth integration experience I’ve ever had.

Prisma is a fantastic database abstraction layer that allows you to both build schema, and actually interact with the data without having to understand the specific database type. With 10 different supported database types you can quicky create your data model right in your codebase, manage migrations and deployment from cli, and enjoy a strongly typed NoSQL experience in your Typescript code.

tRPC gives you type safety with your APIs! Opinionated api router and endpoints, that then give your frontend code types to compare and validate against. There’s a lot more to it including cache management, but you just need to build with it to really appreciate how much it enhances the developer experience.

If you don’t know what tailwind is at this point, there’s probably a thousand different resources that can explain it better than I. For me, I use tailwind to help reduce the decisions I need to make about css organization, class names, etc. At the same time it’s super light weight, and easy to use. Most developers I know initially balk at it and have a very hard time, but especially due to it’s so widely used, give it a couple weeks and then reevaluate.

So, why create-t3-app? It’s focused on developer experience, reducing package bloat, and type safety which is going to accelerate your development speed and reduce errors. As with any set of tools, it’s not a panacea, but it solves such a wide range of problems so elegantly, it’s my first choice for most new projects and I highly recommend adding these tools to your arsenal.