🤖🧠Making Tech Blog 5 (v0 by Vercel)

Intro

Thank you for clicking my post.
Nice click!🖱️
Last time, I deployed my Tech blog made by React, Nextjs and MUI(Material UI) on Vercel.
https://dev.to/webdeveloperhyper/making-tech-blog-4-vercel-ppj
Then, I found that Vercel has an AI called v0.
So, I took a look at it, and saw how it works.🧐
(v0 reminds me of the song "Zero" by Chris Brown.
Zero, zero, zero, zero🎵)

What is v0 by Vercel?

v0 is a generative AI tool by Vercel.
It has a chat interface and generate UI with client-side functionality.
v0 can write and render not only react, but also Svelte, Vue, HTML with CSS.
You just need to write a prompt in English in the chat box to use v0.
You can copy and paste the code made by v0 to your project or install it via the shadcn CLI.

Let's try v0.

Last time, I made the Tech Blog frontend using MUI (Material UI) blog template by myself.↓
https://dev.to/webdeveloperhyper/making-tech-blog-2mui-material-ui-14g3
So, I tried to make the same thing with v0, and compare the difference.
First, I asked v0 to make a blog template.
The product had an error, and it didn't work, so I ask v0 to debug it.
The second product worked.↓

Next I asked v0 to fix it to display images.
It worked.
The design is too simple, so I wondered if v0 can change the code to use MUI (Material UI).
It worked.↓

I asked v0 to add pagination, filtering and search box one by one using MUI (Material UI).
It all worked.↓
(Actually, there were bugs so I started from the beginning again.
That is why the layout has changed a little.)

Using the code locally.

Next, I tried to use it locally.
The code was working fine on the web, but there were many errors when 'npm run dev' and 'npm run build' at my PC.
I left all the errors to ChatGPT and they were solved.🤖👍

Deploy on Vercel

Finally, I deployed my project on Vercel.
And checked the operation.
①Pagination check
②Filtering check
③Search box check
④Move to detail page
It works perfect!
.

Outro

Using v0 it was so easy to make the frontend, because all you need is English not coding skill.
Output was faster and neater than I made taking a lot time and fighting with many bugs.😅
Thank you for reading.
Happy coding!
(Well, I didn't code, v0 the super AI coded.🤖👍)