Full App Build - Dev to Deployment - Next.js, Prisma, Neon & Clerk

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии •

  • @SouhailEntertainment
    @SouhailEntertainment 4 месяца назад +1

    00:00:00 - Introduction and Sponsorship
    00:00:30 - Project Overview
    00:01:32 - Setting Up Next.js Project
    00:02:07 - Resources and Initial Setup
    00:03:48 - Creating Next.js App
    00:04:25 - Initial Project Cleanup
    00:05:44 - Setting Up Layout and Global CSS
    00:07:41 - Setting Up Neon Database
    00:10:57 - Connecting Next.js App to Neon Database
    00:15:09 - Creating Prisma Models
    00:18:44 - Running Prisma Migrations
    00:22:21 - Creating Prisma Client
    00:24:25 - Setting Up Clerk for Authentication
    00:27:32 - Initializing Clerk Middleware
    00:28:12 - Wrapping App with Clerk Provider
    00:29:32 - Creating Header Component
    00:31:00 - Implementing Sign In/Sign Out Buttons
    00:32:28 - Syncing Clerk Users with Database
    00:35:10 - Creating Check User Utility Function
    00:40:37 - Displaying Welcome Message
    00:41:47 - Creating Add Transaction Component
    00:45:19 - Setting Up Server Action for Adding Transactions
    00:51:41 - Setting Up Form Validation and Error Handling
    00:55:55 - Saving Transactions to Database
    01:01:18 - Displaying User Balance
    01:06:04 - Displaying Income and Expenses
    01:10:11 - Creating Transaction List and Transaction Item Components
    01:14:21 - Setting Up Delete Transaction Functionality
    01:17:24 - Formatting Currency Display
    01:19:52 - Testing Email and Password Signup
    01:21:48 - Deploying to Vercel
    01:24:13 - Conclusion and Final Thoughts

  • @NorseMatt
    @NorseMatt 2 месяца назад +2

    Sir you make it so easy to understand. Thank you so much. I have been a Full Stack Developer for 6 years and I am still learning thanks to you.

  • @themanlyman7737
    @themanlyman7737 5 месяцев назад +5

    You're such a good teacher even I who have 0 experience in react or typescript can follow along very easily

  • @moneyverse654
    @moneyverse654 24 дня назад +1

    At 1:01:05 where you import auth and do a const { userId } = auth();, I get an error that the property userId does not exist on type 'Promise'. If I go on anyway and console log userId of course it comes back undefined (not surprising since it doesn't exist). I've tried user.id, user.Id, UserId, User.id etc all with the same result.

    • @moneyverse654
      @moneyverse654 24 дня назад +1

      Just solved it. If you're getting this error, fix it by adding await like so const { userId } = await auth();

  • @chrispanda9677
    @chrispanda9677 6 месяцев назад +6

    Damn Brad, you're looking good! Working out I see, good for you man. Keep up the good work and thanks for the tutorial!

    • @RealParadox85
      @RealParadox85 5 месяцев назад +2

      Brad Traversy? No, he is gone.
      He is now CHAD Traversy.

    • @nocopyrightgameplaystockvi231
      @nocopyrightgameplaystockvi231 5 месяцев назад

      ​@@RealParadox85He is GigaChad Traversy

    • @ShalomJr-xs7yg
      @ShalomJr-xs7yg 4 месяца назад

      @@RealParadox85 Mahn you scared me, damn.

    • @vnxn10
      @vnxn10 3 месяца назад

      ​@@RealParadox85 got us in the first half, ngl 😂

  • @DennisIvy
    @DennisIvy 6 месяцев назад +2

    Love to see Neon here! 💪

    • @alexdin1565
      @alexdin1565 6 месяцев назад +1

      Dennis, we want to see you with Brad in a full-stack project using Django + Next
      Nextjs is better for SEO and image optimizations and you know Django more than I do and why it is the best

    • @DennisIvy
      @DennisIvy 6 месяцев назад

      @@alexdin1565 Maybe one day ;)

  • @PartneredBrands
    @PartneredBrands 5 месяцев назад +1

    Respect! I have learned from you so much over the years. You're truly a gift to us!!!

  • @spellman33
    @spellman33 Месяц назад

    awesome work brad! thanks

  • @N32-e1g
    @N32-e1g 6 месяцев назад +2

    i watch this legend like everyday, Brad i wish i meet you someday :(

  • @shrdn2960
    @shrdn2960 6 месяцев назад +7

    Love your videos Brad. But just like many others, I'm getting really concerned about vendor lock-in (even with generous free-tiers etc). Would love to see a 100%"vendor free" project.

    • @beemovan
      @beemovan 2 месяца назад

      Vendors and cloud services will change over time, but concepts will remain the same. It's not tenable for Brad to make a free youtube tutorial telling you how to host your own DB and write secure OAUTH workflows. Frankly it's incredible how easy it is these days thanks to vendors like these. IMO, it's best to stick with vendors for now, and if you want to learn more about rolling your own sign in workflows etc. then you can enter that rabbit hole at your discretion

  • @vladimir_dev
    @vladimir_dev 2 месяца назад

    54:30 isn't an empty string falsy? Shouldn't if (!textValue) cover that as well?

  • @quoclam7140
    @quoclam7140 4 месяца назад

    hmm I'm at 58:22 and I'm getting an error that formData.data or error is undefined

  • @FutureAIDev2015
    @FutureAIDev2015 6 месяцев назад +5

    Ooh this could be interesting, I could track my spending and get my finances back under control, and simultaneously give myself a non-zero project portfolio!

  • @ivanivanovik418
    @ivanivanovik418 4 месяца назад +1

    Love your next js projects, any chances you make some next js - laravel project maybe add some sweet breeze to it 😊

  • @AntNZ
    @AntNZ 5 месяцев назад +1

    Awesome tutorial Brad. Just wondering what is the vscode extension you used to display console log output next to the relevant code blocks?

  • @Salah-YT
    @Salah-YT 5 месяцев назад +1

    thank u so much

  • @CerkieGaming
    @CerkieGaming 3 месяца назад

    I am currently going through your HTML, CSS and JS courses and after watching this it feels like I will never get to the stage where I could do this on my own. It seems so complex would it be possible to move in to web development at the age of 35. (PS you're a great teacher)

  • @justinhiggs5388
    @justinhiggs5388 4 месяца назад +4

    Brad & fellow coders, you cannot just set your Clerk property to production. You have to have an actual domain that you control, with access to DNS. If you go to your Clerk project and click "+ Create production instance", it tells you right there that a basic demo deployment on Vercel doesn't work because you need an actual domain name and DNS access. Obviously, if you don't mind shelling out $20/year for a domain for a random demo project, go for it, but for those of us who don't want to or can't afford to do that, we'll have to just leave the Clerk project in development mode. Not sure if it'll stop working on the Vercel deployment but probably should have a disclaimer at the beginning of this video about it.

  • @codeaperture
    @codeaperture 6 месяцев назад +1

    You made me a developer and this is a must watch.. 😮 I rarely watch RUclips

  • @webdevluc
    @webdevluc 6 месяцев назад

    Really cool project tutorial Brad. Kudos to you for generously sharing it for free

  • @benbowers3613
    @benbowers3613 6 месяцев назад

    My man is fully modernized!

  • @spashak6
    @spashak6 6 месяцев назад +2

    Mon fan depuis le Burkina-Faso

  • @LumbreraEnMiCamino
    @LumbreraEnMiCamino 5 месяцев назад

    Awesome, congratulations 🎉🎉. We want to see more projects like this in Nextjs 🎉🎉.

  • @EVExplorers
    @EVExplorers 6 месяцев назад +1

    Pretty good course, Brad. Can you please show us how to host NextJS app on cpanel please?

  • @wolfie8748
    @wolfie8748 2 месяца назад

    Thank you very much brad. Why would you use Server Actions over API routes ? Do you think its better ?

  • @SuperPompey77
    @SuperPompey77 5 месяцев назад

    Excellent tutorial Brad

  • @ahmedhalloub
    @ahmedhalloub 5 месяцев назад

    Very graceful, you made it look very easy.

  • @hakangundogdu
    @hakangundogdu 4 месяца назад

    Great tutorial Brad, Thank you.

  • @skverskk
    @skverskk 5 месяцев назад

    Well done and easy to follow in a step by step explanation. I keep getting the Chrome Warning: "Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox". Is this a Clerk issue?

    • @tictac1020
      @tictac1020 4 месяца назад

      I'm on Firefox and I get errors about the Clerk cookie, "__client_uat"; checked Chrome and I get that same warning you do. Either something is wonky when using Clerk's JS on localhost Tried to look into it but couldn't figure out anything.

    • @skverskk
      @skverskk 4 месяца назад

      @@tictac1020 Yea, nobody seems to want to address it. I moved over to Kinde, for authentication. Much cleaner.

    • @skverskk
      @skverskk 4 месяца назад

      @@tictac1020No one seems to own up to these errors. I moved over to Kinde Auth. Much cleaner and no errors.

  • @upcomingcoder7933
    @upcomingcoder7933 4 месяца назад

    Having issues deploying to herself, type error : Object literal may only specify known properties and income does not exist in type '{ balance?: number | undefined; expense?: number | undefined; error?: string | undefined;}'

  • @vectorxdev
    @vectorxdev 4 месяца назад

    Awesome, congratulations.
    Completed

  • @davidnickson5043
    @davidnickson5043 5 месяцев назад

    Amazing! I connected Clerk forms with GA4, but every submission is showing up as "direct" instead of being attributed the right referrer/source. Do you know a solution for this? I've read the docs and can't find anything on it.

  • @RealParadox85
    @RealParadox85 4 месяца назад

    How would I add UPDATE functionality? Like if I wanted to edit something I already added? This is KILLING me trying to figure it out

  • @gustavosandoval8044
    @gustavosandoval8044 6 месяцев назад

    Hi , in your video 5 years ago wordpress with docker to input images we just create another volume no errors? thanks

  • @mypreciouz5634
    @mypreciouz5634 6 месяцев назад

    Thanks Brad, I watched the whole video.
    I am fairly new to web development and I have 2 questions
    1. Does this app count as full stack?
    2. Does vercel have full stack or backend app deployment options? If it has, would you prefer it?

    • @romanpisani8157
      @romanpisani8157 6 месяцев назад +1

      Yes the app is full stack. It utilizes a backend. But what I think you mean is does this app make you a full stack dev? I would say no. The technologies used are so advanced they are on the same level as calling a backend api that a whole team would have to create. It is both scary and beautiful

  • @DebopriyoBasu
    @DebopriyoBasu 6 месяцев назад

    Hi Brad, I got your Next Js course on Udemy. I request you to please complete the refactoring part and release the updated videos. It’s creating confusion and friction in learning.

  • @princemusole6225
    @princemusole6225 6 месяцев назад

    Love how simple this is.

  • @eder3232
    @eder3232 5 месяцев назад

    afterSignInUrl is deprecated, clerk suggests using environment variables instead, i try it bt dont work, can you explain this feature? :C

    • @анче-у2ш
      @анче-у2ш 5 месяцев назад

      Check if it allows using in prod)

  • @anangyoga1381
    @anangyoga1381 5 месяцев назад

    does anyone know why when we add + or - in front of the number, it will automatically add (for +) and substract (for -)?

  • @AbhinandanGhosh7
    @AbhinandanGhosh7 6 месяцев назад

    Anyone facing the following error when trying to migrate the schema? at 21:03
    Error: P1017
    Server has closed the connection.

    • @topten2828
      @topten2828 6 месяцев назад

      I faced an error simply because i wasnt running the app. (npm run dev on a different terminal)

    • @AbhinandanGhosh7
      @AbhinandanGhosh7 5 месяцев назад

      @@topten2828 Thanks buddy. I guess I did not realise I had the dev server not running. This fixed the issue.

  • @BryanYao-bm5eu
    @BryanYao-bm5eu 3 месяца назад

    I tried this way but it doesn't work I can't understand however all the configurations are good. please could you help me?

    • @RealParadox85
      @RealParadox85 3 месяца назад

      Are you serious You think that is honestly enough info for someone to help you? Not even a link to a github of your project, no mention of errors you are getting, you are LAZY for this.

  • @cloudagnostic
    @cloudagnostic 6 месяцев назад

    Great video Brad! Can you explain the globalThis? I’ve never seen this or know why this is needed. Thanks

  • @habib_nuhu
    @habib_nuhu 6 месяцев назад +1

    Nice one Brad

  • @dharanigowtham3731
    @dharanigowtham3731 5 месяцев назад

    if i got the userid, then can i able to access the data without login. right?

  • @thedelanyo
    @thedelanyo 5 месяцев назад

    Clerk Auth, I haven't tried yet, but 10K MAU is kinda low as compared to supabase Auth and firebase Auth, each offering 50K MAU

  • @shashwatshrey9248
    @shashwatshrey9248 5 месяцев назад

    8:00 Neon DB

  • @leojohn6702
    @leojohn6702 6 месяцев назад

    Lovelly. BTW, do you have a AWS tutorial for node js hsoting?

  • @aileenchan3741
    @aileenchan3741 5 месяцев назад +1

    I'm having trouble deploying to Vercel. I'm getting the following error: "Module not found: Can't resolve '@/lib/utils'". I realized the lib folder became grayed out and did not get committed to GitHub, but I don't have lib in my gitignore file, so not sure if anyone knows why that's happening? Although I forced pushing the lib folder to GitHub and re-ran the deployment on Vercel, I'm still getting the same message. Any ideas of what to try next?

    • @aileenchan3741
      @aileenchan3741 5 месяцев назад

      So this is how it was resolved. After 2hrs of research and trying things, by pure magic the lib folder became visible again. Since I noticed the folder "came back to life" I made a small change to trigger a commit and deployment and its now working in Vercel. 😅 I just don't get it! How? Wait what?!

    • @ashimasingh9906
      @ashimasingh9906 4 месяца назад

      Is it resolved

  • @iam_qwerty
    @iam_qwerty 5 месяцев назад

    Gracias Brad

  • @asifulahsan
    @asifulahsan 6 месяцев назад

    Please do a tutorial on flutter

  • @cristianleonardoarangodaza7886
    @cristianleonardoarangodaza7886 6 месяцев назад

    someone is having issues connecting to the neon db with prisma?

  • @smartdriver2990
    @smartdriver2990 4 месяца назад

    Done. Thanks for the tutorial

  • @darrinkinney2268
    @darrinkinney2268 5 месяцев назад

    now - we just want this in SVELTE instead of next.js. Or at least a quick go-by on how you'd go about converting the next app to a svelte app.

    • @darrinkinney2268
      @darrinkinney2268 5 месяцев назад

      not being snarky - loved the video and very great ideas. and as always the presentation is spot on.

    • @анче-у2ш
      @анче-у2ш 5 месяцев назад

      Ahahahahahahah)))) with 19th react and 17th angular nobody needs svetle anymore😅😅😅

  • @papa_ethan
    @papa_ethan 5 месяцев назад

    Nice, thank you!

  • @sayyedsaad7852
    @sayyedsaad7852 5 месяцев назад

    W vid!

  • @alveek
    @alveek 6 месяцев назад +1

    Clerk.. of course

  • @infinioda108
    @infinioda108 6 месяцев назад

    Let's goooo 😸🔥

  • @abdulsalamumarbarambu6371
    @abdulsalamumarbarambu6371 6 месяцев назад

    Wooohhhw💥💥

  • @NurioonSoftware
    @NurioonSoftware 5 месяцев назад

    Good one 👍

  • @MuhramMukram
    @MuhramMukram 6 месяцев назад

    Great sir🎉

  • @pawanlucky
    @pawanlucky 4 месяца назад

    Something new learnt :p

  • @skgamer2.027
    @skgamer2.027 6 месяцев назад

    please give me typescript tutorial

  • @vishichaurasiya4427
    @vishichaurasiya4427 4 месяца назад

    42:46

  • @emmanuelnwabuodafi6415
    @emmanuelnwabuodafi6415 6 месяцев назад

    Please can we get a Vue equivalent boss... Nuxt 🎉

  • @i.f.7386
    @i.f.7386 5 месяцев назад

    Why is this so easy for people in comments? 😮👀

  • @tenzin_761
    @tenzin_761 6 месяцев назад

    Wow.🎉

  • @raj080288
    @raj080288 6 месяцев назад

    What are you using for the ui?

  • @alexdin1565
    @alexdin1565 6 месяцев назад +1

    please can you make a tutorial using nextjs + django?

    • @activelistener4484
      @activelistener4484 6 месяцев назад +2

      lol can you a make cocktail using beer and wine

    • @alexdin1565
      @alexdin1565 6 месяцев назад

      @@activelistener4484 my comment wasn't for donkeys

    • @losmandev
      @losmandev 6 месяцев назад

      You can use next as a front end that connects to Django through an api

  • @aleksandarstanisic1848
    @aleksandarstanisic1848 6 месяцев назад

    Ty man😅

  • @ramendrasoni3368
    @ramendrasoni3368 6 месяцев назад

    Some people's are saying that react is getting down... Is there any other language to work efficiently with nodejs and Mongodb

    • @GamerSharp
      @GamerSharp 6 месяцев назад

      React is still here

    • @marcolancellotti8114
      @marcolancellotti8114 6 месяцев назад +2

      Some others say PHP is also going down. They started saying that 15 years ago. But it's still there.

    • @ramendrasoni3368
      @ramendrasoni3368 6 месяцев назад

      @@GamerSharp but still I feel it hard... I use te।plating engine ejs

  • @serychristianrenaud
    @serychristianrenaud 6 месяцев назад

    Thanks

  • @xvzf115
    @xvzf115 6 месяцев назад

    Nice

  • @ibizawavey8630
    @ibizawavey8630 6 месяцев назад

    I'm going to learn mobile development from scratch. fk hell.

  • @theaymanian
    @theaymanian 6 месяцев назад

    NEW TATS HAHA

  • @codernerd7076
    @codernerd7076 6 месяцев назад +28

    Don't use 3rd party auth services you will just be paying later for one unnecessary service, you really just saving yourself a few hours, they are sponsoring RUclipsrs to trap more people in their system...

    • @leojohn6702
      @leojohn6702 6 месяцев назад +6

      I can see you are not a dev😂😂😂

    • @codernerd7076
      @codernerd7076 6 месяцев назад

      @@leojohn6702 for not depending on 3rd party services for basic features... and controlling my project's budget?! Interesting take...

    • @jitxhere
      @jitxhere 6 месяцев назад +6

      I understand your concern. But it's not like they are trying to trap devs.
      (I too don't like external auth)
      Auth0 the big giant existed before the clerk and is being many high traffic apps are using it for example ChatGPT.
      Also 2 reasons:
      1. For big companies in the US the dev time is very costly. So they don't want to spend their time and money into it.
      2.CTO and devs just don't want to take the responsibility of any data breach. One less thing to worry about. Just point the time to them My opinion and seems like bad take)

    • @leojohn6702
      @leojohn6702 6 месяцев назад

      @@jitxhere why? If you want to use authentication with different services, third party apps does it best.

    • @codernerd7076
      @codernerd7076 6 месяцев назад

      @@jitxhere I worked for 3 big companies in the US and this is false (at least for the ones I know)! Companies I worked for didn't want to share their user data and spend a ton of money to host and secure their servers. None of the big companies I worked for would ever trust a start-up like Clerk to keep their user info safe, there is also a lot of value in "owning" your user data. There is a massive data broker business (but this goes a bit off-topic). Clerk and other startups are targeting small businesses and start-ups, and single young devs that haven't really deployed a lot of real-world projects with frameworks like Next.js yet.

  • @mexicanmax227
    @mexicanmax227 6 месяцев назад

    I’m high AF lol. Brad you’re a god. when I run the Biotech industry, I’m moving back to Massachusetts and we gonna kick it. It’s crazy. I’m dominating the biotech industry (biggest hub in Boston so I’ll be moving back once I hit a leadership role) and you taught me how to code before that when I was younger so everybody thinks I’m from the future every job I jump to because I know so much shit cuz of you 😂. I just got a $20,000 credit card so today I’m celebrating. Thank you so much for all your content. Sending love to your family and loved ones. Everything the Sun touches gonna be my kids 😎. Fucking love you Brad, Lehs gooo!!!!

    • @losmandev
      @losmandev 6 месяцев назад +2

      Lmao bro u tweakin cause what did I just read

    • @mexicanmax227
      @mexicanmax227 6 месяцев назад +1

      @@losmandev I’m celebrating bruh lol. #Love

    • @xvzf115
      @xvzf115 6 месяцев назад +1

      You prob won't get too far if you waste time being high.

  • @RobbPage
    @RobbPage 6 месяцев назад +1

    typescript is so stupid.

  • @AYUSH-sp2jw
    @AYUSH-sp2jw 5 месяцев назад

    PrismaClientKnownRequestError:
    Invalid `prisma.user.findUnique()` invocation:
    The table `public.User` does not exist in the current database.
    at async checkUser (./lib/checkUser.ts:16:26)
    at async Header (./components/Header.tsx:14:18)