From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)

Рет қаралды 236,243

Күн бұрын

The Modern React Tutorial is FINALLY done. This one took awhile.
Shoutout to ALL the awesome sponsors who made this possible:
- Vercel
- Clerk
- Posthog
- Sentry
- Upstash
NOTES I MENTION DURING VIDEO
"Nextgram": github.com/vercel/nextgram/tr...
"useUploadThingInputProps": gist.github.com/t3dotgg/0464c...
GITHUB REPO github.com/t3dotgg/t3gallery
TIMESTAMPS (TY EMBED ❤️)
00:00 - Intro + Sponsors
03:30 - Scaffolding the project
06:12 - Creating our todo list
08:39 - Creating repo & pushing to GitHub
10:23 - Linking our repo to Vercel
12:07 - Deploying to Vercel
13:32 - Setting up uploadthing for images
15:40 - Displaying our mock data
17:35 - Next.js Layouts Explained
19:45 - Scaffolding our UI
21:47 - Tidying up builds & enabling turbo
24:18 - Setting up our Database
35:14 - Dynamic Routes
37:40 - Changing our database schema
43:00 - Adding authentication
54:04 - Setting up image uploading
01:04:10 - Connecting users to images
1:09:41 - server-only & React Taint
1:17:18 - The next/image Component
1:22:58 - Error management w/ Sentry
1:32:07 - Image page w/ Parallel Routes
2:04:15 - Fixing the upload button
2:11:05 - Setting up toaster w/ shadcn/ui
2:26:40 - Adding analytics w/ PostHog
2:38:21 - Delete button w/ Server Actions
2:49:52 - Adding rate limits w/ Upstash
2:56:44 - Locking down uploads
3:00:59 - Challenges for the Viewer
3:02:35 - Outro
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

Пікірлер: 457

@t3dotgg Ай бұрын

UPDATES: - create-t3-app now uses latest Next, which should fix some bugs with hot reloading on parallel routes - MAKE SURE YOU USE THE DEFAULT PREFIX WHEN SETTING UP VERCEL POSTGRES - Clerk Core 2 is no longer in beta! If you just `pnpm install @clerk/nextjs` you will have this version now :) Oh also - GITHUB REPO IS HERE: github.com/t3dotgg/t3gallery

@shivammishra1980 Ай бұрын

Should I use dependency injection with posthog? if in case I want to migrate to something like mixpanel?

@zxcaaq Ай бұрын

ur a legend

@mazwrld Ай бұрын

💜

@kingjune6685 Ай бұрын

when will the t3 stack updated

@georgepetroff2364 Ай бұрын

Thanks Theo, amazing tutorial as always ❤Recently you are bringing back the vibes of the time when pokemon roundest was around 😁would be amazing bringing new updated version of it tho'. UPLOADTHING is a game changer, finally something more about it too

@qwerasdfhjkio Ай бұрын

"primeagen still had a job"🤣

@lukem121 Ай бұрын

Wow nice, I have been looking forward to a video that isn't you reading an article or documentation. It's nice to see some actual programming 😁 Thank you for the vid!

@Amruth Ай бұрын

Honestly, this is the kind of content I subscribed for. Really respect Theo for putting out content like this for free that's extremely useful and especially targeted towards intermediate devs. A lot of the content is only for beginners.

@RobertMcGovernTarasis Ай бұрын

Indeed, only came across Theo a little while back and only ever seen him as a talking head. Not an actual coder, so this was quite informative

@Joseph-Codes Ай бұрын

Watch his lives

@good_eats876 Ай бұрын

Amazing comment !!!!!

@crowlsyong Ай бұрын

I agree

@embedyt Ай бұрын

Timestamps 00:00 - Intro 00:47 - Who, What & Why 03:30 - Scaffolding the project 06:12 - Creating our todo list 08:39 - Creating repo & pushing to GitHub 10:23 - Linking our repo to Vercel 11:00 - Fixing the Environment Variables 12:07 - Deploying to Vercel 13:32 - Setting up uploadthing for images 15:40 - Displaying our mock data 17:35 - Next.js Layouts Explained 19:45 - Scaffolding our UI 21:47 - Tidying up builds & enabling turbo 24:18 - Setting up our Database 35:14 - Dynamic Routes 37:40 - Changing our database schema 43:00 - Adding authentication 54:04 - Setting up image uploading 01:04:10 - Connecting users to images 1:09:07 - What's next (Take break here) 1:09:41 - server-only & React Taint 1:17:18 - The next/image Component 1:22:58 - Error management w/ Sentry 1:32:07 - Image page w/ Parallel Routes 2:04:15 - Fixing the upload button 2:11:05 - Setting up toaster w/ shadcn/ui 2:26:40 - Adding analytics w/ PostHog 2:38:21 - Delete button w/ Server Actions 2:49:52 - Adding rate limits w/ Upstash 2:55:05 - Redeploying to Vercel 2:56:44 - Locking down uploads 3:00:59 - Challenges for the Viewer 3:02:35 - Outro

