Тёмный

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

Theo - t3․gg
Подписаться 294 тыс.
Просмотров 279 тыс.
50% 1

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 🙏

Наука

Опубликовано:

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 507   
@t3dotgg
@t3dotgg 2 месяца назад
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
@shivammishra1980 2 месяца назад
Should I use dependency injection with posthog? if in case I want to migrate to something like mixpanel?
@mazwrld
@mazwrld 2 месяца назад
💜
@kingjune6685
@kingjune6685 2 месяца назад
when will the t3 stack updated
@georgepetroff2364
@georgepetroff2364 2 месяца назад
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
@jordangigg8631
@jordangigg8631 2 месяца назад
Heya!!!! Thank you for the video!!! it was super helpful. You said at the start you would explain why no TRPC. Are you able to? Also, a follow on for this where you show how to for production state management / the zustand setup would be really cool:) Thank you for your content and the effort you put in!! your contributions to the community are never ending and appreciated greatly by me and so many others!!!!
@qwerasdfhjkio
@qwerasdfhjkio 2 месяца назад
"primeagen still had a job"🤣
@lukem121
@lukem121 2 месяца назад
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
@Amruth 2 месяца назад
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
@RobertMcGovernTarasis 2 месяца назад
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
@Joseph-Codes 2 месяца назад
Watch his lives
@good_eats876
@good_eats876 2 месяца назад
Amazing comment !!!!!
@crowlsyong
@crowlsyong 2 месяца назад
I agree
@R0cky0
@R0cky0 2 месяца назад
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
@carvierdotdev 2 месяца назад
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..
@embedyt
@embedyt 2 месяца назад
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
@t3dotgg 2 месяца назад
THANK YOU
@akinoreh
@akinoreh 2 месяца назад
@@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
@RogueTravel 2 месяца назад
@@akinorehI’d be so sad if this was broken up into a playlist.
@akinoreh
@akinoreh 2 месяца назад
@@RogueTravel Notice the "also". Besides, what's the advantage of a single video (contrary to a playlist)?
@JSLegendDev
@JSLegendDev 2 месяца назад
@@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.
@lasso01
@lasso01 2 месяца назад
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!
@woet7891
@woet7891 2 месяца назад
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
@mchisolm0
@mchisolm0 Месяц назад
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.
@CharlieBelvo18
@CharlieBelvo18 Месяц назад
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
@julietaparpinelli7162
@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. 👏
@metatronicx
@metatronicx 2 месяца назад
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
@madhudson1
@madhudson1 2 месяца назад
haven't watched it yet, but the fact that you've put this out for free is incredible
@johnbauer9907
@johnbauer9907 2 месяца назад
Thank you. I dont use any of this stack except for typescript and it is nice to see the start to finish...
@ErikTheHalibut
@ErikTheHalibut 2 месяца назад
Theo, please keep making tutorials like this! This is extremely helpful as a learning dev.
@zainraz4
@zainraz4 2 месяца назад
YESSS BEEN WAITING FOR THIS!! Can’t wait to watch and follow along!
@user-dm8sw5qn4p
@user-dm8sw5qn4p 2 месяца назад
Theo, just four words: you made amazing tutorial!!! Thank you
@Fanaro
@Fanaro 2 месяца назад
Crazy that a master software engineer such as Theo has infra this accessible and simple.
@beesilva9373
@beesilva9373 14 дней назад
Amazing tutorial! As a next.js noob this is honestly gold, and I learned a ton. Thank you!
@oxnull738
@oxnull738 2 месяца назад
Finally, a video where you're not just reading from an article.
@zilvinas5130
@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
@divyanshrawat2859 Месяц назад
bro my drizzle sudio is not opening at 4983 instead its showing 404 error , can you help ?
@jacobvanschenck
@jacobvanschenck Месяц назад
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!
@desertislanddivs
@desertislanddivs 2 месяца назад
This was so awesome, thanks so much for pouring all the time, blood and syntax into it for us ^^
@codewithantonio
@codewithantonio 2 месяца назад
Lets goooooooooo
@t3dotgg
@t3dotgg 2 месяца назад
I think you released 20 tutorials since I started planning this one 🙃
@Blade_Dhruv
@Blade_Dhruv 2 месяца назад
Thanks to both of you, I was able to learn coding because of you guys, thanks my real teachers🙇🏻‍♂️
@recksonkhiangte1488
@recksonkhiangte1488 2 месяца назад
Oh wow! This is crazy, thank you for putting this out.
@caiolaytynher5994
@caiolaytynher5994 2 месяца назад
Literally started learning this stuff yesterday, seems made for me
@jessequartey
@jessequartey 2 месяца назад
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.
@joshuaborseth
@joshuaborseth 2 месяца назад
The hair covering your face is giving me OG roundest Pokémon theo vibes
@t3dotgg
@t3dotgg 2 месяца назад
This was semi intentional
@l-Il.-._.-.lI-l
@l-Il.-._.-.lI-l 2 месяца назад
Keeping it real for the nerds
@vitorwindberg4212
@vitorwindberg4212 2 месяца назад
damn the roundest pokemon nostalgia hit me with this comment
@marvinxu2950
@marvinxu2950 23 дня назад
Wow, just started learning t3, very timely update! Thank you so much!
@nikensss
@nikensss 2 месяца назад
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!
@joeljededemekong5628
@joeljededemekong5628 2 месяца назад
This is a blessing fr I’m so thankful that this exists
@alexandermackintosh1755
@alexandermackintosh1755 2 месяца назад
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 ❤
@AlexanderJuncosa342
@AlexanderJuncosa342 2 месяца назад
Damn I was actually watching the old tutorial, this came just at the right time :D Great content!
@christianbauer3417
@christianbauer3417 2 месяца назад
Wow, you are providing a ton of useful advice! This is awesome. Thanks a lot Mr T3 :-)
@xyz66z
@xyz66z 2 месяца назад
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 ❤.
@Oseille
@Oseille 2 месяца назад
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.
@bbpfreddy
@bbpfreddy Месяц назад
Amazing guide. always learn a thing or 2 by walking through this
@chadcummings4600
@chadcummings4600 Месяц назад
Congrats on the React Status Cooperpress newsletter headline mention. Love your channel and the work you do
@prickitt
@prickitt 2 месяца назад
This is great, thanks for making it!
@subhranshudas8862
@subhranshudas8862 2 месяца назад
Thanks Theo. You are a gift.
@SebastianGrantElKiva
@SebastianGrantElKiva Месяц назад
Far away our best tutorial since
@Osirisdigitalagency
@Osirisdigitalagency 2 месяца назад
2mins 57 secs in and I already know this is going to be crazy. One time for Theo. U re the man. ❤
@dehrk9024
@dehrk9024 2 месяца назад
idk what it is but theos videos make me so ready & awake & never give up never back down
@NaranuCS
@NaranuCS Месяц назад
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!
@dian_youtubes
@dian_youtubes 2 месяца назад
This was amazing! Thank you Theo!
@drunkenpigtnt1359
@drunkenpigtnt1359 Месяц назад
Built a blog app with the help of this tutorial. Great vid, Theo.
@kevinattinger9293
@kevinattinger9293 2 месяца назад
Awesome Tutorial! Thank you so much. Going to build a full blown recipe - App with that
@Dan-Levi
@Dan-Levi 20 дней назад
Looking great! Can't wait to see the next upload
@cariyaputta
@cariyaputta 2 месяца назад
Quality tutorial. Added this to my knowledge base.
@23rbnHD
@23rbnHD 2 месяца назад
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.
@petarozretic6140
@petarozretic6140 2 месяца назад
Was waiting for this, tyvm :D
@josef-stampede-ai
@josef-stampede-ai 2 месяца назад
Fantastic, cant wait to get stuck in !!!
@saidyeter
@saidyeter 2 месяца назад
phenomenal tutorial. thanks theo
@rohitkochikkatfrancis
@rohitkochikkatfrancis 2 месяца назад
THE TUTORIAL WE ALL NEEDED !!!!
@jhimymichel3045
@jhimymichel3045 2 месяца назад
thanks for the tutorial Theo 🥰
@JEM_GG
@JEM_GG Месяц назад
It was all worth it for the biscuits at the very end
@timeforrice
@timeforrice Месяц назад
This is such an amazing tutorial!
@jhkmatthews
@jhkmatthews 2 месяца назад
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
@vitorwindberg4212 2 месяца назад
yeah you can use terminal for that but I also use vscode interface for that, super useful and a lot easier to visualize
@ustav_o
@ustav_o 2 месяца назад
thats amazing. im doing it tomorrow and will come back here when i finish
@loryhoof
@loryhoof 2 месяца назад
Have you started yet
@ustav_o
@ustav_o 2 месяца назад
​@@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
@loryhoof 2 месяца назад
@@ustav_o I found it to be pretty ass but okay
@supriyomonndal6199
@supriyomonndal6199 2 месяца назад
Absolutely love this man.
@MrMazvaz
@MrMazvaz Месяц назад
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
@MilindMishra
@MilindMishra 2 месяца назад
Thank you for the honest video, really helpful!
@Pixelume
@Pixelume 2 месяца назад
Theo you are a ROCKSTAR! I can barely contain my excitement to work through this tutorial. Thank you!
@pavelstastny7892
@pavelstastny7892 2 месяца назад
Thanks for this. This is the MVP move.
@JoctanNeves
@JoctanNeves Месяц назад
Thanks Theo, this video are amazing!
@user-cf3ls6es2b
@user-cf3ls6es2b 2 месяца назад
I love when Theo teach, i just follow and finish it
@Fanaro
@Fanaro 2 месяца назад
This tutorial is just so good.
@t1m3__
@t1m3__ Месяц назад
Thanks Theo, it's a great tutorial!
@bro-watch
@bro-watch 2 месяца назад
amazing content drizzle seems truly awesome
Месяц назад
The sponsor stack
@Goglarnik
@Goglarnik 2 месяца назад
I rarely comment on any videos at all, but felt the need to say: "Thank you". Thank you :)
@erickhar
@erickhar Месяц назад
Hey theo. This is such a great video thank you :)
@VincentFulco
@VincentFulco 2 месяца назад
Thanks Theo, much appreciated
@omelettttttteeeeeee
@omelettttttteeeeeee Месяц назад
this is sick. thanks!
@declspecl
@declspecl 2 месяца назад
thank for for this theo 🙏everybody pump up the algorithm RAHHH
@craigcaski
@craigcaski 2 месяца назад
I was just wishing for this exact video
@keithjohnson6510
@keithjohnson6510 2 месяца назад
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!!!!
@dehrk9024
@dehrk9024 2 месяца назад
omg i learned so much in this thanks theo
@Mark-jk1jv
@Mark-jk1jv 20 дней назад
Great work. thanks theo.
@Nagez6429
@Nagez6429 6 дней назад
Thanks for this tutorial teo
@thunderstein5041
@thunderstein5041 2 месяца назад
the Primeagen joke is why I'm a Subscriber.
@vatsalyavigyaverma5494
@vatsalyavigyaverma5494 2 месяца назад
Omg shots fired, primeagen will throw some algo in few moments
@Herxh428
@Herxh428 2 месяца назад
I forget your name and searched mustache man reactjs funny part is it showed your video in third 😂😂
@JohnSmith-gu9gl
@JohnSmith-gu9gl Месяц назад
you really have to give Remix a try! less overhead and feels like a simple express middleware.
@rikschaaf
@rikschaaf 12 дней назад
1:33:11 Funnily enough, I just implemented something similar with HTMX, using the HX-Request header to determine if it should return a full page or just the page element that got updated 1:40:45 Lol, glad I did not forget. I was already confused that you didn't show the commit part, but at first I thought you just cut it from the video :D
@mbaytas
@mbaytas 26 дней назад
goat tutorial, thank you
@user-gq6wp2ll2s
@user-gq6wp2ll2s 2 месяца назад
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
@warricksullivan
@warricksullivan 2 месяца назад
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. :)
@erickhar
@erickhar Месяц назад
For people struggling with posthog - just turn off adblock if you get cors error
@chipChipper375
@chipChipper375 2 месяца назад
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?
@tomcythomas3960
@tomcythomas3960 2 месяца назад
lesssgoooo was waiting for this
@parkerrex
@parkerrex 2 месяца назад
SUCH A GOOD VIDEO.
@AbdulRafay-vi6hz
@AbdulRafay-vi6hz 2 месяца назад
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
@harshthakur1444 2 месяца назад
which shows how much flexible and a bitch JavaScript is 😂😂😂😂😂😂 , I think why some people decide to js instead of ts
@AbdulRafay-vi6hz
@AbdulRafay-vi6hz 2 месяца назад
@@harshthakur1444 🤣🤣
@Sammysapphira
@Sammysapphira 2 месяца назад
great video. There's such a lack of intermediate videos like this.
@orvvro
@orvvro 2 месяца назад
There are plenty, they're just not free, and hosted on sites like Coursera and Udemy
@jamesgphillips91
@jamesgphillips91 26 дней назад
Hey, I just wanted to thank you for this video. I've been working with react for almost 5 years, next for 3. I know a lot of what you've covered in this video already but it was really nice having such a thorough and comprehensive refresher. I was laid off about a year ago and I became really skeptical of the value of my React skillset after not being able to find a job for sometime and have been somewhat a drift in my personal projects and coding. I just want you to know you reignited a bit of my spark and love for React/Next and that I genuinely appreciate you content. Side note... from boston... can kickflip... but does he hardcore?
@ritiksahni542
@ritiksahni542 2 месяца назад
So valuable.
@Alivezombie16
@Alivezombie16 2 месяца назад
I'd also love to see a video where you highlight the modularity - like migrating from Prisma to drizzle in a prod app
@eggfriedrice-xs5ps
@eggfriedrice-xs5ps 2 месяца назад
egg fried rice thanks you my friend! You got green onions on top excited for web again!
@hunter2473
@hunter2473 2 месяца назад
here we go kids!!!
@kbreezy004
@kbreezy004 14 дней назад
Fantastic knowledge share, I do wish there were written instructions on a hello world setup for all of this. It's a lot of 3rd party integrations that can get convoluted to setup in a new project. It would be great to get a README going over all of the scaffolding + the setup for each other integration further in the video.
@NoelmineZockt
@NoelmineZockt 2 месяца назад
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
Далее
Cool Tools I’ve Been Using Lately
23:11
Просмотров 174 тыс.
I Parsed 1 Billion Rows Of Text (It Sucked)
39:23
Просмотров 40 тыс.
Yangi uylanganlar😂😂😂
01:01
Просмотров 754 тыс.
HTMX Sucks
25:16
Просмотров 98 тыс.
The Neuralink "Lossless" Compression Wars
37:04
Просмотров 56 тыс.
JavaScript Framework Tier List
40:57
Просмотров 296 тыс.
I DONT USE NEXT JS
54:01
Просмотров 321 тыс.
S3 Is A Security Nightmare (Common Exploit Showcase)
16:47
So, Cloudflare Responded...
12:52
Просмотров 138 тыс.
Face ID iPhone 14 Pro
0:59
Просмотров 24 тыс.
APPLE совершила РЕВОЛЮЦИЮ!
0:39
Просмотров 2,1 млн
Face ID iPhone 14 Pro
0:59
Просмотров 24 тыс.