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

[@funkyman093]

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

[@janmarshalcoding]

Legend, Thank you 🐐🙏🏻

[@Eyvind-kn8gl]

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

[@NIXO3D]

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]

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

[@Madewillarts]

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

[@StephenRayner]

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

[@dalestewart]

Another top notch professional tutorial👍

[@janmarshalcoding]

A lot more coming 🫡

[@NavyCrack1]

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

[@sajalhsn13]

Clear to the business. Awesome!

[@Ianthecreat0r]

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

[@raymondmichael4987]

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

[@dineshdhoni7470]

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

[@Racine14]

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

[@Yesterday_i_ate_rat]

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

[@ajaydeepsinghrajpoot]

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

[@Ekramrahs]

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.

[@ONEOTPOfficial]

Another quality content, rlly thx for ur efforts.

[@muhammaduseram9405]

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

[@muhammaduseram9405]

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

[@samiullahsheikh5015]

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

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

[@isha6173]

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

[@_mergoni]

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

[@KamillaJoy-bz7qp]

Great podcast 🙌

[@namaefumei]

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

[@Yahya_Umar]

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

[@ismansubarkah1969]

Great and Cool tutorial. Thank you for this video

[@flnnx]

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]

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

[@EmblazNOR]

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

[@jeffqseid2169]

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

[@janmarshalcoding]

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

[@8bitWatermelon]

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

[@artempar]

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.

[@MarosiMate-sq2wm]

Waoh! We gettin' another video.

[@mernik5599]

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]

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]

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]

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

[@mernik5599]

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]

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

[@shasum4226]

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]

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.

[@Salah-YT]

thank u so much bro 👍

[@jonoblake99]

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

[@jonoblake99]

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

[@JRReal]

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. 👍🏻 👊🏻

[@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....

[@voldemortvi4264]

this is really Good

[@NikolaFilipovski94]

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

[@Mark-sc2ew]

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]

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

[@bdd740]

Wow. Thanks a lot.

[@sumitgovil2311]

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]

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

[@gracemakena2078]

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

[@janmarshalcoding]

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

[@BlessingOpoku-fx8tt]

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

[@Michael-Martell]

probably a mismatch in route?

[@R00YSEC]

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

[@alexg7282]

Thanks !

[@booom5572]

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]

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

[@BisimwaJean-Pierre]

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

[@BisimwaJean-Pierre]

Sorry I get it....

[@ManishBeesetti]

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

[@Ygpadawan1-]

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

[@zainn7336]

sir try such tutorials on expo react native some dy😊

[@BisimwaJean-Pierre]

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

[@orangecoating]

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

[@kashmirtechtv2948]

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

[@XxlolktkatxX]

What is the software you use to record your screen?

[@janmarshalcoding]

Kap

[@regilearn2138]

use typescript for future projects

[@janmarshalcoding]

This project literally uses typescript lmao

[@giovannygarzonsoto]

nice bro

[@Ramkishor-he9zh]

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

[@danny-ji8cz]

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

[@Ianthecreat0r]

what theme is that?

[@janmarshalcoding]

Aura theme

[@ONEOTPOfficial]

bro cant you make with mongo db

[@itksports]

In Nigeria we cannot use stripe

[@janmarshalcoding]

ok i guess

[@Kmkn308]

Nice

[@Kmkn308]

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

[@yousefsaeed732]

Is this project okay for frontend developer ????

[@janmarshalcoding]

Yes

[@Kmkn308]

I have Complete these 1.5 hour

[@whodatsaken]

supabase have again fixed that thing to previous

[@sicario55]

wunderbach

[@newbiedb]

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

[@janmarshalcoding]

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

[@StephenRayner]

Explain why

[@StephenRayner]

Also timestamp would be helpful

[@kashmirtechtv2948]

​@@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.