@t3dotgg Ай бұрын

THANK YOU

@akinoreh Ай бұрын

@@t3dotgg It'd be nice if this was also a playlist with shorter videos. It's easier to consume that way. Personally, I won't be watching this in one go. While having chapters help, it's still one video. Haven't started yet, but I'm curious how beginner friendly this is. While I'm good at JS, I haven't tried any front-end library/framework (although, I keep tabs on them). So I think it requires some kind of leap from plain JS to front-end libraries. I currently have that mental gap. Hope this helps a little.

@RogueTravel Ай бұрын

@@akinorehI’d be so sad if this was broken up into a playlist.

@akinoreh Ай бұрын

@@RogueTravel Notice the "also". Besides, what's the advantage of a single video (contrary to a playlist)?

@JSLegendDev Ай бұрын

@@akinoreh As someone who makes programming tutorials (JavaScript gamedev tutorials), there are big negatives with publishing in multiple parts. Here are the main two : - Next parts will always make progressively less views than the first part giving the impression that your channel is dying. - It clutters your channel and makes it hard to find content.

@R0cky0 Ай бұрын

Yo, I want to appreciate for the amount of work and effort you put into this also by not putting up a paywall and choosing not to take the easy path. Making this available (for free) to the community is truly commendable. Your work is worth so much more than those who charge for courses however are much less informative than this. A million thanks!

@carvierdotdev Ай бұрын

Yes and yes. I completely agree with you. I feel that we are very lucky to have such incredible people in the JS community with such background..

@woet7891 Ай бұрын

Love it! Was needing this a lot 🙏🙏 Most tutorials out there tend to leave important stuff out that's needed for any decent production application like the error monitoring, event tracking and rate limiting so it was super useful to see how you're tackling this

@lasso01 Ай бұрын

Amazing content. I don't usually watch that many tutorials anymore, but this feels exactly what i needed to hone my skills with all the new stuff. Thanks Theo!

@johnbauer9907 Ай бұрын

Thank you. I dont use any of this stack except for typescript and it is nice to see the start to finish...

@madhudson1 Ай бұрын

haven't watched it yet, but the fact that you've put this out for free is incredible

@CharlieBelvo18 29 күн бұрын

Incredible tutorial, maybe the best overview I"ve ever seen to build and deploy a webapp. Thanks Theo for showing the rest of us the way

@Fanaro Ай бұрын

Crazy that a master software engineer such as Theo has infra this accessible and simple.

@oxnull738 Ай бұрын

Finally, a video where you're not just reading from an article.

@mchisolm0 18 күн бұрын

Thanks again for the tutorial. Finally made it through and I feel I have learned a lot. Appreciate your time and the sponsors' willingness to partner with you to make it happen.

@julietaparpinelli7162 Ай бұрын

This video is just amazing! Thank you so much!! I appreciate that we can all see you coding and facing real-life errors and being honest about them. 👏

@joshuaborseth Ай бұрын

The hair covering your face is giving me OG roundest Pokémon theo vibes

@t3dotgg Ай бұрын

This was semi intentional

@l-Il.-._.-.lI-l Ай бұрын

Keeping it real for the nerds

@vitorwindberg4212 Ай бұрын

damn the roundest pokemon nostalgia hit me with this comment

@metatronicx Ай бұрын

Thank you Theo for this video. Thanks for showing us how we should manage and succeed in every project. Y'all dev brothers, never forget to-do lists. They are crucial

@Oseille Ай бұрын

just finished this awesome tutorial, the modal is not closing when deleting the image from the photo modal, but it works from the photo page. very valuable content to kickstart nextjs learning.

@zainraz4 Ай бұрын

YESSS BEEN WAITING FOR THIS!! Can’t wait to watch and follow along!

