DEV Community

Cover image for 🤖🧠Making Tech Blog 2 (MUI (Material UI))
Web Developer Hyper
Web Developer Hyper

Posted on • Edited on

1 1

🤖🧠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.↓
Image description
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.↓
Image description

Third, modified the website to responsive design so that can be viewed on smartphones.↓
Image description
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.↓
Image description

②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.↓
Image description

③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.↓
Image description

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

④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.↓
Image description

⑤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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more