The t3 stack

•

What is the T3 web development stack and why YOU should use it for your next project! This is why I think the T3 stack is literally the best stack for any website. Easy, superfast ⚡and super powerful. Thanks to @t3dotgg from @pingdotgg for the creating it ↓ Read 🧵

Before I start, I'd like to mention Nexxel's GitHub repository to create a t3 app with just one command. If you end up liking the stack after this thread, follow me on twitter and make sure to ⭐ this repo and follow nexxel github.com/nexxeln/create-t3-app

First, let's understand the stack itself. It's called t3 because of the 3 main Ts: - tRPC - Typescript - Tailwind along with the amazing-ness of - Next.js - Prisma - NextAuth.js There are a lot more recommendations I'll talk about in the last tweet of this thread 🧵 1/8

𝗪𝗵𝘆 𝗧𝘆𝗽𝗲𝘀𝗰𝗿𝗶𝗽𝘁? Javascript is hard. what makes it harder, is, the inability to catch errors, and the absence of type-safety. For complex projects, this becomes a HUGE problem. Use Typescript. It might "waste" time initially, but a must-have for the long run. 🧵 2/8

𝗪𝗵𝘆 𝘁𝗥𝗣𝗖? tRPC is a library to build fully typesafe APIs - from client to server by sharing the types between the two, which helps developers to catch errors early before building. My friend Nexxel has a fantastic blog on it -worth a read! 🧵 3/8 blog.nexxel.dev/trpc

𝗪𝗵𝘆 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 Many people HATE tailwind. And I do understand. It makes the HTML look cluttered. But trust me - I'll never, ever write plain CSS again. It makes the development so much faster, and creates a kind of "flow" while giving all the design freedom of CSS 🧵 4/8

Now, let's get to Next.js. here are some bullet points.- Easy to learn - ⚡ Amazingly fast - SSG, SSR support - Auto-optimised images - Amazing SEO - API routes @freeCodeCamp has an amazing article worth a read 🧵 5/8 freecodecamp.org/news/why-you-should-learn-next-js-as-a-react-developer/

Why Prisma first, what is prisma? It's an object-relational mapper for NodeJS. Instead of writing plain SQL, it creates a typesafe client to send SQL queries to your database. works with all SQL databases. This means, you have code suggestions and fewer errors 🧵 6/8

And NextAuth - it's basically the best authentication solution for NextJS. It's easy to use, lets you choose your own providers, and is very secure. 🧵 7/8

But that's not it - There are some (many) recommendations I'd like to include. For fetching and querying, use React-Query For Analytics, use @PlausibleHQ For Web hosting, use @vercel For infrastructure hosting, use @Railway 🧵 8/8

Ok now that's it 😄 Again, if you end up liking this thread, make sure to follow me @DhravyaShah and Theo @t3dotgg on Twitter, and Nexxel on Github. Share by retweeting the first tweet ❤️