@jessequartey Ай бұрын

Watching this, i realize how much influence Theo has. I use most of these technologies in my production apps. And the startups i build for might keep using them for a long time too. I hope they are paying you a lot of money for the market you bring.

@nikensss Ай бұрын

6:23 right! so let's build a todo-list app first! haha Great video, I was actually considering asking somewhere if there were plans for a tutorial after the recent changes in so many technologies and platforms. Thanks a ton for videos like this. Introductory tutorials are nice, but at some point people start needing next level content, and this is about it!

@ErikTheHalibut Ай бұрын

Theo, please keep making tutorials like this! This is extremely helpful as a learning dev.

@NaranuCS 9 күн бұрын

Great tutorial btw, I'm starting to branch out towards next.js and react coming from Java and PHP (not together but from my last two jobs) so is extremely exciting to see how powerful all these tools are!

@user-dm8sw5qn4p Ай бұрын

Theo, just four words: you made amazing tutorial!!! Thank you

@caiolaytynher5994 Ай бұрын

Literally started learning this stuff yesterday, seems made for me

@zilvinas5130 Ай бұрын

Just finished tutorial. Gotta say, gallery app was, in my opinion, an amazing choice for a project to showcase RSCs. For me, handling file uploads, storage, all the authentication that comes with it, was always a stressful experience and seamless integration this project provides is an amazing resource. 10/10. Keep up the amazing work, Theo!

@divyanshrawat2859 27 күн бұрын

bro my drizzle sudio is not opening at 4983 instead its showing 404 error , can you help ?

@jacobvanschenck 29 күн бұрын

What a legend. Thank you sir for all the work you put into this. Something to learn here for any dev of any skill level!

@alexandermackintosh1755 Ай бұрын

Thank you so much this is incredibly useful content!! Just as i decided like a week ago to take the plunge to learn a bit about next hahah ❤

@desertislanddivs Ай бұрын

This was so awesome, thanks so much for pouring all the time, blood and syntax into it for us ^^

@23rbnHD Ай бұрын

0 to Production with Full Test Coverage. That would be such an interesting follow up. Breaking down how each of the best practices and starting points your tutorial covers would fit into a CI testing stack (end to end and unit). That said, so far, so really really helpful. Thanks a bunch.

@AlexanderJuncosa342 Ай бұрын

Damn I was actually watching the old tutorial, this came just at the right time :D Great content!

@chadcummings4600 28 күн бұрын

Congrats on the React Status Cooperpress newsletter headline mention. Love your channel and the work you do

@xyz66z Ай бұрын

I love this guy! Teaches so natural. I'm yet to become the dev this video is meant for but I'd be soon! I'd be coming back that time ❤.

@christianbauer3417 Ай бұрын

Wow, you are providing a ton of useful advice! This is awesome. Thanks a lot Mr T3 :-)

@drunkenpigtnt1359 2 күн бұрын

Built a blog app with the help of this tutorial. Great vid, Theo.

@dehrk9024 Ай бұрын

idk what it is but theos videos make me so ready & awake & never give up never back down

@recksonkhiangte1488 Ай бұрын

Oh wow! This is crazy, thank you for putting this out.

@prickitt Ай бұрын

This is great, thanks for making it!

@joeljededemekong5628 Ай бұрын

This is a blessing fr I’m so thankful that this exists

@MrMazvaz 22 күн бұрын

Quick tip using as a modal. To style the backdrop, just use the ::backdrop pseudo-class. In tailwind it would be className="backdrop:bg-zinc-900/50". This way you dont have to worry about the margins and having it cover the entire screen etc. The backdrop is already there for you

@jhkmatthews Ай бұрын

thanks Theo, great vid! at 1:40:45 - another approach that I like for breaking down changes into smaller commits is using VSCode Source Control tab to stage changes file by file (or line by line) for each commit

@vitorwindberg4212 Ай бұрын

yeah you can use terminal for that but I also use vscode interface for that, super useful and a lot easier to visualize

@Osirisdigitalagency Ай бұрын

2mins 57 secs in and I already know this is going to be crazy. One time for Theo. U re the man. ❤

@warricksullivan Ай бұрын

Thanks Theo. Loved this video. Nice work and very much appreciated. You hinted at your thoughts on trpc uses. Do you have any more detailed content on your use cases for trpc with nextjs app router? Keep up the great work. :)

