Перейти к содержимому

Full-Stack Next.js Blog App with Prisma and Tanstack React Query

Cand Dev

0:00 / 0:00

Full-Stack Next.js Blog App with Prisma and Tanstack React Query

38 197 просмотров · 2 года назад
Cand Dev
20,8 тыс. подписчиков
38 197 просмотров · 2 года назад
Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A 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 React-Qu...   🔗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