This content originally appeared on DEV Community and was authored by Web Developer Hyper
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.
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/
Installed the MUI (Material UI) Blog template into Nextjs (React) project.
MUI (Material UI) looks stylish even without any adjustments.↓
Extract only the parts that are necessary for creating a website from MUI (Material UI) Blog template.↓
Modified the website to responsive design so that can be viewed on smartphones.↓
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!
This content originally appeared on DEV Community and was authored by Web Developer Hyper
Web Developer Hyper | Sciencx (2025-01-11T02:16:11+00:00) 🤖🧠Making Tech Blog 2️⃣(MUI (Material UI)). Retrieved from https://www.scien.cx/2025/01/11/%f0%9f%a4%96%f0%9f%a7%a0making-tech-blog-2%ef%b8%8f%e2%83%a3mui-material-ui/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.