@bbpfreddy 21 күн бұрын

Amazing guide. always learn a thing or 2 by walking through this

@josef-stampede-ai Ай бұрын

Fantastic, cant wait to get stuck in !!!

@kevinattinger9293 Ай бұрын

Awesome Tutorial! Thank you so much. Going to build a full blown recipe - App with that

@subhranshudas8862 Ай бұрын

Thanks Theo. You are a gift.

@cariyaputta Ай бұрын

Quality tutorial. Added this to my knowledge base.

@MilindMishra Ай бұрын

Thank you for the honest video, really helpful!

@keithjohnson6510 Ай бұрын

Just started using Drizzle, gets a thumbs up from me. Of course the typing's are a real +, but what I really like is that you can use composition to build your query's. eg. lets assume you have a complex sub query you want to say do an `inArray` with, you can then create a function and re-use in other query's, you could say it's a bit like Views but been able to use props, and of course still have strong typing's. Nice!!!!

@SebastianGrantElKiva 19 күн бұрын

Far away our best tutorial since

@ustav_o Ай бұрын

thats amazing. im doing it tomorrow and will come back here when i finish

@loryhoof Ай бұрын

Have you started yet

@ustav_o Ай бұрын

@@loryhoofjust finishes now, really great tutorial. one of the best we have here at youtube. really cool stuff, very well explained and would totally recommend

@loryhoof Ай бұрын

@@ustav_o I found it to be pretty ass but okay

@JEM_GG 17 күн бұрын

It was all worth it for the biscuits at the very end

@Fanaro Ай бұрын

This tutorial is just so good.

@dian_youtubes Ай бұрын

This was amazing! Thank you Theo!

@saidyeter Ай бұрын

phenomenal tutorial. thanks theo

@chisomoguibe8467 Ай бұрын

Awesome video! I definitely learnt a few things from the walkthrough. One thing that irks me though is when adding new env vars to your local repo and then having to remember to add them into vercel. I use Doppler to have them sync in both places. the dev experience is really nice. wondering what your thoughts are on tools like Doppler?

@JoctanNeves 18 күн бұрын

Thanks Theo, this video are amazing!

@JohnSmith-gu9gl 25 күн бұрын

you really have to give Remix a try! less overhead and feels like a simple express middleware.

@erickhar 16 күн бұрын

Hey theo. This is such a great video thank you :)

@jhimymichel3045 Ай бұрын

thanks for the tutorial Theo 🥰

@timeforrice Ай бұрын

This is such an amazing tutorial!

@Pixelume Ай бұрын

Theo you are a ROCKSTAR! I can barely contain my excitement to work through this tutorial. Thank you!

@petarozretic6140 Ай бұрын

Was waiting for this, tyvm :D

@Goglarnik Ай бұрын

I rarely comment on any videos at all, but felt the need to say: "Thank you". Thank you :)

@codewithantonio Ай бұрын

Lets goooooooooo

@t3dotgg Ай бұрын

I think you released 20 tutorials since I started planning this one 🙃

@Blade_Dhruv Ай бұрын

Thanks to both of you, I was able to learn coding because of you guys, thanks my real teachers🙇🏻‍♂️

@supriyomonndal6199 Ай бұрын

Absolutely love this man.

@user-cf3ls6es2b Ай бұрын

I love when Theo teach, i just follow and finish it

@declspecl Ай бұрын

thank for for this theo 🙏everybody pump up the algorithm RAHHH

@t1m3__ 28 күн бұрын

Thanks Theo, it's a great tutorial!

@user-gq6wp2ll2s Ай бұрын

Fantastic tutorial! For someone who has never used TS/TW/analytics/ratelimiting....I managed to follow along just fine, and even understand, (i think) what was going on! Either way it works so thank you @t3dogg for such a great walkthrough

@lgf-sq9yf 27 күн бұрын

Amazing tutorial Theo! Thought could've complete this 3 hour tutorial in a day but it actually took me 3, and I'd learnt so much from it! However I have few questions: 1. Why did you not use tRPC for this? Is it because it currently doesn't support multipart form for uploading images? 2. Why did you decided to change to use pnpm from npm, I tried using pnpm too and I'm so not used to the syntax. Is the benefit of using pnpm in the long run be greater than just sticking to npm?

@pavelstastny7892 Ай бұрын

Thanks for this. This is the MVP move.

@MikeNugget Ай бұрын

