FULLSTACK NEXTJS PRISMA TYPESCRIPT TAILWIND CRUD TUTORIAL

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

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

  • @steverossiter_
    @steverossiter_ 3 ปีที่แล้ว +30

    sometimes the universe delivers the exact video you need at the exact at the exact right time. thank u for this.

    • @thejcedeno
      @thejcedeno 3 ปีที่แล้ว

      Literally, this was exactly what I needed

    • @lautaroriveiro
      @lautaroriveiro 2 ปีที่แล้ว

      That was not the universe, was Darwin effort. But yes, sometimes happens and is great. Thanks!

  • @vightibor8907
    @vightibor8907 2 ปีที่แล้ว +3

    I have been pulling my hair out to find a "simple" CRUD app I can play with in NextJS. Wish I had found yours days ago. Many thanks!

  • @luisbarbosa5597
    @luisbarbosa5597 2 ปีที่แล้ว +5

    its the only tut around I've found so far of like 20, that actually includes a delete request. Many thanks for sharing!

  • @skverskk
    @skverskk 2 ปีที่แล้ว +2

    Nice, clear and precise tutorial. Thx

  • @UAng-ro9kt
    @UAng-ro9kt ปีที่แล้ว +1

    what an amazing tutorial !!!

  • @adimaralimuddin96
    @adimaralimuddin96 2 ปีที่แล้ว

    thanks. i'd enhoyed it and it was fun! you're fun!

  • @adairoreyes1644
    @adairoreyes1644 2 ปีที่แล้ว

    I started a project some days ago, I though I had to keep a local version of the data fetched as local state, but that brings a lot of complexity trying to keep things in sync with the db. I think I'll just refresh the page 🥴 thanks a lot!

  • @dorin6880
    @dorin6880 2 ปีที่แล้ว +1

    Great tutorial. Thanks you!

  • @junsgk
    @junsgk ปีที่แล้ว +2

    Typically, you would run npx prisma migrate after making changes to your Prisma schema, and then run npx prisma db push to apply those changes to the database.

  • @ahsanabrar880
    @ahsanabrar880 2 ปีที่แล้ว

    thanks, I learn a lot. 👍

  • @aisl1n290
    @aisl1n290 2 ปีที่แล้ว +1

    Hey Darwin, whats the font in vscode do you use ?

  • @coxer3719
    @coxer3719 2 ปีที่แล้ว

    39:37 I am getting the error "Error: Loading initial props cancelled" on console, but it does create anew row in the db. I had to add an await to the fetch and just after the fetch the refreshData, as a temporary solution, how can i solve this?

  • @saharilarshad1628
    @saharilarshad1628 ปีที่แล้ว

    the update part its like creating new data, not persist the same id of data. correct me if i'm wrong

  • @themanwhoiscompeng1422
    @themanwhoiscompeng1422 2 ปีที่แล้ว

    LIT.

  • @diklaism
    @diklaism 2 ปีที่แล้ว

    Thank you for this wonderful video!
    Do you know Remult (A CRUD framework for full stack TypeScript)?

    • @DarwinTutorials
      @DarwinTutorials  2 ปีที่แล้ว +2

      Haven't heard of it but will check it out.

  • @mediacreatif
    @mediacreatif 2 ปีที่แล้ว +1

    Hi. I don't understand why you wrote a handleSubmit function to call another function which is create. Why don't you just call directly create() in the onSubmit form ?

    • @ricorico222
      @ricorico222 2 ปีที่แล้ว

      same thing, you can do either, it dosent matter

  • @ricorico222
    @ricorico222 2 ปีที่แล้ว

    thanks this great, thank you a million!

  • @yigitruzgaruzun7289
    @yigitruzgaruzun7289 2 ปีที่แล้ว

    THANK YOU SO MUCH

  • @magic-cy6tf
    @magic-cy6tf ปีที่แล้ว

    is there a way to see created notes in pgadmin?

  • @ikedacripps
    @ikedacripps 3 ปีที่แล้ว

    can you imagine?? just in time !! :)

  • @b.szabolcsterjek6483
    @b.szabolcsterjek6483 2 ปีที่แล้ว

    Hey, what's the point in having a separate .env file?

  • @dodokod
    @dodokod 2 ปีที่แล้ว +1

    You probably heard this a lot but... What is your vs code theme or visual settings? :) Thanks

    • @DarwinTutorials
      @DarwinTutorials  2 ปีที่แล้ว +1

      Yeah get that quite a bit but the font is dank mono and night owl is the theme.

  • @Human_Evolution-
    @Human_Evolution- 2 ปีที่แล้ว

    So this is a full stack app that is much more simple and faster to make than something like a traditional React, Express, PostgreSQL app? I ask because I've only made full stack apps the long slow way that I mentioned above.

    • @Sammysapphira
      @Sammysapphira ปีที่แล้ว

      Next js is a back end server sided framework that returns pre rendered react to the client.

  • @nguyenanhtuan4723
    @nguyenanhtuan4723 2 ปีที่แล้ว

    Which extension gives an error?

  • @takek7739
    @takek7739 2 ปีที่แล้ว

    Which vs code theme are you using ?

  • @rumonintokyo
    @rumonintokyo 2 ปีที่แล้ว

    been having difficulty connecting to the postgres database.. did u use pgadmin 4 to connect? I get some password authentication error that prevents me from starting the server

  • @jeremyh9841
    @jeremyh9841 3 ปีที่แล้ว

    Nice, can u do with nexus and graphql (apollo) ?

    • @DarwinTutorials
      @DarwinTutorials  3 ปีที่แล้ว +1

      It's a little old but I did do one with this stack a while back th-cam.com/video/MT5j7xroSu4/w-d-xo.html

  • @htcsaj7876
    @htcsaj7876 2 ปีที่แล้ว

    Make video with jwt token and bcrypt authentication in next je and prisma Postgresql

  • @baptiste6436
    @baptiste6436 2 ปีที่แล้ว

    bad idea to autoincrement ids, I'd suggest uuid and not Int as values can be predictable

  • @oneManDev
    @oneManDev 2 ปีที่แล้ว

    What the heck is:
    interface FormData {
    title: string
    content: string
    id: string
    }
    Please explain. I'm getting an error saying:
    Error:
    x Unexpected token `interface`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string,
    | regexp, ` for template literal, (, or an identifier
    ,----
    6 | interface FormData {
    : ^^^^^^^^^
    `----
    Caused by:
    0: failed to process input file
    1: Syntax Error

  • @syamlalsyamlal
    @syamlalsyamlal 2 ปีที่แล้ว

    Video was great, but record updating method is wrong

  • @islemkhemissi1623
    @islemkhemissi1623 2 ปีที่แล้ว

    Hey, what happened at 34:30?
    How did you get rid of the typing error?

    • @harryweisner4193
      @harryweisner4193 2 ปีที่แล้ว +1

      Edit: I think my reply got deleted because I added a link to where it says in the docs.
      I know it's been two months but if anyone wants to know, replace:
      const Home: NextPage = ({notes}: Notes) => {
      with
      const Home: NextPage = ({notes}) => {
      That part in the docs isn't easy to find so if you copy and paste this at the end of the nextjs docs url to get to it: /api-reference/data-fetching/get-initial-props#typescript

  • @Ricardoromero4444
    @Ricardoromero4444 2 ปีที่แล้ว

    It's only missing trpc to make it the perfect stack

    • @DarwinTutorials
      @DarwinTutorials  2 ปีที่แล้ว

      Just started looking at trpc recently.

  • @Human_Evolution-
    @Human_Evolution- 2 ปีที่แล้ว +1

    I feel like Tailwind makes things more difficult than vanilla CSS. And it's ugly, at least in this display. But I love the app built here.

    • @Sammysapphira
      @Sammysapphira ปีที่แล้ว +1

      This is most certainly wrong lol.

    • @Human_Evolution-
      @Human_Evolution- ปีที่แล้ว

      @@Sammysapphira preference thing I guess.

  • @filipevalentegomes2383
    @filipevalentegomes2383 2 ปีที่แล้ว +1

    If you want to install Next.js with typescript and tailwind css, this is the fastest way:
    npx create-next-app --example with-tailwindcss with-tailwindcss-app
    # or
    yarn create next-app --example with-tailwindcss with-tailwindcss-app

  • @farhaanpatel5302
    @farhaanpatel5302 2 ปีที่แล้ว

    use create t3 app

  • @grahampcharles
    @grahampcharles 2 ปีที่แล้ว

    Why fetch with the server name and port ('localhost:3000/api/create') and not just fetch('/api/create')?