Create a SaaS Application with Next.js.14, Stripe, Kinde, Prisma, Supabase and Tailwind

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ก.ย. 2024

ความคิดเห็น • 101

  • @funkyman093
    @funkyman093 7 หลายเดือนก่อน +31

    Clear instructions
    Straight to the point & clean code
    Structured approach
    Give that fella a follow - in before this account gets much larger 🤝

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน +2

      Legend, Thank you 🐐🙏🏻

  • @Eyvind-kn8gl
    @Eyvind-kn8gl 6 หลายเดือนก่อน +5

    Probably the most valuable coding video I`ve watched on TH-cam! Well done! Looking forward to future videos.

  • @NIXO3D
    @NIXO3D 7 หลายเดือนก่อน +1

    Man, Thank you so much! I had problem with connecting Drizzle ORM or Prisma with Supabase, but with your tutorial I can finally connect Prisma to the Supabase and learn CRUD operations. Thank you again

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน

      Haha, yeah annoying that they changed everything...
      Glad the video helped you!

  • @ayomideadejumo2068
    @ayomideadejumo2068 7 หลายเดือนก่อน +4

    Honestly, your approach is simple , clear and explanatory. Thanks so much for this ❤️

    • @StephenRayner
      @StephenRayner 7 หลายเดือนก่อน +2

      Keep grinding! You need to upload your SaaS project in 6 months or less 💪

  • @raymondmichael4987
    @raymondmichael4987 8 หลายเดือนก่อน +4

    The theme part is something that really troubled me, thanks, buddy. You got a new subscriber from Tanzania 🇹🇿 🎉🎉🎉🎉

    • @dineshdhoni7470
      @dineshdhoni7470 3 หลายเดือนก่อน +2

      Yeh . I do have the same issue. Really eye opening.

  • @NavyCrack1
    @NavyCrack1 7 หลายเดือนก่อน +1

    Finally to see someone from Europe making good tutorials :) greetings from North Macedonia bruder :)

  • @ajaydeepsinghrajpoot
    @ajaydeepsinghrajpoot 8 หลายเดือนก่อน +4

    Great! I wanted to get some sort of boilerplate for my sass. This will serve the purpose. Thank you Jan.

  • @dalestewart
    @dalestewart 7 หลายเดือนก่อน +2

    Another top notch professional tutorial👍

  • @Ianthecreat0r
    @Ianthecreat0r 7 หลายเดือนก่อน +1

    congratulations, timely and enlightening content, from 0 to the top

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat 8 หลายเดือนก่อน +4

    Thank you so much for this amazing tutorial❤😊, using kinde authentication becomes so simple 🥳

  • @Racine14
    @Racine14 5 หลายเดือนก่อน +2

    I got another error to the pathname === item.href !!! It's doen't work for me!

  •  5 หลายเดือนก่อน +2

    what happens when a user cancels a subscription in the portal - its status will forever be "active" in the DB ?

  • @artempar
    @artempar 7 หลายเดือนก่อน +2

    It's not nice to hide the GitHub repository behind GitHub logging. I just wanted to copy themes styles, but I had to do it on my own.

  • @muhammaduseram9405
    @muhammaduseram9405 4 หลายเดือนก่อน

    Always great !!! one suggestion is only let subscribed user to let change theme for $1 only that would make more sense

  • @sajalhsn13
    @sajalhsn13 6 หลายเดือนก่อน

    Clear to the business. Awesome!

  • @Ekramrahs
    @Ekramrahs 7 หลายเดือนก่อน +1

    When coding along, it won't let me go beyond 55:00. Reloading the page results in either no loading (90% of the time) or loading with both the Sign Up and Logout buttons visible. However, clicking the Logout button is unresponsive. If I click the Sign Up button, the page displays in an unusual design with everything positioned on the left side. Despite attempting "npm run dev" multiple times, the issue persists.

  • @muhammaduseram9405
    @muhammaduseram9405 4 หลายเดือนก่อน +1

    your project are great!! one thing i want to ask is how can we use stripe test account ???

  • @NikolaFilipovski94
    @NikolaFilipovski94 2 หลายเดือนก่อน

    29:36 Welcome to the moment when you changed the whole project into Dynamic (rendered on demand) and not as static pages 😅😅😅😅

  • @namaefumei
    @namaefumei 5 หลายเดือนก่อน +2

    On stripe webhook I am getting a 307 redirected. Why would it happen?

  • @Yahya_Umar
    @Yahya_Umar 5 หลายเดือนก่อน

    Your tutorials are always top-notch can you please create a inventory management system using Next.js with multiple role.

  • @ONEOTPOfficial
    @ONEOTPOfficial 5 หลายเดือนก่อน

    Another quality content, rlly thx for ur efforts.

  • @jonoblake99
    @jonoblake99 8 หลายเดือนก่อน +1

    Jan out here putting up numbers like 66-75 Franz Beckenbauer

    • @jonoblake99
      @jonoblake99 8 หลายเดือนก่อน

      Jan vscode suggested I switch the module resolution to node instead bundler like you have do you think it will matter in the end?

  • @MarosiMate-sq2wm
    @MarosiMate-sq2wm 8 หลายเดือนก่อน

    Waoh! We gettin' another video.

  • @EmblazNOR
    @EmblazNOR 6 หลายเดือนก่อน

    Hi! Please do a beginner course on how to develop and deploy a website for a startup. Just to collect email. After this a followup on how to take subscription payments for a digital product. Thank you

  • @_mergoni
    @_mergoni 4 หลายเดือนก่อน

    Gracias por el pool de llamadas de sup abase no lo encontraba en ningún lado 🎉

  • @8bitWatermelon
    @8bitWatermelon 8 หลายเดือนก่อน

    Nice one, Jan. This is really amazing. I cannot wait to start working on this.

  • @flnnx
    @flnnx 7 หลายเดือนก่อน +2

    I've seen some people using stripe-js library with loadStripe on the client and redirecting from there. Your implementation is much cleaner, but I wonder if there's any difference.

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน

      Yeah, I don't understand why everyone uses stripe-js...
      maybe they don't know better 😶‍🌫️
      For Stripe Checkout there is 0 difference, but if you use stripe to embed something like elements or smth then you will have to use stripe js...

  • @KamillaJoy-bz7qp
    @KamillaJoy-bz7qp 7 หลายเดือนก่อน

    Great podcast 🙌

  • @ismansubarkah1969
    @ismansubarkah1969 8 หลายเดือนก่อน +1

    Great and Cool tutorial. Thank you for this video

  • @isha6173
    @isha6173 6 หลายเดือนก่อน

    great tutorial bro keep it up!! Subscribed!!!!

  • @BisimwaJean-Pierre
    @BisimwaJean-Pierre 6 หลายเดือนก่อน +1

    Nice code but you don't install react-icons and it still working.

  • @Salah-YT
    @Salah-YT 7 หลายเดือนก่อน +1

    thank u so much bro 👍

  • @JRReal
    @JRReal 7 หลายเดือนก่อน

    Really grateful to you... Straight to the point & clean code !!! 👏👏👏 If you allow me to come up with a video idea, about a multi-language and multi-currency kind of financial portal. 👍🏻 👊🏻

  • @samiullahsheikh5015
    @samiullahsheikh5015 5 หลายเดือนก่อน

    2:59 can please let me know what other events should be handled in prduction?
    Just the events or direct some resouce for production ready event handling

  • @CandiceAlex
    @CandiceAlex หลายเดือนก่อน

    Great tutorial!!! Anyone knows how can i add the next-intl with this project, i am trying to follow different tutorials of next-intl but no success....

  • @ManishBeesetti
    @ManishBeesetti 5 หลายเดือนก่อน

    Thanks for the amazing Tutorial
    I am getting this error , when i am trying login with twitter
    "Something went wrong. And honestly, we do not know what it was. Try starting a new session."
    it shows status 200 in logs , no error messages
    did anyone face this issue .
    I have recreated the twitter app , checked callback urls nothing seems to work

  • @bdd740
    @bdd740 8 หลายเดือนก่อน +1

    Wow. Thanks a lot.

  • @jeffqseid2169
    @jeffqseid2169 7 หลายเดือนก่อน +1

    why when i save Ctrl + S when creating model its not automatically updated as yours? 3:13:03

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน +1

      Yeah, forgot to mention that. Install the prisma extension in the extensions tab

  • @voldemortvi4264
    @voldemortvi4264 8 หลายเดือนก่อน +1

    this is really Good

  • @alexg7282
    @alexg7282 5 หลายเดือนก่อน

    Thanks !

  • @gracemakena2078
    @gracemakena2078 7 หลายเดือนก่อน +1

    Hi, i get this error and it is nor redirecting me once i register....KindeSDKError: Attempting to commit invalid id_token

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน

      Well it seems like your is Id is invalid. Probably copied the incorrect key.

  • @Mark-sc2ew
    @Mark-sc2ew 7 หลายเดือนก่อน

    This is great. Thank you so much! Do you have any recommendations for a markdown editor to use within Next.js? This has really helped me with CRUD actions but I'd like to learn how to get more flexibility in the description field. Thank you.

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน

      Thank you. rtes or markdown editors a like the most annoying thing to implement since in my opinion there is no really easy option to use. There is something called Novel, but it does not play that good with shadcn (Check GitHub issues to see how to fix that.). But if you have some time to implement something substantial, I would probably try to implement editorjs

  • @orangecoating
    @orangecoating 7 หลายเดือนก่อน

    nice work! do you think kinde is better than the supabase auth?

    • @kashmirtechtv2948
      @kashmirtechtv2948 3 หลายเดือนก่อน

      There is another one Clerk. I'm really confused between auth0, clerk, kinde, drizzle, prisma, mongoose, postgres, mysql, mongodb

  • @BlessingOpoku-fx8tt
    @BlessingOpoku-fx8tt 5 หลายเดือนก่อน +2

    I keep getting 404 Not found for the stripe webhook. Any help?

    • @Michael-Martell
      @Michael-Martell 5 หลายเดือนก่อน +1

      probably a mismatch in route?

    • @R00YSEC
      @R00YSEC 4 หลายเดือนก่อน

      Im getting the same error. Do you know how to fix it?

  • @booom5572
    @booom5572 7 หลายเดือนก่อน

    Hi Jan, great video! I have one question - what is the theme you use for your IDE (VS Code I am assuming)
    It looks great haha

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน

      Thanks, if I remember correctly it's called aura theme.
      and yes it's VS Code

  • @Ygpadawan1-
    @Ygpadawan1- 5 หลายเดือนก่อน

    Is it required to have a Stripe account to use The API?

  • @mernik5599
    @mernik5599 7 หลายเดือนก่อน

    Excellent video! I was able to follow through it completely in one go. I'm able to get the project running but just wondering what can be done to ireduce the time in pendig state, in this case its a very simple application of adding and retrieving few text fields for our notes and even then its taking a bit long to create a new note or accessing the created notes. From a user's pov the website feels bit sluggish to use to be called production ready. Thanks for covering all the important aspects tho!

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน +2

      Thanks.
      There are a lot of things you could do.
      1: Change the region of your db and deployment to the closes to your location
      2: Use Edge functions to reduce cold starts
      3: add Optimistic UI
      But you can't reduce the speed of navigation...

    • @mernik5599
      @mernik5599 7 หลายเดือนก่อน

      Cool, thanks for the reply! I guess I'll be looking into more about edge functions since one of major pain points is related to long delays due to cold start. Also will shoot my shot and ask you if you could consider making about making and using edge functions!

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน +1

      @@mernik5599 I will definitely do it at some point in the future

    • @mernik5599
      @mernik5599 7 หลายเดือนก่อน +3

      Also I tried adding a search bar in the dashboard page (where we are initially fetching all the user notes), I was able to create a search field and added a function which gets triggered from form action, I could verify by printing that upon making the search the "data" field has the Notes object that I'm trying to find but on the UI it is still showing all the notes. Can you please help me on how can I adjust the code to update the code so that the UI gets updated with this "data" of search. Sorry for my naive questions, I'm a django developer and this is probably my first Next js video which I was able to follow through completely.

    • @mrmrsv9371
      @mrmrsv9371 5 หลายเดือนก่อน

      Fantastic Video, really learnt a lot and very much enjoy your style of explaining. Thank you and keep it up :)

  • @XxlolktkatxX
    @XxlolktkatxX 8 หลายเดือนก่อน +1

    What is the software you use to record your screen?

  • @sumitgovil2311
    @sumitgovil2311 7 หลายเดือนก่อน

    Thanks Jan. Gun material. I wanted to know though we are wiring database calls through our frontend resources (like dashboard/page.tsx). I was hoping to do something of this sort in the api layer, and fire it through a fetch call. Will that be more beneficial in longer run?

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน

      Thanks,
      you could use route handlers (API routes), but honestly I only use them like 5% of the time (for webhooks or smth like that.)
      If you think that at some point you want to create something like a BFF(remix.run/docs/en/main/guides/bff), because you want to build a mobile app which has access to the same API routes, then you should definitely use route handlers. But if your intention is to build a closed source website without providing public APIs then I don't see any reason to use route handlers, since it takes more time (a lot of boilerplate code...).
      Also, when using server actions for server components they still fetch all the code on the server-side and nothing is fetched on the client...

  • @giovannygarzonsoto
    @giovannygarzonsoto 8 หลายเดือนก่อน +1

    nice bro

  • @shasum4226
    @shasum4226 6 หลายเดือนก่อน

    1:33:44 I get this
    Error: P1001: Can't reach database server at `postgres`:`5432` .
    I have followed as instructed, could you please point out what is causing this error. Thank you!

    • @senlee325
      @senlee325 5 หลายเดือนก่อน

      Got around it by replacing it with 5432 on DIRECT_URL with 6543. Then after running npx prisma db push I get error so I change it back to 5432 and it worked.

  • @zainn7336
    @zainn7336 4 หลายเดือนก่อน

    sir try such tutorials on expo react native some dy😊

  • @BisimwaJean-Pierre
    @BisimwaJean-Pierre 6 หลายเดือนก่อน

    I am sorry I get it... May be you should explain that the icons must be download...

  • @regilearn2138
    @regilearn2138 6 หลายเดือนก่อน

    use typescript for future projects

    • @janmarshalcoding
      @janmarshalcoding  6 หลายเดือนก่อน +4

      This project literally uses typescript lmao

  • @Ramkishor-he9zh
    @Ramkishor-he9zh 7 หลายเดือนก่อน

    it throws me cant reach your db but whereas my db is connectd how to fix it
    plz rply

    • @danny-ji8cz
      @danny-ji8cz 6 หลายเดือนก่อน +2

      just copy your database url and paste it in your .env dont edit it like he did in the video it worked for me

  • @Kmkn308
    @Kmkn308 8 หลายเดือนก่อน

    I have Complete these 1.5 hour

  • @yousefsaeed732
    @yousefsaeed732 8 หลายเดือนก่อน

    Is this project okay for frontend developer ????

  • @newbiedb
    @newbiedb 7 หลายเดือนก่อน +3

    You should not use index for key when map!. You can search google about this problem.

    • @janmarshalcoding
      @janmarshalcoding  7 หลายเดือนก่อน +2

      Yeah, I know. But in this project there won't be any issues if you use the index key.

    • @StephenRayner
      @StephenRayner 7 หลายเดือนก่อน

      Explain why

    • @StephenRayner
      @StephenRayner 7 หลายเดือนก่อน

      Also timestamp would be helpful

    • @kashmirtechtv2948
      @kashmirtechtv2948 3 หลายเดือนก่อน

      ​@@StephenRayner ee use key from unique ID of our data when data needs to be modified or changing... If the list stays the same, then6we can put index as the key.

  • @Kmkn308
    @Kmkn308 8 หลายเดือนก่อน

    Nice

    • @Kmkn308
      @Kmkn308 8 หลายเดือนก่อน

      Respected Sir please make a project using neon database with nextjs Typescript instead of Supabase

  • @ONEOTPOfficial
    @ONEOTPOfficial 5 หลายเดือนก่อน

    bro cant you make with mongo db

  • @itksports
    @itksports 7 หลายเดือนก่อน

    In Nigeria we cannot use stripe

  • @Ianthecreat0r
    @Ianthecreat0r 7 หลายเดือนก่อน

    what theme is that?

  • @sicario55
    @sicario55 7 หลายเดือนก่อน

    wunderbach

  • @whodatsaken
    @whodatsaken 5 หลายเดือนก่อน

    supabase have again fixed that thing to previous