Full-Stack Next.js Blog App with Prisma and Tanstack React Query
In this tutorial, we'll create a blog app using Next.js. We'll use Prisma as an ORM to interact with a PostgreSQL database. We'll also incorporate Tanstack's React Query for performing CRUD operations, along with React Hook Form to create user-friendly post forms.
Tanstack React Query CRUD Tutorial - • Building a CRUD App with TanStack Rea...
🔗Source:
[Next.js] https://nextjs.org/docs/getting-start...
[Tanstack query]: https://tanstack.com/query/latest/doc...
[Prisma client] https://www.prisma.io/docs/guides/oth...
[Lucide icons] https://lucide.dev/
[react-hook-form] https://react-hook-form.com/get-started
[prisma] https://www.prisma.io/docs/getting-st...
[daisy ui] https://daisyui.com/
👉Timestamps:
0:00 - Intro
01:50 - Install Next.js
03:40 - Install DaisyUI
04:22 - Navbar UI
09:04 - Styling Main Page
10:56 - Post Card UI
13:23 - Form Create Post UI
18:54 - Use React-Hook-Form
28:10 - Detail Blog Page
34:29 - Form Edit Page UI
40:52 - Install and Setup Prisma
46:20 - Route GET all Tags
50:57 - Install and Setup Tanstack React Query
01:00:00 - GET All Posts (Server Component)
01:09:40 - GET Detail Post (Server Component)
01:14:05 - API Integration Create Post
01:22:28 - Route DELETE & PATCH Post
01:27:45 - API Integraiton DELETE Post
01:32:37 - API Integration Edit Post
🌎 Find Me Here:
Instagram : / candra_kriswinarto
GitHub: https://github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
#nextjs13
Watch video Full-Stack Next.js Blog App with Prisma and Tanstack React Query online without registration, duration hours minute second in high quality. This video was added by user Cand Dev 16 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 35,767 once and liked it 1.1 thousand people.