Bois VintageLocal business website

React app displaying products and photo galleries

React

React Router

Javascript

CSS3

SASS

HTML5

Website build with React. Header and footer (with contact details, links to social media and credits) are fixed, while the main content is dynamically rendered using Router.

The home page displays a grid of products. Each element in the grid displays a thumbnail photo of the product. Each element of the grid is produced by mapping through an array of products (javascript objects), which contain information about that product.

Hovering on each element of the grid reveals a short description of the item as well as the price. The cursor also changes to "pointer" to signal to the user that they can click on it.

Clicking on each element in the grid takes us to an individual product page. This individual product page is dynamically generated using the same array of products. The correct element int he array (i.e. the correct product) by passing the id of the clicked product (with useParams) to the individual page.

Each individual product page displays a photo gallery. The gallery buttons update state, which in displays a new photo in the photo gallery array.