Day 24 of #100DaysOfCode: Design the Prototype of the Website - Content Page and Shared Components

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 website: https://www.alayman.io/
• Facebook page: https://www.facebook.com/imalayman