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.
Here's the code guys: github.com/adityasinghcodes/nextjs-crud
Thank you! The video explains each concept clearly and thoroughly. Great work!
Your 500th follower
Thank you
Ur explanation is top notch.❤
Thanks man.
The swr thing is very useful thanks ❤
You really explain things easily
Thanks for this tutorial. It is great. Yes, please make a tutorial on Server Side data fetching. 😊
Will do!
Thanks for sharing this.
Awesome vid❤
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.
Great
need server side data fetching tutorial as well.
Will create
@@AdityaSinghCodes waiting for this...
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
I was talking about data fetching
I was talking about data fetching.
@@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
Bro give your vs code setup and all extentions please 🥺
Check my gumroad page.
Thanks ♥
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.
What issue are you facing ?
@@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 }
);
}
}
@@AdityaSinghCodes I have mailed you. The replies arent going to you.
@@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.
@@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:
please share the source code Im facing error for deleting todo.
What error are you facing ?
@@AdityaSinghCodes when I click on the delete button its gives me server error. I'm new to ts and nextjs.
@@gobifrontend github.com/adityasinghcodes/nextjs-crud
You're going way too fast man. You're just pasting code and not even reviewing the code...
Thanks for the feedback. I will improve upon this.
@@AdityaSinghCodesGood luck
@@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.