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
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
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!!!!
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!
@@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.
@@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.
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!
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.
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!
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
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!
Keeping it short; for anyone running into a build problem near 27:00 and you followed instructions not to rename POSTGRES_URL (and you might be paused wondering if it's fine to just replace all instances of "DATABASE_URL" to "POSTGRES_URL" in your project). He does go and fix that at around 30:00. Still useful for anyone who might pause vid after running into issue trying to fix it themselves before it's presented 3min later.
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.
Theo doesn't really do TDD iirc - he thinks shipping code fast >>> maintaining both the codebase & tests (his mindset is very "move fast and disrupt this is sillicon valley let's make money" so he values good analytics and deploying a fix quickly more than deploying tested code; if he had a background in banking, medical or other sensitive software he might think differently) A good start is keeping your UI code decoupled from business logic (the new server actions seem useful for this) and have some Jest unit tests for each action. The better you are at separation of concerns the easier it is to test logic. There are libraries to test UI renders how you want or mock interactions and test a user journey end to end, but I find those very easy to break and a lot of overhead. With UI I think easily doing "prototype -> get feedback -> redesign" is very valuable so you have to balance if UI tests are adding value or it's just a development burden
Just finished watching the whole video and doing almost all things. As a noob it felt like this is so advanced code for me but now I got introduced to the analytics and ratelimiting
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.
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!
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
1:00:34 i could get the generic upload buttons only to work when i added "use client" at the top of the utils/uploadthing.ts file. alternatively, importing the Buttons directly from the library worked as well. Generally, i'd recommend doing this tutorial without --turbo, since it produced a lot of errors for me while more and more features were added. Thank you for this amazing tutorial. I learned a lot about how things work together
@31:50 hit a roadblock here. You need to change the line at the top of app/page.tsx from import { db } from "@vercel/postgres"; to import { db } from "../server/db"; (which does the vercel import)
"From 0 to Production - The Modern React Tutorial" - Video Summary This tutorial shows how to build a full-stack image gallery app with authentication, image uploading, and other production-ready features. *Project Setup & Deployment* * *3:30**:* Scaffolds the project using `create-t3-app` with Next.js, TypeScript, TailwindCSS, Shadcn/UI, Drizzle ORM, and Vercel Postgres. * *8:39**:* Initializes a GitHub repository and links it to Vercel for automatic deployments. * *13:32**:* Uses UploadThing for image hosting and retrieves initial mock image URLs. *Basic UI & Database Integration* * *15:40**:* Creates a basic UI with a top navigation bar and displays the mock images. * *17:35**:* Explains Next.js layout system and implements nested layouts for the app. * *24:18**:* Sets up a Postgres database on Vercel and connects it to the app using Drizzle. * *35:14**:* Populates the database with the mock images and displays them dynamically on the homepage. * *35:14**:* Implements dynamic routes to ensure the page content updates when the database changes. *Authentication & Image Uploading* * *43:00**:* Adds authentication using Clerk with GitHub and Google sign-in options. * *54:04**:* Restricts image viewing on the homepage to authenticated users. * *54:04**:* Integrates UploadThing for image uploading with client-side and server-side components. * *1:04:10**:* Persists uploaded images to the database and associates them with the logged-in user. * *1:09:41**:* Explains and implements the "taint" concept to prevent sensitive data from reaching the client. *Production-Ready Features* * *1:17:18**:* Replaces standard image tags with `next/image` for automatic image optimization. * *1:22:58**:* Integrates Sentry for error monitoring and demonstrates how to capture and view errors. * *1:32:07**:* Implements an image details page with parallel routes for a better user experience. * *2:04:15**:* Styles the upload button using Shadcn/UI components and adds a loading spinner. * *2:26:40**:* Integrates PostHog for analytics and tracks user actions like image uploads and deletions. * *2:38:21**:* Implements a delete button using server actions to remove images from the database. * *2:49:52**:* Adds rate limiting using Upstash to prevent abuse of the upload functionality. * *2:56:44**:* Restricts image uploads to users with specific permissions set in Clerk metadata. *Challenges for Viewers:* * Fix the page layout for images with different resolutions. * Implement image selection on the gallery page with state management (using Zustand). * Add infinite scroll to the gallery page. * Implement folders or albums to organize images. i used gemini 1.5 pro
What was the exact prompt you used? it only gave me below summary. This video is a tutorial on how to build a production-ready React application using the T3 stack. The video is divided into the following sections: Introduction (0:00 - 2:02) Tech Stack Overview (2:02 - 10:22) Sponsors (10:22 - 12:12) Setting up the project (12:12 - 14:47) Installing Dependencies (14:47 - 19:17) Setting up PostHog (19:17 - 25:22) Data Model (25:22 - 27:22) Conclusion and Challenges (27:22 - 3:03:12) I hope this is helpful!
@@continuouslearner i can't find the exact prompt now. but typically i use two prompts in sequence, something like: (1) "i don't want to watch the video. create a bullet list summary: ". (2) "add starting (not stopping) timestamps"
@@continuouslearner yes, I just copy paste the transcript. You can find a link in most TH-cam descriptions. but keep in mind that a three hour transcript hits the boundary of what is possible with Gemini 1.5 pro. In my experiments Gpt4 was even worse and typically gave bad summaries for more than 1 hour videos
@@wolpumba4099 thank you, its so much clear now. For some reason i thought/was expecting gemini 1.5 pro to do both the transcription and then the summarization and was wondering why its output was so poor (not detailed enough) compared to your original comment above. A bit disappointed that 1.5 pro cant pull the transcription straight from youtube and we have to explicitly, manually, provide it ... but at least now i know how to get the detail. Much appreciated.
This was really helpful, thank you so much 🙏 Been sleeping on TypeScript, but now a fully signed up convert. Dropped a paid subscription to uploadthing, truly a thing of beauty. You Sir are a gentleman and a scholar.
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.
1:36:40 (Parallel Routes section) If your page changes when clicking the link instead of printing the ID on the page -Make sure you have the default.tsx file -Restart the dev server (what worked for me)
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.
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
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
if any of you having issues with parallel routing - firstly make sure you have the default in the @modal folder , then the page in the [id] folder. secondly , you will need to restart your dev server.
For those having an issue with it trying to getImage of the image you just deleted: check whether it only applies to parallel routes or also after hard navigating to that image. Ask yourself why that is. Search "next 14.2 parallel routes redirect workaround". The default.tsx just needs a page.tsx also returning a null. This has to do with how Next handles soft navigation. A few behaviors must have changed since this video was made, and the docs show a slightly different setup for the slot.
Effin missed this, I really loved your beginnings with Pokemon app. In fact I claim that you sparked the Poimandres revolution in VSCode setups. I wish you'd do these videos more often!
Not sure if anyone has come across this issue but: Whenever I delete and image and I redirect back to the root path redirect("/"); and then I want to click on another image to open it in the "modal" I can see the url change but nothing happens in the UI (i..e I am trying to open image on @modal/(.)image/[id]/ again, the screen just stays the same (homepage screen). I have to do a full page reload for it to work... not sure what I did wrong but struggling to debug this.
Came to comment cause I had a similar issue, I imagine it was the same cause but you noticed a different behaviour due to different versions. The root problem is that redirect("/") does not cause the modal to dismiss itself properly, even though the path has changed and it should not stay up. I had this problem in 2 versions. In Next 14.2.4 the modal completely stays up even though redirect was called and the path is changed. So it's not dismissed at all. In Next 14.2.3 what you're describing happens: the modal is dismissed, but something breaks and we cannot open other images to see their modals. I downgraded to 14.1.4, I think this is what Theo had in the video. It works. So it's a Next bug. For others having problems with deleting, try another Next version until it works. Easiest fix, unless you need specific Next versions. And a side note. Though I can't remember what the issue was, something from an earlier part of the video forced me to downgrade from 14.2.4 to 14.2.3. A rule of thumb: if the code is the same as in the video but yours doesn't work, your Next version has a bug. Hope this helps
@@cosminvoinopol705 I was having the exact same issue with redirect("/") not dismissing the modal. Whenever I would delete an image, the app would crash because FullPageImageView would try to render the deleted image and throw an "Image not found" error. By downgrading Next to 14.1.4, it works perfectly now. Hopefully Next can fix this bug in the modal. It's such a cool feature.
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!
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.
2:29:46 for anyone running into an issue where Posthog doesn't work check console, your browser is probably blocking it. Turn off your adblock/ublock if you had one. He goes over the solution for making it work with adblockers around 2:34:40
If anyone gets the error during deployment on Vercel : "ERR_PNPM_BAD_PM_VERSION. This project is configured to use v9.1.1 of pnpm. Your current pnpm is v9.0.4" Put the code below in your environment variables and redeploy, it should work again. ENABLE_EXPERIMENTAL_COREPACK=1 COREPACK_ENABLE_STRICT=0
YESSS, if you or anyone fixed this error, PLEASE comment here and let me know EDIT: It deploys just fine and the upload works on vercel after disabling the authentication on vercel but on my local, I still cannot upload
in "api/uploadting/route.ts" you need to set the isDev config flag export const { GET, POST } = createRouteHandler({ router: ourFileRouter, config: { isDev: process.env.NODE_ENV === "development", } });
You’re playing In my background and 1:19:30 you suggested users to pay vercel for image optimization, while you’re teaching; this can be done CILENT side. Then I remembered this is a sponsored video…
@@sovapid no that is well established in every major programming language in contrast to this implicit type conversion going on in your original code...
at 29:00 i have my index.ts set up exactly like yours but the sql parameter is complaining... Argument of type 'VercelPool & ((strings: TemplateStringsArray, ...values: Primitive[]) => Promise)' is not assignable to parameter of type 'Sql'. Type 'VercelPool & ((strings: TemplateStringsArray, ...values: Primitive[]) => Promise)' is missing the following properties from type 'Sql': CLOSE, END, PostgresError, options, and 13 more.ts(2345) ive tried restarting the TS server incase, and its weird because it seems fine, i may ts-ignore it for the moment unless something bad happens but yeah
@@evangroneman5408 yeah im now just getting an issue with production not uploading the image to db, at 1:09:00, getting a 401 reflected on uploadThing that im trying to debug, my middleware file is the same as his which is what it suggests it could be
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!!!!
Edit: I submitted the issue on the uploadthing repo, apparently should be fixed now? For anyone following this tutorial at this time you'll probably run into an issue where your upload won't work at 1:00:00: You'll run into an "effect" version mismatch due to the uploadthing package requiring effect 3.4.2 while also installing latest @effect/schema which will require latest effect (currently 3.4.5). This will cause your file upload to not work, return a code 500 error and notify you in-terminal that you have an effect version mismatch. My fix was downgrading @effect/schema to 0.68.9 which uses effect 3.4.2 && downgrading to effect 3.4.2 - the mismatch error went away and the upload functions correctly. Filed an issue on Github, can't say for sure where the fault lies because there might be something I don't know but I let them know regardless as even their own minimal template runs into this version mismatch problem while looking at its package-lock.json file. Edit: The dependency issue was marked as critical and promptly fixed
@@sirklattjust finishes now, really great tutorial. one of the best we have here at youtube. really cool stuff, very well explained and would totally recommend
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
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
Might have been the migrate in drizzle kit. It was struggling to run the sql client and the errors were impossible to debug. Switched to pnpm and had no issues, have not dug into it much
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....
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?
first... thanks for the vid. 3 hrs of gems. a question. why no trpc? @4:30 we got a hint, but it might've slipped your mind 3 hours later. was really interested in next14 + trpc in the context of a larger project with tools like drizzle, but I understand we can't have our cake and eat it too. thnx again
Thanks for the video Theo, but how about error handling, I can see some errors being thrown, but not how they are handled especially in the server actions. Would love to see how to handle them
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?
Awesome video, I appreciate all the work that went into this. I followed it this past weekend and my project had some minor differences than yours. My clerk client syntax was slightly different and my parallel route awaits the id to avoid browser warnings. It's been a minute since I've written code and I did get stuck a few times, but I got really stuck on the home stretch. When you create a form action to delete an image in order for me to get it to redirect properly from my parallel route I had to add a @modal/page.tsx file that returns null similar to the @modal/default.tsx file. (/vercel/next.js/issues/64433)
are you using vercel neon? saw postgres is no long an opntion on vercel, believe it migrated to neon now. Wonder how much this is going to affect this tutorial
Thank you this is exactly what I was looking for, when I clicked on my images I wasn't getting the id returned under my images. Creating that @modal/page.tsx with exactly the same contents of default.tsx made it work
You can create the backdrop by using backdrop: classnames from tailwind. You don’t even need a separate backdrop div. You can create blur, darkening, even sepia and other cool effects and it’s all styling ON the dialog element. Which is amazing, tbh…
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
Should I use dependency injection with posthog? if in case I want to migrate to something like mixpanel?
💜
when will the t3 stack updated
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
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!!!!
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!
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..
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
THANK YOU
@@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.
@@akinorehI’d be so sad if this was broken up into a playlist.
@@RogueTravel Notice the "also". Besides, what's the advantage of a single video (contrary to a playlist)?
@@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.
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!
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.
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
Watch his lives
Amazing comment !!!!!
I agree
"primeagen still had a job"🤣
Finally, a video where you're not just reading from an article.
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!
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
Crazy that a master software engineer such as Theo has infra this accessible and simple.
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!
bro my drizzle sudio is not opening at 4983 instead its showing 404 error , can you help ?
haven't watched it yet, but the fact that you've put this out for free is incredible
Theo, please keep making tutorials like this! This is extremely helpful as a learning dev.
Keeping it short; for anyone running into a build problem near 27:00 and you followed instructions not to rename POSTGRES_URL (and you might be paused wondering if it's fine to just replace all instances of "DATABASE_URL" to "POSTGRES_URL" in your project). He does go and fix that at around 30:00. Still useful for anyone who might pause vid after running into issue trying to fix it themselves before it's presented 3min later.
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.
Theo doesn't really do TDD iirc - he thinks shipping code fast >>> maintaining both the codebase & tests (his mindset is very "move fast and disrupt this is sillicon valley let's make money" so he values good analytics and deploying a fix quickly more than deploying tested code; if he had a background in banking, medical or other sensitive software he might think differently)
A good start is keeping your UI code decoupled from business logic (the new server actions seem useful for this) and have some Jest unit tests for each action. The better you are at separation of concerns the easier it is to test logic. There are libraries to test UI renders how you want or mock interactions and test a user journey end to end, but I find those very easy to break and a lot of overhead. With UI I think easily doing "prototype -> get feedback -> redesign" is very valuable so you have to balance if UI tests are adding value or it's just a development burden
The hair covering your face is giving me OG roundest Pokémon theo vibes
This was semi intentional
Keeping it real for the nerds
damn the roundest pokemon nostalgia hit me with this comment
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
Lets goooooooooo
I think you released 20 tutorials since I started planning this one 🙃
Thanks to both of you, I was able to learn coding because of you guys, thanks my real teachers🙇🏻♂️
Just finished watching the whole video and doing almost all things. As a noob it felt like this is so advanced code for me but now I got introduced to the analytics and ratelimiting
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.
Amazing tutorial! As a next.js noob this is honestly gold, and I learned a ton. Thank you!
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!
Thank you. I dont use any of this stack except for typescript and it is nice to see the start to finish...
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
I forget your name and searched mustache man reactjs funny part is it showed your video in third 😂😂
1:00:34 i could get the generic upload buttons only to work when i added "use client" at the top of the utils/uploadthing.ts file.
alternatively, importing the Buttons directly from the library worked as well.
Generally, i'd recommend doing this tutorial without --turbo, since it produced a lot of errors for me while more and more features were added.
Thank you for this amazing tutorial. I learned a lot about how things work together
Thanks, you solved my problem.
This fixed one error but the button just became stuck on loading indefinitely for me, I followed the tutorial to a T. I guess thats it.
solved my problem as well thank you!
Jesus christ. Thank you so much I was being unable to understand the reason for this error. People like you rock. Don't ever stop being you.
@@mangoherpson Did you every find a fix for this?
@31:50 hit a roadblock here. You need to change the line at the top of app/page.tsx from import { db } from "@vercel/postgres";
to import { db } from "../server/db";
(which does the vercel import)
Thanks.
Thanks!
"From 0 to Production - The Modern React Tutorial" - Video Summary
This tutorial shows how to build a full-stack image gallery app with authentication, image uploading, and other production-ready features.
*Project Setup & Deployment*
* *3:30**:* Scaffolds the project using `create-t3-app` with Next.js, TypeScript, TailwindCSS, Shadcn/UI, Drizzle ORM, and Vercel Postgres.
* *8:39**:* Initializes a GitHub repository and links it to Vercel for automatic deployments.
* *13:32**:* Uses UploadThing for image hosting and retrieves initial mock image URLs.
*Basic UI & Database Integration*
* *15:40**:* Creates a basic UI with a top navigation bar and displays the mock images.
* *17:35**:* Explains Next.js layout system and implements nested layouts for the app.
* *24:18**:* Sets up a Postgres database on Vercel and connects it to the app using Drizzle.
* *35:14**:* Populates the database with the mock images and displays them dynamically on the homepage.
* *35:14**:* Implements dynamic routes to ensure the page content updates when the database changes.
*Authentication & Image Uploading*
* *43:00**:* Adds authentication using Clerk with GitHub and Google sign-in options.
* *54:04**:* Restricts image viewing on the homepage to authenticated users.
* *54:04**:* Integrates UploadThing for image uploading with client-side and server-side components.
* *1:04:10**:* Persists uploaded images to the database and associates them with the logged-in user.
* *1:09:41**:* Explains and implements the "taint" concept to prevent sensitive data from reaching the client.
*Production-Ready Features*
* *1:17:18**:* Replaces standard image tags with `next/image` for automatic image optimization.
* *1:22:58**:* Integrates Sentry for error monitoring and demonstrates how to capture and view errors.
* *1:32:07**:* Implements an image details page with parallel routes for a better user experience.
* *2:04:15**:* Styles the upload button using Shadcn/UI components and adds a loading spinner.
* *2:26:40**:* Integrates PostHog for analytics and tracks user actions like image uploads and deletions.
* *2:38:21**:* Implements a delete button using server actions to remove images from the database.
* *2:49:52**:* Adds rate limiting using Upstash to prevent abuse of the upload functionality.
* *2:56:44**:* Restricts image uploads to users with specific permissions set in Clerk metadata.
*Challenges for Viewers:*
* Fix the page layout for images with different resolutions.
* Implement image selection on the gallery page with state management (using Zustand).
* Add infinite scroll to the gallery page.
* Implement folders or albums to organize images.
i used gemini 1.5 pro
What was the exact prompt you used?
it only gave me below summary.
This video is a tutorial on how to build a production-ready React application using the T3 stack.
The video is divided into the following sections:
Introduction (0:00 - 2:02)
Tech Stack Overview (2:02 - 10:22)
Sponsors (10:22 - 12:12)
Setting up the project (12:12 - 14:47)
Installing Dependencies (14:47 - 19:17)
Setting up PostHog (19:17 - 25:22)
Data Model (25:22 - 27:22)
Conclusion and Challenges (27:22 - 3:03:12)
I hope this is helpful!
@@continuouslearner i can't find the exact prompt now. but typically i use two prompts in sequence, something like: (1) "i don't want to watch the video. create a bullet list summary: ". (2) "add starting (not stopping) timestamps"
@@wolpumba4099 thanks, where you say , what does that mean? i.e are you uploading the transcript along with asking the prompt?
@@continuouslearner yes, I just copy paste the transcript. You can find a link in most TH-cam descriptions. but keep in mind that a three hour transcript hits the boundary of what is possible with Gemini 1.5 pro. In my experiments Gpt4 was even worse and typically gave bad summaries for more than 1 hour videos
@@wolpumba4099 thank you, its so much clear now. For some reason i thought/was expecting gemini 1.5 pro to do both the transcription and then the summarization and was wondering why its output was so poor (not detailed enough) compared to your original comment above. A bit disappointed that 1.5 pro cant pull the transcription straight from youtube and we have to explicitly, manually, provide it ... but at least now i know how to get the detail. Much appreciated.
YESSS BEEN WAITING FOR THIS!! Can’t wait to watch and follow along!
This was really helpful, thank you so much 🙏 Been sleeping on TypeScript, but now a fully signed up convert. Dropped a paid subscription to uploadthing, truly a thing of beauty. You Sir are a gentleman and a scholar.
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. 👏
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.
1:36:40 (Parallel Routes section)
If your page changes when clicking the link instead of printing the ID on the page
-Make sure you have the default.tsx file
-Restart the dev server (what worked for me)
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.
one of the biggest ad turorial i have seen so far. i learn nothinh i would expect from this video.
Theo, just four words: you made amazing tutorial!!! Thank you
Great video! Love it! Would love to see a video on how you manage DEV to PROD in Vercel and any lessons learned you have experienced.
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
yeah you can use terminal for that but I also use vscode interface for that, super useful and a lot easier to visualize
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
idk what it is but theos videos make me so ready & awake & never give up never back down
if any of you having issues with parallel routing - firstly make sure you have the default in the @modal folder , then the page in the [id] folder. secondly , you will need to restart your dev server.
restarting did it for me! thanks! spent hours trying to figure this out.
Thank you! It works now
Mucho gusto good sir, didn't think to restart the dev server.
Theo you are a ROCKSTAR! I can barely contain my excitement to work through this tutorial. Thank you!
For those having an issue with it trying to getImage of the image you just deleted: check whether it only applies to parallel routes or also after hard navigating to that image. Ask yourself why that is. Search "next 14.2 parallel routes redirect workaround". The default.tsx just needs a page.tsx also returning a null. This has to do with how Next handles soft navigation. A few behaviors must have changed since this video was made, and the docs show a slightly different setup for the slot.
hero
Appreciate the solution!
Effin missed this, I really loved your beginnings with Pokemon app. In fact I claim that you sparked the Poimandres revolution in VSCode setups. I wish you'd do these videos more often!
Not sure if anyone has come across this issue but: Whenever I delete and image and I redirect back to the root path redirect("/"); and then I want to click on another image to open it in the "modal" I can see the url change but nothing happens in the UI (i..e I am trying to open image on @modal/(.)image/[id]/ again, the screen just stays the same (homepage screen). I have to do a full page reload for it to work... not sure what I did wrong but struggling to debug this.
Came to comment cause I had a similar issue, I imagine it was the same cause but you noticed a different behaviour due to different versions.
The root problem is that redirect("/") does not cause the modal to dismiss itself properly, even though the path has changed and it should not stay up. I had this problem in 2 versions. In Next 14.2.4 the modal completely stays up even though redirect was called and the path is changed. So it's not dismissed at all. In Next 14.2.3 what you're describing happens: the modal is dismissed, but something breaks and we cannot open other images to see their modals.
I downgraded to 14.1.4, I think this is what Theo had in the video. It works. So it's a Next bug. For others having problems with deleting, try another Next version until it works. Easiest fix, unless you need specific Next versions.
And a side note. Though I can't remember what the issue was, something from an earlier part of the video forced me to downgrade from 14.2.4 to 14.2.3. A rule of thumb: if the code is the same as in the video but yours doesn't work, your Next version has a bug. Hope this helps
@@cosminvoinopol705 I ran into this issue too and this helped! Thank you so much
@@cosminvoinopol705 I was having the exact same issue with redirect("/") not dismissing the modal. Whenever I would delete an image, the app would crash because FullPageImageView would try to render the deleted image and throw an "Image not found" error.
By downgrading Next to 14.1.4, it works perfectly now. Hopefully Next can fix this bug in the modal. It's such a cool feature.
@@cosminvoinopol705 Thanks, this worked for me, I got really confused trying to debug this.
@@xmontarox85 This is it. Thanks for the comment :)
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!
Damn bro, i learned a lot with this, now i have a greater overlook of how js works and the ecosystem around this language , ty so much
Literally started learning this stuff yesterday, seems made for me
This was so awesome, thanks so much for pouring all the time, blood and syntax into it for us ^^
Amazing guide. always learn a thing or 2 by walking through this
I learn an incredible amount from these videos - thank you for everything you do!
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!
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.
2:29:46 for anyone running into an issue where Posthog doesn't work check console, your browser is probably blocking it. Turn off your adblock/ublock if you had one.
He goes over the solution for making it work with adblockers around 2:34:40
goat
Built a blog app with the help of this tutorial. Great vid, Theo.
00:25:00 Postgres supports multiple 'schema'. Similar to a prefix but more like a folder. Is this supported by t3 + drizzle?
I bet it's supported by drizzle. But maybe there's a limitation on the free vercel postgres.
If anyone gets the error during deployment on Vercel : "ERR_PNPM_BAD_PM_VERSION. This project is configured to use v9.1.1 of pnpm. Your current pnpm is v9.0.4"
Put the code below in your environment variables and redeploy, it should work again.
ENABLE_EXPERIMENTAL_COREPACK=1
COREPACK_ENABLE_STRICT=0
Thank you!
I was getting this error and adding these environment variables to vercel fixed it.
2mins 57 secs in and I already know this is going to be crazy. One time for Theo. U re the man. ❤
1:00:57 onUploadComplete callback is not triggering, on uploadthing files section it's showing "Callback Failed" status
YESSS, if you or anyone fixed this error, PLEASE comment here and let me know
EDIT: It deploys just fine and the upload works on vercel after disabling the authentication on vercel but on my local, I still cannot upload
in "api/uploadting/route.ts" you need to set the isDev config flag
export const { GET, POST } = createRouteHandler({
router: ourFileRouter,
config: {
isDev: process.env.NODE_ENV === "development",
}
});
@@utsavpatel7954 left a reply
@@megamind-h8rThank you so much
@@megamind-h8r this is not working for me
even in prod
You’re playing In my background and 1:19:30 you suggested users to pay vercel for image optimization, while you’re teaching; this can be done CILENT side. Then I remembered this is a sponsored video…
For people struggling with posthog - just turn off adblock if you get cors error
Thank you! I was using Opera and was wondering what went wrong.
Congrats on the React Status Cooperpress newsletter headline mention. Love your channel and the work you do
At the 1 hour 40 minute mark, you can do this:
const image = await getImage(+photoId);
with the plus sign to convert the photoId string into a number.
bad practice. make it easy to understand and readable, this is junior code
@@OnePercentAhead you confused by i++ ?
@@sovapid no that is well established in every major programming language in contrast to this implicit type conversion going on in your original code...
Wow, just started learning t3, very timely update! Thank you so much!
at 29:00 i have my index.ts set up exactly like yours but the sql parameter is complaining...
Argument of type 'VercelPool & ((strings: TemplateStringsArray, ...values: Primitive[]) => Promise)' is not assignable to parameter of type 'Sql'.
Type 'VercelPool & ((strings: TemplateStringsArray, ...values: Primitive[]) => Promise)' is missing the following properties from type 'Sql': CLOSE, END, PostgresError, options, and 13 more.ts(2345)
ive tried restarting the TS server incase, and its weird because it seems fine, i may ts-ignore it for the moment unless something bad happens but yeah
nevermind im an idiot, the top line was not drizzle from vercel-postgres (it was postgres-js), changing it fixed it
@@TEHSOULREAPER you're not an idiot, it's a small difference that also took me a hot minute to spot!
@@evangroneman5408 yeah im now just getting an issue with production not uploading the image to db, at 1:09:00, getting a 401 reflected on uploadThing that im trying to debug, my middleware file is the same as his which is what it suggests it could be
so seems as though i was going to the build link of the site which didnt work, but going to the actual latest site one did, weird
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 ❤
I rarely comment on any videos at all, but felt the need to say: "Thank you". Thank you :)
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!!!!
Edit: I submitted the issue on the uploadthing repo, apparently should be fixed now?
For anyone following this tutorial at this time you'll probably run into an issue where your upload won't work at 1:00:00:
You'll run into an "effect" version mismatch due to the uploadthing package requiring effect 3.4.2 while also installing latest @effect/schema which will require latest effect (currently 3.4.5). This will cause your file upload to not work, return a code 500 error and notify you in-terminal that you have an effect version mismatch.
My fix was downgrading @effect/schema to 0.68.9 which uses effect 3.4.2 && downgrading to effect 3.4.2 - the mismatch error went away and the upload functions correctly. Filed an issue on Github, can't say for sure where the fault lies because there might be something I don't know but I let them know regardless as even their own minimal template runs into this version mismatch problem while looking at its package-lock.json file.
Edit: The dependency issue was marked as critical and promptly fixed
Amazing walkthrough!!
learned a lot, disagreed with some of your strong opinions but they are appreciated.
Thanks
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
The sponsor stack
Far away our best tutorial since
Theo, i'm diego, i'm from colombia, i'm a fullstack dev and you're one of those people who inspired me to do this, thanks for existing my nigga 🔥❤🔥
Oh wow! This is crazy, thank you for putting this out.
thats amazing. im doing it tomorrow and will come back here when i finish
Have you started yet
@@sirklattjust finishes now, really great tutorial. one of the best we have here at youtube.
really cool stuff, very well explained and would totally recommend
@@ustav_o I found it to be pretty ass but okay
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
This is so cool, for someone getting started... Thank you.
Theo during copilot cli: I don't want AI anywhere near my terminal
Also Theo: *uses warp*
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
This is a blessing fr
I’m so thankful that this exists
It was all worth it for the biscuits at the very end
Wow, you are providing a ton of useful advice! This is awesome. Thanks a lot Mr T3 :-)
Thanks Theo. You are a gift.
I love when Theo teach, i just follow and finish it
I'm happy you made this video, thank you
amazing content
drizzle seems truly awesome
Fantastic, cant wait to get stuck in !!!
great tutorial, thank you, what's the extension used for autocomplete during this tutorial?
supermaven?
i use bun and drizzel studio without any issues so im wondering what problems you encountert? I dont use postgres maybe thats where it happens?
Might have been the migrate in drizzle kit. It was struggling to run the sql client and the errors were impossible to debug. Switched to pnpm and had no issues, have not dug into it much
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....
Get out of tutorial hell…
This is great, thanks for making it!
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?
first... thanks for the vid. 3 hrs of gems.
a question. why no trpc? @4:30 we got a hint, but it might've slipped your mind 3 hours later.
was really interested in next14 + trpc in the context of a larger project with tools like drizzle, but I understand we can't have our cake and eat it too.
thnx again
Thanks for the video Theo, but how about error handling, I can see some errors being thrown, but not how they are handled especially in the server actions.
Would love to see how to handle them
Thanks Theo, it's a great tutorial!
As a former web developer who now develops Android and iOS applications, I've noticed that web development has become more complex than ever.
which shows how much flexible and a bitch JavaScript is 😂😂😂😂😂😂 , I think why some people decide to js instead of ts
@@harshthakur1444 🤣🤣
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?
Awesome video, I appreciate all the work that went into this. I followed it this past weekend and my project had some minor differences than yours. My clerk client syntax was slightly different and my parallel route awaits the id to avoid browser warnings. It's been a minute since I've written code and I did get stuck a few times, but I got really stuck on the home stretch.
When you create a form action to delete an image in order for me to get it to redirect properly from my parallel route I had to add a @modal/page.tsx file that returns null similar to the @modal/default.tsx file. (/vercel/next.js/issues/64433)
are you using vercel neon? saw postgres is no long an opntion on vercel, believe it migrated to neon now. Wonder how much this is going to affect this tutorial
Thank you this is exactly what I was looking for, when I clicked on my images I wasn't getting the id returned under my images. Creating that @modal/page.tsx with exactly the same contents of default.tsx made it work
You can create the backdrop by using backdrop: classnames from tailwind. You don’t even need a separate backdrop div. You can create blur, darkening, even sepia and other cool effects and it’s all styling ON the dialog element. Which is amazing, tbh…