Introduction
I begin to design and develop the prototype forDay 20 of #100DaysOfCode: Brainstorming for CS50W's final project Today.
My target is to build a website for readers to browse my articles easily. The technical stacks will be Django/DRF + PostgreSQL + ReactJS/Next.js.
This article is to note common components or skills for designing the content page and the shared components.
- Content page: may show your products and provide operation choices for readers
- Shared components: may include NavBar, SideBar, Footer, etc
Part 1. Content page
1. Modal
- Sometimes we need modal to help or teach users doing the next actions. The package I used is react-bootstrap
2. Pagination
- Pagination is important if we have to show many products to users. The package I used is react-paginate
3. Transition
- We can also make the website naturally by adding transitions if the website provides filters or pagination. The package I used is react-paginatereact-transition-group
Part 2. Shared components
1. NavBar
- The most common components on NavBar are Brand logo, About, Tools, Sign in/Sign out/Sign up
- The things on NavBar depends on the user has login or not
2. Side bar
- The things on Side Bar depends on what kind of abilities you want to provide to users
3. Footer
- The most common components on Footer are slogan, call-to-action, social media buttons, copy right text
About me
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
Top comments (0)