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
- Sometimes we need modal to help or teach users doing the next actions. The package I used is react-bootstrap
- Pagination is important if we have to show many products to users. The package I used is react-paginate
- 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
- 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
- The things on Side Bar depends on what kind of abilities you want to provide to users
- The most common components on Footer are slogan, call-to-action, social media buttons, copy right text
There are some of my articles. Feel free to check if you like!