Build a SaaS Markdown blog with Next.js 14, Stripe, Tailwind, Supabase, React | Full Tutorial 2023

Поділитися
Вставка
  • Опубліковано 5 лис 2024

КОМЕНТАРІ • 85

  • @DailyWebCoding
    @DailyWebCoding  11 місяців тому +6

    In the demo, you will the see the page full reload when I toggled the switch form. Because It is from the old code and if you take a look at this 2:36:40. The page is not full reload. I fixed it already. You can find the code in the description.

    • @zatakzataks
      @zatakzataks 11 місяців тому

      what is the font name of your vscode

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому

      @@zatakzataks I am using Dank Mono.

    • @elonkiptoo1710
      @elonkiptoo1710 11 місяців тому

      ​@@DailyWebCodingokey​

    • @jsvrs
      @jsvrs 10 місяців тому +1

      Ok but change font pls

  • @DailyWebCoding
    @DailyWebCoding  11 місяців тому +6

    Thank you everyone for watching this video. Don't forget to like and subscribe to help making more content like this. 🙏

  • @philiphardy7311
    @philiphardy7311 11 місяців тому +7

    great in-depth tutorial! Quick tutorials for intermediate to advanced devs with less explanation are very popular and might help your channel grow. 20 or 30 mins maybe. Great work!

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому +1

      Thank you for your suggestion

    • @bukki007
      @bukki007 3 місяці тому

      This is also great

  • @hauvert_
    @hauvert_ 10 місяців тому

    amazing tutorial and great showcase of supabase.

  • @xczm225
    @xczm225 6 місяців тому

    The video is damn awesome dont understand how you have learned supabase that good

  • @developerme
    @developerme 10 місяців тому +3

    As I did the PostreSQL command for Auth I started getting Error 404

    • @goncalosantos3604
      @goncalosantos3604 10 місяців тому +3

      same here @Daily Web Coding

    • @b4ckpr0pagation
      @b4ckpr0pagation 10 місяців тому +1

      in your login component specify
      options: {
      redirectTo: `${location.origin}/auth/callback?next=${pathname}`,
      },

    • @dk2976
      @dk2976 8 місяців тому

      Here is the translation of your text into English:
      "I experienced the same issue, but it was due to a missing default value of 'user' for the role column when creating the table, which caused the bug. I hope this helps."

    • @xczm225
      @xczm225 6 місяців тому

      is this what you get? 500&error_description=Database+error+saving+new+user

  • @romulosendoromulo
    @romulosendoromulo 11 місяців тому +1

    Dude, this channel is awesome

  • @OnlyJavascript
    @OnlyJavascript 11 місяців тому +1

    amazing one

  • @narinderkmaurya
    @narinderkmaurya 11 місяців тому +1

    Awesome 💯

  • @prashlovessamosa
    @prashlovessamosa 11 місяців тому +1

    Thanks for sharing.

  • @carneiro_luiz
    @carneiro_luiz Місяць тому

    Unfortunately, superbase configuration changed completely from the time this tutorial was recorded. One can follow the ideas here, but a couple of changes will be needed.

  • @arnaudlelong2342
    @arnaudlelong2342 11 місяців тому +1

    Great job buddy, thank you.

  • @jannickpedersen4620
    @jannickpedersen4620 6 місяців тому

    I am at 4:10 - i did the login stripe cli and did the listener and the listener is active in the stripe under webhooks - but my user does not get updated with subscription id and status, its still false

    • @jannickpedersen4620
      @jannickpedersen4620 6 місяців тому +1

      my function was wrong, i had written: subscription_statusfrom, LOL, needed to seperate the from xD

  • @SoonKeatYeoh
    @SoonKeatYeoh 11 місяців тому +1

    Nice Video

  • @yanDev
    @yanDev 10 місяців тому

    Good morning,
    I have since discovered your channel and I find your content of excellent quality, I loved this video which allows you to discover a lot of features and functionalities for Supabase that I have always wanted to use with Nextjs.
    So I thank you for this video and I encourage you to continue this type of content.
    For example, if you could show how to create an application that shows how to use a service like Resend with Next and Supabase that would be great!
    or simply why not take up this project and improve it by adding an email sending system to create a sort of Newsletter when new blogs are added!
    This is just an idea but in any case thank you!

  • @yusufmafif
    @yusufmafif 10 місяців тому +1

    Thanks a lot.. i just finished this project

  • @parthshady5981
    @parthshady5981 11 місяців тому +3

    Will using markdown have any negative effect on SEO?

  • @krisznitro5403
    @krisznitro5403 10 місяців тому

    This one is a gem! Thank you for the video! ✨
    A question though: may I ask what theme and font you are using in vscode? Thanks in advance! :)

  • @junsgk
    @junsgk 11 місяців тому +1

    Best SNS(supabase, nextjs, shadcn) stack video on youtube!!!
    By the way, using zustand for handling session vs supabase server client, pros and cons??

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому +1

      this is from my experience:
      first I used supabase server client to handle session and page protection. It is working well. But until I want the page to be static which we cant since we are using supabase server client the page will be dynamic, plus supabase is not cache the request. So It will call to get session everytime I navigate to that page.
      so the solution: I move page protection to middleware and if I want to use user session for later. I can do this github.com/Chensokheng/next-saas-blog/blob/master/components/SessisonProvider.tsx with zustand.
      Hopefully this answer to your quesiton.

  • @xczm225
    @xczm225 6 місяців тому

    does this trigger and data function of supabase works with google auth?

    • @minzzaii
      @minzzaii 2 місяці тому

      I dont thinking so

  • @emsaik8202
    @emsaik8202 11 місяців тому

    Hey! Thanks for your videos they are super useful! I was wondering, could you point me to any blog post or information on how to correctly handle multi tenancy?
    I need to have multiple supabase projects but I need to share the auth for them, thanks again for your videos!

  • @rishiraj2548
    @rishiraj2548 11 місяців тому +2

    Thanks

  • @leanghourngphoeung2850
    @leanghourngphoeung2850 11 місяців тому +1

    Thanks you for sharing 。

  • @junsgk
    @junsgk 10 місяців тому +1

    1:05:08 button has type atttibute. Inside of form element, it turns into "submit" by default. If you set type to "button" the default behavior wont work.😅

  • @jake_fish
    @jake_fish 10 місяців тому

    thanks so much @dailywebcoding! might you be able to export, screenshot, or somehow share your supabase config (tables, functions, triggers, etc.) as well?

  • @maverick456-33
    @maverick456-33 11 місяців тому +1

    I'm curious why you don't use Prisma :) Good job btw !

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому +2

      Prisma is just an ORM to work with database. Supabase already has sdk to interact with database plus if you use prisma you have to implement RSL on your own.

    • @yashsolanki069
      @yashsolanki069 11 місяців тому

      ​@@DailyWebCodingRLS ?

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому

      @@yashsolanki069 row security level, I missed spell

    • @yashsolanki069
      @yashsolanki069 11 місяців тому

      @@DailyWebCoding i didn't even knew about this lmao, thanks for considering this as well. Here supabase is being directed as db or specifically postgres is being used for db ?

  • @hauvert_
    @hauvert_ 10 місяців тому +1

    pace is definitely for a little bit more passed begginer but not quite jr yet.

  • @amt.7rambo670
    @amt.7rambo670 11 місяців тому

    Bro a doubt. Here we are using our stripe key but will users who post blogs will they receive money in their account if someone purchases their blog or will we get the money?? Pls clarify

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому

      actually this is like a personal blog where only you or your team who can write blog and get paid.

    • @amt.7rambo670
      @amt.7rambo670 11 місяців тому

      @@DailyWebCoding bro only one help can u make a quick tutorial on the above question i asked i am creating a saas. But i am stuck in this part. The website should be ours but the sellers who use our website must get their respective money if any buyer buys from them using online payment on our websiite . We shouldnt have a comnection in their online transaction from our website. I am not able to find any tutrial related to this on youtube or internet

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому

      @@amt.7rambo670 sure I will take a look at this and try to do it

    • @amt.7rambo670
      @amt.7rambo670 11 місяців тому

      @@DailyWebCoding thanks bro ur the best 👌

  • @wilonweb
    @wilonweb 11 місяців тому

    Do you use content layer ?

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому +1

      No I don't use it. It is interesting I will check it out.

  • @DanThemes
    @DanThemes 10 місяців тому +10

    I don't understand why so many people use that horrible font, it's so unreadable.

    • @Rafaelprog
      @Rafaelprog 10 місяців тому +1

      Yeah, It's terrible

    • @xtianhondo
      @xtianhondo 8 місяців тому

      eye-straining font

    • @davidlintin
      @davidlintin 8 місяців тому

      Same. The line height too

  • @김인욱-u5q
    @김인욱-u5q 10 місяців тому +1

    Does this project support SSR? I quickly looked through it, and I think it's made up of only Client Components. Right?

  • @stelllarLumeon
    @stelllarLumeon 9 місяців тому +1

    can you please help me why i keep getting like "Refresh Token Not Found status : 400/429" in my terminal because of that i cant see my progress in localhost:3000, it is an honor to get answer from you

  • @naylord5
    @naylord5 11 місяців тому

    Amazing project! Thank you so much for sharing!
    I have one question, is there a way to prevent the full refresh of the page when toggle the premium selector? I mean, can we update just the affected row instead of the entire content?

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому +2

      You can take a look at this 2:36:40 the switch form will not trigger page full reload. Actually in the demo, it is from the old code and I fixed it already

    • @naylord5
      @naylord5 11 місяців тому

      That's perfect! Thank you so much for pointing that out master@@DailyWebCoding

  • @MkaiEy-u7i
    @MkaiEy-u7i 10 місяців тому +1

    hello sir.. im follow your tutorial and finished for 5 days.. everything gonna be ok until deploy as your video shown.. but on last section, i got error after change site_url to prod_url, on timestamp 4:57:15.. i watch your video again and again, but not work.. can you help me sir please..:)
    note: this my failed...
    > Build error occurred
    Error: Failed to collect page data for /blog/[id]
    at D:\MKAIDEV PROJECT ONLINE\mkaiblog
    ode_modules
    ext\dist\build\utils.js:1220:15 {
    type: 'Error'
    }
    Collecting page data .

    • @MkaiEy-u7i
      @MkaiEy-u7i 10 місяців тому

      and this on log error vercel deploy...
      TypeError: Failed to parse URL from undefined/api/blog?id=**
      at Object.fetch (node:internal/deps/undici/undici:11372:11) {
      [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:405:5)
      at new URL (node:internal/url:637:13)
      at new _Request (node:internal/deps/undici/undici:5055:25)
      at fetch2 (node:internal/deps/undici/undici:9195:25)
      at Object.fetch (node:internal/deps/undici/undici:11370:18)
      at fetch (node:internal/process/pre_execution:242:25)
      at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:174256)
      at U (/vercel/path0/.next/server/chunks/638.js:1:39496)
      at /vercel/path0/.next/server/chunks/638.js:1:41609 {
      input: 'undefined/api/blog?id=**',
      code: 'ERR_INVALID_URL'
      }
      }
      > Build error occurred
      Error: Failed to collect page data for /blog/[id]
      at /vercel/path0/node_modules/next/dist/build/utils.js:1220:15 {
      type: 'Error'
      }
      Error: Command "npm run build" exited with 1

    • @DailyWebCoding
      @DailyWebCoding  10 місяців тому +1

      undefined/api/blog?id
      look like you forgot to set env for SITE_URL as you can see it's undefine.

    • @MkaiEy-u7i
      @MkaiEy-u7i 10 місяців тому

      this error on vercel deploy.. im already set env for SITE_URL, may i add set env PROD_URL after code you change on last video?@@DailyWebCoding

    • @DailyWebCoding
      @DailyWebCoding  10 місяців тому +1

      after that try to redeploy again without cache

    • @MkaiEy-u7i
      @MkaiEy-u7i 10 місяців тому

      done bro.. everithing is fine after i add env PROD_URL on vercel.. ty for your respond, i very like your tutorial and already subscripe.. hope you can show more project next time.. @@DailyWebCoding

  • @panicbox4609
    @panicbox4609 10 місяців тому

    Darn wish you would have implemented supabase storage for photos...

  • @sai9692
    @sai9692 10 місяців тому

    Why you aren't using any ORM such as Prisma or Drizzile?

  • @hyakimaru8614
    @hyakimaru8614 11 місяців тому +1

    Can you make Next.js 14 Fundamental ?

  • @AmineZyad
    @AmineZyad 10 місяців тому

    The video looks good. I just can't focus with that font, it looks unreadable and hard to follow with

  • @SALML
    @SALML 11 місяців тому

    Next about Storage please b

  • @din2
    @din2 11 місяців тому

    Bro, how do we display a page view integrated with a database?

    • @DailyWebCoding
      @DailyWebCoding  10 місяців тому

      I am not sure I understand your question.

  • @erracode
    @erracode 10 місяців тому

    Dunno if someone can help me here, am doing the auth but doing it with password and email way, the thing is that the provider effect doesnt run again after a logout and login again, i have a router.refresh() that "refreshes" the page but it has the old values from the previous session ie another user

    • @DailyWebCoding
      @DailyWebCoding  10 місяців тому

      How do you implement authentication? Is it in server action?

  • @frogfox9577
    @frogfox9577 11 місяців тому

    Someone know if we could put different "stripe" account for different post ?

  • @ashutosh_tiwari
    @ashutosh_tiwari 10 місяців тому +2

    Please change the font!

  • @gabriel06123
    @gabriel06123 11 місяців тому +1

    Damn.. I was so happy about this video until you used zustand. Why would you use this extra library when you can achieve the same thing with just supabase?

    • @DailyWebCoding
      @DailyWebCoding  11 місяців тому +1

      I think the reason that I used it because supabase doesn’t cache the request and I want to share user session in multiple client components. I don’t want to use react context as well that’s why I go with zustand it is less boilerplate and easy

    • @gabriel06123
      @gabriel06123 11 місяців тому +1

      @@DailyWebCoding I understand, thanks for that extra info.. I will try it then 👍
      Btw.. great content, love your videos!

  • @chuhuynh270
    @chuhuynh270 10 місяців тому

    I want to copy the sql code in your demo blog but it's locked :(

  • @triXtyle
    @triXtyle 26 днів тому

    great tutorial, but I had to watch it on mute - your English is not bad, but you use too many parasitic words. And "butON" especially is killing me.