Great, this is what I was waiting for! When is the next one for React Native? 😊

@AbdulRafay-vi6hz Ай бұрын

As a former web developer who now develops Android and iOS applications, I've noticed that web development has become more complex than ever.

@harshthakur1444 Ай бұрын

which shows how much flexible and a bitch JavaScript is 😂😂😂😂😂😂 , I think why some people decide to js instead of ts

@AbdulRafay-vi6hz Ай бұрын

@@harshthakur1444 🤣🤣

@NoelmineZockt Ай бұрын

My Go2Stack currently: React (RSCs), Next (App Router), Tailwind, react query, Shadcn, Drizzle, Lucia, (TS, pnpm). Hosting: Vercel, Turso, Railway Last year: React, Next (Page Dir), Tailwind, tRPC (with react query), Prisma, NextAuth, (TS, npm). Hosting: Vercel, Planetscale

@bro-watch Ай бұрын

amazing content drizzle seems truly awesome

@user-vh3xr2cj8b Ай бұрын

Thank you very much for the tutorial, Can you please make a tutorial about how to elegantly organize and maintain folder structures and files according to industry standard?

@dehrk9024 Ай бұрын

omg i learned so much in this thanks theo

@Alivezombie16 Ай бұрын

I'd also love to see a video where you highlight the modularity - like migrating from Prisma to drizzle in a prod app

@VincentFulco Ай бұрын

Thanks Theo, much appreciated

@craigcaski Ай бұрын

I was just wishing for this exact video

@rohitkochikkatfrancis Ай бұрын

THE TUTORIAL WE ALL NEEDED !!!!

@omelettttttteeeeeee 3 күн бұрын

this is sick. thanks!

@PRICEGWX Ай бұрын

Great video!! You mentioned at the start that you'd go over where TPRC is still valuable in full stack apps, did I miss this? I'm wondering at what point I'd need to start using it rather than server actions...

@vatsalyavigyaverma5494 Ай бұрын

Omg shots fired, primeagen will throw some algo in few moments

@sonalita_ Ай бұрын

I had a warning after adding the @apply rule at 17:02 - VSCode said "Unknown at rule @apply". The fix is to install the PostCSS Language support extension. I kinda wish Leo would have gone over the VSCode extensions he uses.

@thunderstein5041 Ай бұрын

the Primeagen joke is why I'm a Subscriber.

@KjetilYtrehus 19 күн бұрын

More of this! More tutorials. More projects. More ShadcnUI component modifications. More interacting with databases and fetching different content. More State management tutorials (Zustand?). More Github Actions....

@jacobbdev Ай бұрын

Great tutorial. What's the advantage of using UploadThing over Vercel's Blob storage for the image upload?

@Sammysapphira Ай бұрын

great video. There's such a lack of intermediate videos like this.

@orvvro Ай бұрын

There are plenty, they're just not free, and hosted on sites like Coursera and Udemy

@kvdy Ай бұрын

Thanks a ton man, this is exactly what I have been looking for. I come from strong backend development background and UI sometimes becomes trivial to setup and get it running the first day. But this has helped me to setup and get going in just 15 mins. Awesome..... Bring on more. I would like to explore this with AWS SDK as I need to grab my files from S3 and not uploadthing. Do you have any suggestions? or shall I use my backend api (springboot) to manage the files

@corybaker24 14 күн бұрын

did you ever make any progress on getting files from S3 in this?

@dainius84 23 күн бұрын

great tutorial, thank you, what's the extension used for autocomplete during this tutorial?

@JacoBoogie Ай бұрын

Well looks like imma be up late on a sunday night learning how ive been building my app the wrong way for the last year! lesss goo

@minkhantko_0 13 күн бұрын

Your cat has convinced me to like this video and subscribe to the channel.

@gavinlindridge Ай бұрын

Superb content! Out of interest which browser are you using in this?

@eggfriedrice-xs5ps Ай бұрын

egg fried rice thanks you my friend! You got green onions on top excited for web again!

@myxchine 6 күн бұрын

Love this! What were the free alternatives to clerk mentioned in the video?

@erickhar 15 күн бұрын

For people struggling with posthog - just turn off adblock if you get cors error

@mchisolm0 19 күн бұрын

I really appreciate this and am enjoying my time going through it. I have been able to overcome a lot of the roadblocks I've hit, but where is good place to go to get help?