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

🔗Source:

👉Timestamps:
0:00 - Intro
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:

#nextjs13

[phil]

Wow. Once again you've outdone yourself. Beautiful tutorial. Almost all latest React technologies - Prisma, Axios, Tailwindcss in one tutorial. Only technology missing is NextAuth.js. You could implement a simple Prisma seed for the initial data. Love it

[anggaerlangga]

mantap, thanks mas
ditunggu utk study case2 selanjutnya

[somebody-]

Can I have the github code of this project please

[aaronmacken]

thanks for making this, been having a hard time managing / syncing state through my server / client components, was just hoping someone posted a github link with a fullstack project for me to read thru

[gauravbawa]

thank so much for this video solved many issues for me

[clintonevans]

Great video! Has anyone noticed the delay in the edit form? If you name a post called "post 1" and go edit: the edit form says "post 1". If you change that to "post 2" and then go back to edit it says "post 1" until you refresh the page. Any ideas?

[hiplpht]

I was able to follow your code and it works exactly as seen in the video 😊. Thankyou very much Sir

[EduarteBDO]

Pretty good blog app, just one thing, in api/posts/[postId] in the GET function of the route.ts you included tag:true, but for this project tag isn't used, because the FormPost.tsx queries all tags already and only use tagId to select the default tag

[ADARSHKUMAR-mezn]

Hi Cand Dev, I was looking for a tutorial that uses all the latest technologies and found your video. This video is very helpful to upskills me from MERN stack.
Long way to go, you deserve many more subs

<3 from India

[minhhieple]

May I ask, What is the props and cons of using react-query compare with fetch in Next.js 13 ?

[bklynpeter]

Wonderful video, thanks for doing it! Could I ask what the github repo is for this project? I typed something wrong somewhere and I'd love to compare, lol!

[mutiaraayun]

got error No QueryClient set, use QueryClientProvider to set one when using mutation. somehow i have set QueryClientProvider in my root file. btw I'm using next.js page route, any suggetion to solve it ? thank u in advancce

[claudenirfilho]

Awesome video, got a new subscriber. If its not much, can I request you a video of an application just like this one but with authentication? CRUD in a specific user.

[nanonkay]

Two weeks later, Daisy UI is at version 3.8.3 lol

[niconel]

Really appreciate your time making a video about ... well what you describe in the title. But why waste so much precious time on Tailwind/Daisy/Lucid, etc?

[aurelmark]

missed in useQuery Tag[] to add in index.d.ts