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!
Top comments (0)