CRUD in Next.js Using Zod, Shadcn, Prisma, Mongodb and SWR. Todo app

Поділитися
Вставка
  • Опубліковано 11 лис 2024
  • This video shows the complete CRUD functionality in a next.js app. I am going to show you how to make a minimal todo app that provides a good user experience.
    I will show you how to use Zod for form data validation, shadcn for ui components, prisma as ORM, mongodb as database and other important things.
    Source code: github.com/adi...
    Thank you.

КОМЕНТАРІ • 39

  • @AdityaSinghCodes
    @AdityaSinghCodes  13 днів тому

    Here's the code guys: github.com/adityasinghcodes/nextjs-crud

  • @ZEPHhhh
    @ZEPHhhh Місяць тому +1

    Thank you! The video explains each concept clearly and thoroughly. Great work!
    Your 500th follower

  • @Dibyendu-dev
    @Dibyendu-dev 2 дні тому

    Ur explanation is top notch.❤

  • @pubgudit7290
    @pubgudit7290 Місяць тому +1

    The swr thing is very useful thanks ❤

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

    You really explain things easily

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

    Thanks for this tutorial. It is great. Yes, please make a tutorial on Server Side data fetching. 😊

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

    Thanks for sharing this.

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

    Awesome vid❤

  • @yasingunaydiin
    @yasingunaydiin 11 днів тому

    Finished it. Though I could not figure out how to place the checkbox on the main page... Tried a lot of things with GPT etc but nope :( Overall, good tutorial, I do recommend everyone to check the source code when you're stuck.

  • @ps_breakdowns
    @ps_breakdowns Місяць тому +1

    need server side data fetching tutorial as well.

  • @Sahil.1
    @Sahil.1 12 днів тому

    Hey man in the start of the video you said server side data fetching so is it for all the crud operations included or you were just talking about data fetching?
    If we can do all the crud operations (or mostly) on the server side then pls make a video asap

    • @AdityaSinghCodes
      @AdityaSinghCodes  12 днів тому

      I was talking about data fetching

    • @AdityaSinghCodes
      @AdityaSinghCodes  12 днів тому

      I was talking about data fetching.

    • @Sahil.1
      @Sahil.1 12 днів тому

      @@AdityaSinghCodes thanks for your efforts man, if possible make a crud operations for nextjs using server actions and keep the length similar to this video

  • @SahilKhanpara-g7n
    @SahilKhanpara-g7n 25 днів тому +1

    Bro give your vs code setup and all extentions please 🥺

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

    Thanks ♥

  • @yasingunaydiin
    @yasingunaydiin 14 днів тому

    Hey I have followed the code and refollowed everything two times and I cant find two issues present. I'm at 30:00 of your tutorial. Publishing your code would help me out a ton.

    • @AdityaSinghCodes
      @AdityaSinghCodes  13 днів тому

      What issue are you facing ?

    • @yasingunaydiin
      @yasingunaydiin 13 днів тому

      ​@@AdityaSinghCodes ​ @AdityaSinghCodes I will try to explain as much as I can:
      1. First I get a "TypeError: todoList.map is not a function." after waiting like 10-15 seconds. The Todolist.tsx code is very short and the same as yours so I'm very confused.
      2. When I want to submit a todolist I get a red "An unexpected error occured" on the card and this in the console of Visual Code: POST /api/todos 500 in 13ms
      Error fetching todos: PrismaClientKnownRequestError:
      Invalid `prisma.todo.findMany()` invocation:
      (Theres more error code here with locations but its too long so it doesnt allow me to post, this part is the bottom of the error)
      modelName: 'Todo',
      code: 'unknown',
      message: 'Kind: Server selection timeout: No available servers. Topology: { Type: ReplicaSetNoPrimary, Set Name: atlas-zaq5qg-shard-0, Servers: [ { Address: cluster0-shard-00-01.km0dc.mongodb.net:27017, Type: Unknown, Error: Kind: I/O error: received fatal alert: InternalError, labels: {} }, { Address: cluster0-shard-00-02.km0dc.mongodb.net:27017, Type: Unknown, Error: Kind: I/O error: received fatal alert: InternalError, labels: {} }, { Address: cluster0-shard-00-00.km0dc.mongodb.net:27017, Type: Unknown, Error: Kind: I/O error: received fatal alert: InternalError, labels: {} } ] }, labels: {}'
      }
      This is my code regarding the "Error fetching todos: PrismaClientKnownRequestError:
      Invalid `prisma.todo.findMany()` invocation :
      export async function GET() {
      try {
      const todos = await prisma.todo.findMany({
      orderBy: {
      createdAt: 'desc',
      },
      });
      return NextResponse.json(todos);
      } catch (error) {
      console.error('Error fetching todos:', error);
      return NextResponse.json(
      { message: 'An unexpexted error occured' },
      { status: 500 }
      );
      }
      }

    • @yasingunaydiin
      @yasingunaydiin 13 днів тому

      @@AdityaSinghCodes I have mailed you. The replies arent going to you.

    • @yasingunaydiin
      @yasingunaydiin 13 днів тому

      @@AdityaSinghCodes 1. First I get a "TypeError: todoList.map is not a function." after waiting like 10-15 seconds. The Todolist.tsx code is very short and the same as yours so I'm very confused.

    • @yasingunaydiin
      @yasingunaydiin 13 днів тому

      @@AdityaSinghCodes
      I have mailed a more detailed report of my issues.
      2. When I want to submit a todolist I get a red "An unexpected error occured" on the card and this in the console of Visual Code: POST /api/todos 500 in 13ms
      Error fetching todos: PrismaClientKnownRequestError:
      Invalid `prisma.todo.findMany()` invocation:

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

    please share the source code Im facing error for deleting todo.

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

      What error are you facing ?

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

      @@AdityaSinghCodes when I click on the delete button its gives me server error. I'm new to ts and nextjs.

    • @AdityaSinghCodes
      @AdityaSinghCodes  13 днів тому

      @@gobifrontend github.com/adityasinghcodes/nextjs-crud

  • @yasingunaydiin
    @yasingunaydiin 14 днів тому +1

    You're going way too fast man. You're just pasting code and not even reviewing the code...

    • @AdityaSinghCodes
      @AdityaSinghCodes  14 днів тому

      Thanks for the feedback. I will improve upon this.

    • @yasingunaydiin
      @yasingunaydiin 14 днів тому

      @@AdityaSinghCodesGood luck

    • @yasingunaydiin
      @yasingunaydiin 14 днів тому

      @@AdityaSinghCodes Good luck as you have potential. Good mic and good explanation. Please never stop replying to people in the comments even if the problems are small.