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

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

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
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

S/O Ph4se0n3 for the awesome edit 🙏

[tdotgg]

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 :)

[lukem]

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!

[Rcky]

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!

[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

[qwerasdfhjkio]

"primeagen still had a job"🤣

[lasso]

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!

[woet]

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

[CharlieBelvo]

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

[madhudson]

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

[mchisolm]

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.

[johnbauer]

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

[oxnull]

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

[beesilva]

Amazing tutorial! As a next.js noob this is honestly gold, and I learned a ton. Thank you!

[julietaparpinelli]

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. 👏

[zilvinas]

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!

[Fanaro]

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

[zainraz]

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

[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

[ErikTheHalibut]

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

[joshuaborseth]

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