You're a lifesaver! I came back to this tutorial without knowing a new tutorial existed, tried building something new using "npm create t3-app@latest" and it was a bit of a struggle trying to integrate Clerk with App Router and I am still not really familiar with server components. Thank you for all of your work!
I struggle to find anyone who can accurately explain a new stack to me with such depth and precision that you've done. In half an hour I learn more from you just STARTING your application than I do scrolling online tutorials or Udemy classes. I have been looking for an opportunity to start working my way into Next.js and this tutorial is amazing. Thank you so much for the hard work you put into your videos. Looking forward to the future!
Holy shit. Just watched the introduction on stream and thought it was going to be a paid course. Couldn’t imagine it would be a free one. Kudos for being awesome. I am going to enjoy this over the weekend.
I will never charge for learning materials that could help a dev get their first job. Feels weird. Too much money to be made from companies to take it from y'all in such an egregious way
You should include this tutorial in create-t3 docs. It's the best way for a beginner/intermediate react dev to get familiar with the T3 stack. I would love to see more of those in the future(a little more advanced especially!).
Just got my first job as a dev, Theo, your videos aside from being informative have helped me to stay passionate about developing and have been a great asset in my journey... Thanks for doing what you do man!
I am just now hitting the 10 minute mark and am already learning a ton. As a backend guy looking to get into the frontend a bit more, this is invaluable. Thank you Theo.
UPDATE: WE GOT THEM TY!!! Prev: Oh if someone could comment timestamps I'd appreciate you - I'd do it but I've already watched this 1000 times and don't want to again
Here you go! [0:00] Introduction & Install [3:45] Setting up Github, Vercel, & Planetscale [11:30] Setting up Clerk, CAT BREAK, & Axiom [21:15] From Prisma Schema to tRPC Procedure [30:30] Style skeleton [37:15] Creating posts & connecting them to users [48:15] The PostView component [59:30] Relative time with dayjs [1:04:00] Next/Image [1:08:00] Loading spinner & handling loading states [1:19:15] tRPC Context, auth state, and private procedures [1:27:00] Zod, useMutation, sorting the feed, and onSuccess [1:38:00] Rate limiting with Upstash [1:43:45] Error handling with Zod & react-hot-toast [1:52:30] Routing -- Profile View & Post View [1:57:30] Creating profileRouter [2:06:00] Using tRPC's createProxySSGHelpers [2:14:45] The Layout [2:19:15] The Profile Page [2:28:00] The Profile Feed [2:38:45] The Post Page [2:47:15] Github CI [2:52:45] Domain Name Redirect [2:55:15] Conclusion Great tutorial, Theo! Super approachable for new people, but I even learned something (the SSG helper) despite having used tRPC several times. Thanks for doing this! :)
I haven't been a coder for nearly 20 years. There are so many frameworks and tools now, it's impossible to catch up without feeling like being knocked on your arse with decision paralysis. This stack and this tutorials is just what the doctor ordered. I'm so looking forward to getting back to this. Love your work.
Push to production as early as possibly is a great tip! I recently completed a project and we decided to push live once all the dev work was complete. Queue a 2 week delay while we fought with services setup, database issues, domain tags and all sorts. Great tutorial Theo! I've not used trpc before, will give it a go after this
Theo: “prisma studio is the most convenient developer tool” *eyes emoji doesn’t paste Theo: “damnit this tool is so awful” 😂 if that isn’t every devs love hate relationship with their tools idk what is
at my last dev job one of the more senior developers basically framed it up like if you don't have this relationship with the tools you use you don't understand them or use them enough lol
This is exactly what I've been looking for! I'm a newly graduated dev and really wanted to learn how to build stuff in a typesafe way. I've been following you for a year now, watching you whilst I learn. You helped me so much during my course! On one of our group projects I managed to get everyone off of create react app and using vite for our SPA instead. Pushed me into jumping head first into TypeScript as well. Thank you for making such informative content dude! You're certainly a real one ❤ Now to get cracking on that twitter clone.
You know it's a top tier tutorial when Github Copilot auto-completes the same thing verbatim. It's almost like it watched the same tutorial, probably because everybody doing the same tutorial has trained GHC's behavior. 🤩
Almost half way through, I love that you're completely transparent about using companies that fund your channel. And last but not least, its relieving to see you make the same silly mistakes that I do 😅
Was able to get everything working despite a few tools changing since recording. Clerk changed a little but following the docs was simple. Then createProxySSGHelpers changed to createServerSideHelpers. Other than that it was a nice 2 day tutorial. Before this I had just used the MERN stack, and this video was an attempt to go off the deep end in other tools. I can see why Theo likes the stack and I plan to continue tinkering with this project and learning. Thanks for the great video!
I love how this tutorial gave a realistic picture how an experienced developer work - speeding through architecting a complex and elegant system that scales in less than 20 mins, and spending equal, if not more amount of time getting some basic types and styles right.
I like watching tutorials like this as a senior engineer just to see what others are up too. I liked your approach to showing how trpc works with react-query in nextjs, but have we really become so reliant upon the latest frameworks and libraries that we have forgotten the simplest things like using semantic elements like form and label or inbuilt functionality like Intl? It gives you so much functionality you were looking for and end up redeveloping the wheel.
Hi Theo after multiple times failing into tutorial-hell, I found out one of the game-changers is setting up Git repo + deploy at first. The ability to have a base point where you know all the backend+frontend code and “DevOps” integration, somewhen were functioning is totally needed along the development of a project/app… So kudos for making it a statement here 1:45 👈🎉
This is so great idea, to deploy from the beginning. This way I will always know which part is not working in prod. Just a side note: at 1:51:24, you can avoid the dubplicate code (onKeyDown and a separate ), if you use { e.preventDefault ...}}>
Great video. Just completed after a couple days. Some hangups with updated Clerk middleware and createServerSideHelpers but nothing I couldn't figure out by reading the docs. Very much appreciated!
This is such an adhd friendly tutorial. Mr. Cat appearing out of the blue and climbing you up like a tree, then back to serious mode and BOOM mr Cat again-> just the right amount of distraction while staying engaged lol. Thank you !
Thank you, Theo. Incredible timing of this upload! It's exactly what I need to join all the dots together. I've downloaded the video so you get credit for me watching it to completion and I can take my time in the meantime.
Wow the best turorial I have ever taken from youtube! Thank you Thoe! It's my first next.js project so took me a few days to complete, had to pause and read up on some stuff. But I loved that it covered more complex topics. My favorite is the part when you did SSG with tRPC helpers
Amazing video! I actually really appreciate you left in your frustrations with type errors and css around the 50 minute mark. This was super relatable and made me feel less like I'm doing things wrong to encounter similar frustrations. 🙏 Thank you for the awesome video, love t3.
I love how you transition from error messages to new teaching point (the first vercel build when the env vars were missing). This was very engaging. Great presentation as tutorials go.
This is exactly what I needed. I wanted to dive into the T3-Stack for a long time now, but never knew where to start. After this tutorial I am confident enough to start using all this awesome "new" tech. Thx a lot.
That axiom data logger was a huge find for me! working very well, best part is i'm able to test it as much as i want cause the free tier limit is huge. I had trouble in the past trying to find a tool like this (for free) and all i could find was a month trial... Thank you brother!
This video is great! It explains everything basic you need to build and ship whatever in the web. I know it was a major effort to do this, but I would love to see a follow up video to this where some of the other common subjects of a web app are handled. I'm speaking of forms, tables, requests to external services / apis, and probably quite some other things I can't think of right now.
Dude... this is SO valuable. I just spent 30+ hrs setting up a system that I am trashing to pick up t3 lol. This is just a better way of doing things. Also will buy a jacket soon
When you are moving a component to a new file you can use the refactor feature in vscode by selecting the whole component -> right-clicking -> refactor -> move to a new file. It make the file with the correct name and also moves the required imports automatically!
The stack that made many front-ent folks to go full stack. You can spun up a MVP in a record time with this and actually refactor a lil and go to production afterwards.
yes!!! I'm nervous to watch this because I know I will be tempted to update 90% of my code 🤣. I can't imagine starting over right now without T3. Hopefully you realize the impact this has on some people (especially startups). T3 changed our trajectory pretty incredibly. It's in a turbo repo monorepo with 3 apps we spit out in the course of 1.5 months. Something I truly believe would've been 6 months minimum with our prior tooling.
I already knew how to make this Chirp app using my own stacks but I still watched the tuto by curiosity and gosh was it good. Really interesting and fun, learnt about really cool services and ways to write my code efficiently and save so much time. Ty and good job for the video!
Fantastic video. Theo, I would absolutely love you to create a version of this using all the latest server components stuff and app router that you've been raving about of late.
Hey there! I just wanted to reach out and say a huge thank you for making a difference in so many lives. Your dedication and generosity are truly inspiring. From Brazil, I'm sending you my best regards and heartfelt appreciation for all that you do. Keep up the amazing work!
Awesome tutorial, immensely helpful for someone being introduced to the T3 stack! I was often caught up with trying to figure out the best tools for my app and inevitably kept swapping around and redoing it all from scratch... but this may be the first setup that sticks, will do my best as a fellow T3 enjoyer
Can't wait to take time to follow this.....thank you theo. I been currently learning remix, prisma and many database solutions from mongodb to sqllite. I'm excited to see how different the T3 stack is in comparison.
Love it It's been a long time since i've stayed 3 hours straight in front of a video. You should do more tutorials like this one, realy good speaker :)
When trying to add a space between the spans for the dot, instead of using "gap-1" in tailwind you can just add "whitespace-pre" which will preserve the whitespace. Or you can use to create a non breaking space
Thank you so much for the hard work you put in everything you do. This video is a masterpiece, I feel like I become a better dev just watching your content and following you.
It's funny - I've been a dev for over a decade, and I always feel like a knob having to look things up and forgetting shit all the time. This stuff reminds me that we're all human, and even UA-cam creators have cheatsheets and stuff. haha Been outta the tRPC game for a while and giving myself a refresher. This is gold!
Thanks again for more amazing content. In the future, could you do a discussion on auth solutions? I've used both Clerk and NextAuth but I'm interested in your thoughts on when/why to use each. Potential discussion points: - Pros/cons of owning your auth data - Most important ways they differ - Future outlook of the two services, their direction, roadmap, and support - Keeping a database in sync with Clerk (I found their webhook workflow a bit tedious)
Owning your auth data gives you more control and privacy over your personal information, but it also means you are responsible for its security and maintenance. The most important ways owning your auth data differs from using a third-party authentication service are: ownership and control of your data, customization and flexibility, and potential integration challenges. The future outlook of the two services will likely depend on the evolving privacy and security landscape, as well as user preferences for convenience versus control. Both services may continue to develop new features and functionality, and may also face increased competition from emerging technologies. Keeping a database in sync with Clerk can be tedious, but it is necessary for ensuring accurate and up-to-date user information. One way to streamline the process is to use automation tools such as webhooks and APIs, which can help automate data syncing and reduce manual effort.
I'm not a front end dev but I like to keep up with what's cool and I really enjoyed this - thanks for posting it! It would be really cool if you could do a future video showing how you would implement something like a Terms and Conditions agreement where the user can't do anything on the site until they check the box to agree and it gets saved in the DB. It seems like a common use case which needs careful thought to be done well.
In the planet scale setup, the prisma config you googled to find, is actually provided by planet scale right next to the .env example. schema.prisma @6:51
I've used this stack a couple times in production now and wish I had this video when I started out! Learned a few new tricks. Also the fact that the TypeScript server needs to be restarted every so often seems to be common for this stack.
I'm gonna watch this bc I've always wanted to know/try to implement a PRODUCTION-grade Backend (not those node / Go tutorials. They aren't useful for a real world app). I work as FE but I wanted to use gRPC/tRPC, connect to DBs / microservices with the proper layers between and how it should be done. I could just look at how it's done at my company but it's already too complex (🍝) for me to learn that alone. 😅. I hope this doesn't disappoint
I followed the video exactly but the build won't run at 11:00. Command "npm run build" exited with 1. Which may have to do with the error in _app.tsx "'Component' cannot be used as a JSX component. Its element type 'ReactElement | Component | null' is not a valid JSX element.". Please respond with a fix if possible!
UPDATED VERSION IS NOW LIVE WITH APP ROUTER ua-cam.com/video/d5x0JCZbAJs/v-deo.html
You're a lifesaver! I came back to this tutorial without knowing a new tutorial existed, tried building something new using "npm create t3-app@latest" and it was a bit of a struggle trying to integrate Clerk with App Router and I am still not really familiar with server components. Thank you for all of your work!
I struggle to find anyone who can accurately explain a new stack to me with such depth and precision that you've done. In half an hour I learn more from you just STARTING your application than I do scrolling online tutorials or Udemy classes. I have been looking for an opportunity to start working my way into Next.js and this tutorial is amazing.
Thank you so much for the hard work you put into your videos. Looking forward to the future!
!!! Omg thank you so much man
@@t3dotgg np, mate
Today I learnt that I should probably pick up trpc because it feels closer to an industry standard and ditch express 😂
Javascript mastery does better than this
Donating cause it feels criminal to watch a tutorial as good as this for free
T3 Stack = Illegal productivity levels
Indeed
Thanks for taking the time brotha, this was great, learned more than I thought I would ✌🏽
This 3 hour tutorial might take me a week to complete, but thinking how much more I'll know in the end is inspiring. Thanks, Theo!
watched the whole thing at once.
@@mwnkt Wow, you're amazing
i couldnt agree more
@@mwnkthow much time would it take to follow along or make the same by yourself is the real question?
@@lalithrockz it might take me a month I just know react
This is exactly the content I needed! Huge value. Thank you Theo!
!!! Appreciate u
Holy shit. Just watched the introduction on stream and thought it was going to be a paid course. Couldn’t imagine it would be a free one.
Kudos for being awesome. I am going to enjoy this over the weekend.
I will never charge for learning materials that could help a dev get their first job. Feels weird. Too much money to be made from companies to take it from y'all in such an egregious way
@@t3dotgg What an actual chad, Theo is a true one 👑
@@t3dotggIn Germany, we call people like you "Ehrenmann" which translates to man of honor but not in the marriage sense.
You should include this tutorial in create-t3 docs. It's the best way for a beginner/intermediate react dev to get familiar with the T3 stack. I would love to see more of those in the future(a little more advanced especially!).
completely agree!
completely agree!
Just got my first job as a dev, Theo, your videos aside from being informative have helped me to stay passionate about developing and have been a great asset in my journey... Thanks for doing what you do man!
I am just now hitting the 10 minute mark and am already learning a ton. As a backend guy looking to get into the frontend a bit more, this is invaluable. Thank you Theo.
Same situation here
UPDATE: WE GOT THEM TY!!!
Prev: Oh if someone could comment timestamps I'd appreciate you - I'd do it but I've already watched this 1000 times and don't want to again
I'm on it. :)
@@zombiefacesupreme Thanks! :)
I'd offer to but trust me, you don't want that. 😋😋
Here you go!
[0:00] Introduction & Install
[3:45] Setting up Github, Vercel, & Planetscale
[11:30] Setting up Clerk, CAT BREAK, & Axiom
[21:15] From Prisma Schema to tRPC Procedure
[30:30] Style skeleton
[37:15] Creating posts & connecting them to users
[48:15] The PostView component
[59:30] Relative time with dayjs
[1:04:00] Next/Image
[1:08:00] Loading spinner & handling loading states
[1:19:15] tRPC Context, auth state, and private procedures
[1:27:00] Zod, useMutation, sorting the feed, and onSuccess
[1:38:00] Rate limiting with Upstash
[1:43:45] Error handling with Zod & react-hot-toast
[1:52:30] Routing -- Profile View & Post View
[1:57:30] Creating profileRouter
[2:06:00] Using tRPC's createProxySSGHelpers
[2:14:45] The Layout
[2:19:15] The Profile Page
[2:28:00] The Profile Feed
[2:38:45] The Post Page
[2:47:15] Github CI
[2:52:45] Domain Name Redirect
[2:55:15] Conclusion
Great tutorial, Theo! Super approachable for new people, but I even learned something (the SSG helper) despite having used tRPC several times. Thanks for doing this! :)
@@zombiefacesupreme Was about to go to bed - saw this notification and got up to add these quick tysm!!!
It’s nice to stumble upon a comprehensive video that goes into how an entire stack works, not just a piece
If the typescript error doesn't get fixed after restarting at 23:40, try restarting eslint server as well.
or restart vscode
I haven't been a coder for nearly 20 years. There are so many frameworks and tools now, it's impossible to catch up without feeling like being knocked on your arse with decision paralysis. This stack and this tutorials is just what the doctor ordered. I'm so looking forward to getting back to this. Love your work.
Push to production as early as possibly is a great tip!
I recently completed a project and we decided to push live once all the dev work was complete. Queue a 2 week delay while we fought with services setup, database issues, domain tags and all sorts.
Great tutorial Theo! I've not used trpc before, will give it a go after this
This is CI/CD, I’m very surprised people are still shipping entire projects for the first time at the end of the dev work…
@@meostyles Our pipeline went all the way to staging, so I guess we learnt a lesson there.
@@meostyles agree
this sounds like a joke
Theo: “prisma studio is the most convenient developer tool”
*eyes emoji doesn’t paste
Theo: “damnit this tool is so awful”
😂 if that isn’t every devs love hate relationship with their tools idk what is
can't agree more hhh
When you start to make tools you begin to question other's design choices a lot more
at my last dev job one of the more senior developers basically framed it up like if you don't have this relationship with the tools you use you don't understand them or use them enough lol
This is exactly what I've been looking for! I'm a newly graduated dev and really wanted to learn how to build stuff in a typesafe way. I've been following you for a year now, watching you whilst I learn. You helped me so much during my course! On one of our group projects I managed to get everyone off of create react app and using vite for our SPA instead. Pushed me into jumping head first into TypeScript as well.
Thank you for making such informative content dude! You're certainly a real one ❤ Now to get cracking on that twitter clone.
You know it's a top tier tutorial when Github Copilot auto-completes the same thing verbatim. It's almost like it watched the same tutorial, probably because everybody doing the same tutorial has trained GHC's behavior. 🤩
1:05:30 is so relatable 🤣🤣🤣
Theo has a heart of gold for taking the time to teach us to efficiently use the T3 stack
Finally Theo is doing tutorials!!
Thanks for the tutorial and the stack!
🙏🙏
This might be the best dev video on UA-cam
Can't belive how many powerful tools I've just learned in one video! Please make more of these!!
Almost half way through, I love that you're completely transparent about using companies that fund your channel.
And last but not least, its relieving to see you make the same silly mistakes that I do 😅
Was able to get everything working despite a few tools changing since recording. Clerk changed a little but following the docs was simple. Then createProxySSGHelpers changed to createServerSideHelpers. Other than that it was a nice 2 day tutorial.
Before this I had just used the MERN stack, and this video was an attempt to go off the deep end in other tools. I can see why Theo likes the stack and I plan to continue tinkering with this project and learning.
Thanks for the great video!
Thanks! This guide is amazing and I'm only 15 minutes in. Would you consider adding a "backend only" or "api" type of configuration for t3 create app?
I love how this tutorial gave a realistic picture how an experienced developer work - speeding through architecting a complex and elegant system that scales in less than 20 mins, and spending equal, if not more amount of time getting some basic types and styles right.
I don't know how this may sound to you. But dude you somehow manage to _look_ like a fullstack. I'm subbed
I like watching tutorials like this as a senior engineer just to see what others are up too.
I liked your approach to showing how trpc works with react-query in nextjs, but have we really become so reliant upon the latest frameworks and libraries that we have forgotten the simplest things like using semantic elements like form and label or inbuilt functionality like Intl? It gives you so much functionality you were looking for and end up redeveloping the wheel.
Hi Theo after multiple times failing into tutorial-hell, I found out one of the game-changers is setting up Git repo + deploy at first.
The ability to have a base point where you know all the backend+frontend code and “DevOps” integration, somewhen were functioning is totally needed along the development of a project/app…
So kudos for making it a statement here 1:45 👈🎉
Even though I've been using the t3-stack for almost a year now, seeing how other people use it, is still super helpful. Thanks 🙏
This is so great idea, to deploy from the beginning. This way I will always know which part is not working in prod.
Just a side note: at 1:51:24, you can avoid the dubplicate code (onKeyDown and a separate ), if you use { e.preventDefault ...}}>
This content is gold Theo. I'm so excited and grateful to be able to watch this for free.
this is awesome. a masterclass in efficient, modern web dev
I agree
I cannot believe how much value this tutorial is Theo, you literally saved by butt.
This hits the spot. Really. Most tutorials are either too complex or too beginner - for me at least. This is GREAT. Thank you.
Great video. Just completed after a couple days. Some hangups with updated Clerk middleware and createServerSideHelpers but nothing I couldn't figure out by reading the docs. Very much appreciated!
whats the fix?
This is such an adhd friendly tutorial. Mr. Cat appearing out of the blue and climbing you up like a tree, then back to serious mode and BOOM mr Cat again-> just the right amount of distraction while staying engaged lol. Thank you !
Thank you, Theo. Incredible timing of this upload! It's exactly what I need to join all the dots together. I've downloaded the video so you get credit for me watching it to completion and I can take my time in the meantime.
Wow the best turorial I have ever taken from youtube! Thank you Thoe! It's my first next.js project so took me a few days to complete, had to pause and read up on some stuff. But I loved that it covered more complex topics. My favorite is the part when you did SSG with tRPC helpers
Love how T3 stack keeps me (type) safe while giving a phenomenal DX. Can't wait to become hardcore T3 dev. Thanks a ton!
Too kind!!! Thank you a ton 🙏
Holy shit man, i've been through a lot of tutorials. Your explanations/thorough-ness is so good and i'm not falling asleep. Well done mate.
Loving the wtf kind of moments from you, makes it so much better of a tutorial knowing that the pros struggle from time to time!
Also, your love for your cat is purr gold!
I predict this will be Theo's most popular video. Cant wait to finish it.
Amazing video! I actually really appreciate you left in your frustrations with type errors and css around the 50 minute mark. This was super relatable and made me feel less like I'm doing things wrong to encounter similar frustrations. 🙏 Thank you for the awesome video, love t3.
Great tutorial. And genius way to have like 10 sponsors in one video.
Learned some really useful stuff in here. Especially RouterOutputs typing. Would have been useful in the app I just made.
I love how you transition from error messages to new teaching point (the first vercel build when the env vars were missing). This was very engaging. Great presentation as tutorials go.
This is exactly what I needed. I wanted to dive into the T3-Stack for a long time now, but never knew where to start. After this tutorial I am confident enough to start using all this awesome "new" tech. Thx a lot.
you can actually use VS code refactor (CTRL+SHIfT+R) to move functions to separate file. it will move the imports as well. nice and clean
Amazing tutorial, you learn soooo much in just 3 hours. Now let's build! Thank you Theo 🙏
That axiom data logger was a huge find for me! working very well, best part is i'm able to test it as much as i want cause the free tier limit is huge. I had trouble in the past trying to find a tool like this (for free) and all i could find was a month trial... Thank you brother!
This video is great! It explains everything basic you need to build and ship whatever in the web.
I know it was a major effort to do this, but I would love to see a follow up video to this where some of the other common subjects of a web app are handled.
I'm speaking of forms, tables, requests to external services / apis, and probably quite some other things I can't think of right now.
Theo, I am out of words. Thank you so much for putting out videos like this and being the cool Jedi! Your work is amazing🙏🏾
Absolutely, without a doubt, 100% for sure, this is the most useful tutorial on UA-cam.
Dude... this is SO valuable. I just spent 30+ hrs setting up a system that I am trashing to pick up t3 lol.
This is just a better way of doing things.
Also will buy a jacket soon
When you are moving a component to a new file you can use the refactor feature in vscode by selecting the whole component -> right-clicking -> refactor -> move to a new file. It make the file with the correct name and also moves the required imports automatically!
I really love watching other developers in their own workflow. Learn so many cool small tricks that all add up to speed up development
I haven't watched the whole video. In fact, I have only watched the Intro and I am super excited already.
This is what I've just needed as a mediocre web developer! Thanks Theo. Will update this comment after I watch (probably)
The speed of this setup and coding is mind blowing! 🤯 thank you for showing me what’s possible 🙏🏻
i was expecting a 30 minute video when this was announced. i am thrilled that it’s 3 hours of insight
The stack that made many front-ent folks to go full stack. You can spun up a MVP in a record time with this and actually refactor a lil and go to production afterwards.
Completed the video along with coding in about 3 days.
Really learnt so much about production ready apps.
Thanks Theo for making such great content.
thanks Theo for this great piece, now after 5 days of learning stuffs from you I'm confident to work with T3 stack. Really mate hats off 🎩
this is probably the best tutorial on youtube... my god. thank you!
yes!!! I'm nervous to watch this because I know I will be tempted to update 90% of my code 🤣. I can't imagine starting over right now without T3. Hopefully you realize the impact this has on some people (especially startups). T3 changed our trajectory pretty incredibly. It's in a turbo repo monorepo with 3 apps we spit out in the course of 1.5 months. Something I truly believe would've been 6 months minimum with our prior tooling.
Awesome vid theo! My favourite part was when you showed off the capabilities of the ssg helper, that seems really cool and cant wait to try it
It's been a while since I felt excitement watching a tutorial.
I already knew how to make this Chirp app using my own stacks but I still watched the tuto by curiosity and gosh was it good.
Really interesting and fun, learnt about really cool services and ways to write my code efficiently and save so much time. Ty and good job for the video!
Man I like how you stepped into the spotlight and took over being the face of next gen tooling. Keep grinding bro
Fantastic video. Theo, I would absolutely love you to create a version of this using all the latest server components stuff and app router that you've been raving about of late.
Hey there! I just wanted to reach out and say a huge thank you for making a difference in so many lives. Your dedication and generosity are truly inspiring. From Brazil, I'm sending you my best regards and heartfelt appreciation for all that you do. Keep up the amazing work!
Awesome tutorial, immensely helpful for someone being introduced to the T3 stack!
I was often caught up with trying to figure out the best tools for my app and inevitably kept swapping around and redoing it all from scratch...
but this may be the first setup that sticks, will do my best as a fellow T3 enjoyer
Can't wait to take time to follow this.....thank you theo. I been currently learning remix, prisma and many database solutions from mongodb to sqllite. I'm excited to see how different the T3 stack is in comparison.
Love it It's been a long time since i've stayed 3 hours straight in front of a video. You should do more tutorials like this one, realy good speaker :)
Thanks!
My man, this gonna save my life, in next month finish my career and gonna to build my saas.
A lot of saas until one win
skimmed over a few really important details beginners really need help with but still appreciate you putting this out there.
It is magnificent to watch you working and learn from you.Thanks Theo.
This was so helpful as someone just getting started with frontend, thanks!!!
I've been waiting for this, thanks for the tutorial Theo!
That's a pretty snazzy shirt!
Full stack here now learning T3! Very helpful video, thanks man!
When trying to add a space between the spans for the dot, instead of using "gap-1" in tailwind you can just add "whitespace-pre" which will preserve the whitespace. Or you can use to create a non breaking space
Your voice is so nice I can listen to this for hours. Oh wait I already did
I have been waiting for this for months now!
Thank you so much for the hard work you put in everything you do. This video is a masterpiece, I feel like I become a better dev just watching your content and following you.
It's funny - I've been a dev for over a decade, and I always feel like a knob having to look things up and forgetting shit all the time. This stuff reminds me that we're all human, and even UA-cam creators have cheatsheets and stuff. haha
Been outta the tRPC game for a while and giving myself a refresher. This is gold!
Great content and loving the T3 stack. Awesome work Theo 👍
Thanks again for more amazing content. In the future, could you do a discussion on auth solutions? I've used both Clerk and NextAuth but I'm interested in your thoughts on when/why to use each.
Potential discussion points:
- Pros/cons of owning your auth data
- Most important ways they differ
- Future outlook of the two services, their direction, roadmap, and support
- Keeping a database in sync with Clerk (I found their webhook workflow a bit tedious)
Owning your auth data gives you more control and privacy over your personal information, but it also means you are responsible for its security and maintenance.
The most important ways owning your auth data differs from using a third-party authentication service are: ownership and control of your data, customization and flexibility, and potential integration challenges.
The future outlook of the two services will likely depend on the evolving privacy and security landscape, as well as user preferences for convenience versus control. Both services may continue to develop new features and functionality, and may also face increased competition from emerging technologies.
Keeping a database in sync with Clerk can be tedious, but it is necessary for ensuring accurate and up-to-date user information. One way to streamline the process is to use automation tools such as webhooks and APIs, which can help automate data syncing and reduce manual effort.
Thanks Theo! I’ve been waiting for exactly this!
I'm not a front end dev but I like to keep up with what's cool and I really enjoyed this - thanks for posting it!
It would be really cool if you could do a future video showing how you would implement something like a Terms and Conditions agreement where the user can't do anything on the site until they check the box to agree and it gets saved in the DB. It seems like a common use case which needs careful thought to be done well.
An incredible tutorial, I learnt so many useful things from this. Your pace is excellent and the content really digestible. Thank you very much :)
Thanks Theo, I've been waiting for this tutorial video for a while now
In the planet scale setup, the prisma config you googled to find, is actually provided by planet scale right next to the .env example. schema.prisma @6:51
I've used this stack a couple times in production now and wish I had this video when I started out! Learned a few new tricks. Also the fact that the TypeScript server needs to be restarted every so often seems to be common for this stack.
Saved for later, thanks man for the awesomeness and also for your love for this community sharing this kind of knowledge!
I'm gonna watch this bc I've always wanted to know/try to implement a PRODUCTION-grade Backend (not those node / Go tutorials. They aren't useful for a real world app). I work as FE but I wanted to use gRPC/tRPC, connect to DBs / microservices with the proper layers between and how it should be done. I could just look at how it's done at my company but it's already too complex (🍝) for me to learn that alone. 😅.
I hope this doesn't disappoint
I followed the video exactly but the build won't run at 11:00. Command "npm run build" exited with 1. Which may have to do with the error in _app.tsx "'Component' cannot be used as a JSX component.
Its element type 'ReactElement | Component | null' is not a valid JSX element.". Please respond with a fix if possible!
I just saw your post a minute ago and here we are thanks for tutorial.