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, duration hours minute second in high quality that is uploaded to the channel Cand Dev 16 September 2023. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 35,767 times and liked it 1.1 thousand visitors.
