Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI

In this video, we will learn how to create a simple To-Do app using the new Next.js 13 App Router. I'll show you how to perform CRUD operations with json-server and use Tailwind to create a beautiful UI
👨‍💻Code:
[link code]
🔗Source:
[nextjs 13 docs] beta.nextjs.org/docs
[json-server] github.com/typicode/json-server
[tailwindcss] tailwindcss.com/docs/guides/n...
[daisy ui] daisyui.com/components/
[react-icons] react-icons.github.io/react-i...
[uuid] github.com/uuidjs/uuid
👋🏻Contact Me:
canddev.vercel.app/
🌎 Find Me Here:
Instagram : / candra_kriswinarto
GitHub: github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
#programming

[@CandDev]

You can clone the final code in this URL: github.com/candraKriswinarto/simple-todoapp-with-next13.

[@a3row_nkc]

This is a really helpful one in terms of a beginner, thanks and keep up the good work!

[@duccloud4101989]

Love your tutorial, you guide very clear. You saved my day :)

[@LM43243]

Love it! Simple and good tutorial for me to get back into coding. Would love a follow up video with more advanced design and client - server hosting on e.g. firebase, would be super beneficial and more useful for real projects. Subscribed!

[@kasrashoonam]

smooth and clean , i've been subscribed ! ty

[@dalestewart]

Excellent tutorial especially using the useState hook and useRouter hook.

[@DheaFadlia]

just what i'm looking for. also your code is clean and easy to read. i'm hooked, subscribed. cant thank you enough

[@franciscosalazar8116]

Thanks a lot! I was struggling until I see this video

[@P4nGuu]

This is an amazing tutorial. Greetings from Chile.

[@sumonhossain889]

Very helpful , want to more video this type of package. thank you

[@yerriswamygm5328]

Easy way Explained, Excellent, Thank you so much Sir.

[@ImamNurArifinHA]

thank you, you explain very well, I'm easy to understand,, nice video 👍

[@marczlong9382]

I would like to thank you for making the tutorial so easy to follow, even for someone with my poor English. It helped me a lot!

[@CandDev]

So happy to hear that, thanks 🤍

[@toanquoc506]

Thank you very much. Very helpful and detailed sharing

[@neoTriny]

cooool, nice tutorial. Thanks

[@yuthcambo3712]

Thanks a lot. it very helpful for me.

[@nguyenminhhung9701]

thanks god you are here

[@amr6657]

awesome, thank you very much

[@Shrimant-ub4ul]

Thank you sir !

[@kalana-dev]

Good one!

[@madaraop5348]

Thank You Brother.❣❣

Best tutorial ^^

[@klymchopyk]

thanks for lesson

[@user-vw9nx1uf6v]

Nice Video bro

[@sumonhossain889]

where code ?

[@keshavtomar3541]

while iterating over tasks prop in TodoList I keep getting this error - map does not exist on type TodoListProps not sure why this is happening to me I did exactly the same

[@Trust3D]

Epic tutorial, I don't need to buy a course🎉

[@CandDev]

Yeah, it's free... but you gotta subscribe. Think of it as a 'thank you' tax 😁

[@FaisalIqbal-ct2bs]

router.refresh() is not working on my side, even it is not showing any warning or errors, completely followed your code as per importing and cache: no-store

[@ogbillity]

great project. can you share the source code?

[@sanyamjain4777]

Please make Typescript with react video 🙏🙏

[@nonenone2743]

Following your guide now. Just in this moment. And I have a question: why TS? You didn't use TS in another project. What's the reason?

[@CandDev]

Yes, I just learned TypeScript and I am trying to implement it in this video. The reason I like to use TypeScript is that it is a superset of JavaScript and has additional features.

[@nonenone2743]

@@CandDev thanks for your reply :)

[@ruslan6580]

Thanks a lot. Any idea how to use "useId" hook instead?

[@CandDev]

Yes, you can use the 'useId' hook to generate unique IDs. It's a new feature in React 18.

[@amarvlolagena7157]

Can I host this code in vercel? Then what will be the fetching api?

[@panduladananjayamandawala8215]

Can you upload the code

[@Yona_elf]

Will there be a problem if i installed -g json server instead of -d json server? Because I'm having a 500 response for the status code of addTodo. Please enlighten me. Thank you.

[@0xPrakharG]

This was an amazing tutorial. I had a question, how can I host this app with vercel or netlify? As the todos.json file was just running on the server with the json-server. How can I host it to web?

[@StarKing18021995]

same question

[@0xPrakharG]

@@StarKing18021995 Hey, I figured it out that how to do it.
I took reference from here:- ruclips.net/video/wN0n2gj0z9o/видео.html

[@StarKing18021995]

I have found a way to fix it, you can refer to it ruclips.net/video/5N38jARjBIM/видео.html

[@StarKing18021995]

@@0xPrakharG OMG >O

[@aatishnimbokar2340]

unable to display data on UI when I type something & click on submit button

[@Website-Content-Creator]

can you make with fastapi using python nextjs14

[@muhammadosama8308]

Why not use prisma

[@mehdihoolakian9987]

Please upload the code

[@luqmanusman70]

Hi, kindly give us the source code link, thanks.

[@SuzukaTheBest]

But if i want to deploy this on web? what should we use instead of json-server?

[@RohitSingh-qf6pk]

did you got anything about the same?

[@SuzukaTheBest]

@@RohitSingh-qf6pk yes, I've parsed json-file into array and uploaded that array into firestore database....

[@RohitSingh-qf6pk]

@@SuzukaTheBest okay thanks

[@kevinrichard9047]

You can create your own node js express server, with your own data. Connection to mysql db.. or mongo or everything you need

[@gregthomas5887]

Link to the code please?

[@eversonjunior8494]

Is api.ts like api/route.js?

[@CandDev]

No, it's different. In route.ts, you can create API route to handle API requests, and the file should be named route.ts to make it work. On the other hand, api.ts is just a file that helps you send requests to the API route. happy coding 👨‍💻