🤖🧠Making Tech Blog 2 (MUI (Material UI))

Intro

Hello!
I'm a full-stack IT engineer.
Interested in AWS, AI, and React.
Planning to create websites and try new technologies.
Attached image is created by AI.
AI is now my best friend and I can't live without it.😍
I also started X.
https://x.com/WebDevHyper

Now, I'm trying to make a Tech Blog for study.
Thinking of using AWS and React.
Last time, I wrote a post showing the outline of the Tech Blog.
https://dev.to/webdeveloperhyper/making-tech-blog-with-ai-character-react-aws-2986
This time, I will write about the frontend.

①MUI (Material UI)

Used React component library MUI (Material UI) for the frontend.
It can easily create views by components with regularity that follow Material Design.
https://mui.com/

It seems like a good idea to create a Tech Blog based on the MUI (Material UI) Blog template.
https://mui.com/material-ui/getting-started/templates/blog/

First, installed the MUI (Material UI) Blog template into Nextjs (React) project.
MUI (Material UI) looks stylish even without any adjustments.↓

It would take years to create this by myself using HTML and CSS.😆

Second, extract only the parts that are necessary for creating a website from MUI (Material UI) Blog template.↓

Third, modified the website to responsive design so that can be viewed on smartphones.↓

I would be happy if my blog will be read by all devices all over the world.🥰

Fourth, Created an introduction page based on the MUI (Material UI) Blog template.
I will make this my homepage.↓

②Pagination

Let's Add a pagination to display many articles on the website.
https://mui.com/material-ui/react-pagination/

Added MUI(Material UI) pagination to the website.↓

③Filtering

Let's add a filtering in case there are a lot of articles on the website.
https://mui.com/material-ui/react-chip/

Used MUI (Material UI) Chip to filter articles by tags.↓

Previously, I could only select one tag to filter.
But now I can select multiple tags to filter.↓

④Search box

Let's add a search box to make it more convenient,
in case the website has more articles.
https://mui.com/material-ui/react-text-field/

Created a search box to filter the articles on the website by any word.↓

⑤Video

Made a video of the movement of the Tech Blog.
It is in the order of ①Pagination, ②Filtering, and ③Search box.↓

Outro

As shown above, using MUI (Material UI) makes it easy to create a stylish frontend.
Next, I will post about AWS.
Thank you for reading.
See you!