Slick's Slices: Frontend Website Development

Slick's Slices

Slick's Slices

Slick's Slices is a web app for a local pizza joint made with Gatsby.js.



ℹ️ About

Slick's Slices is a web app for a local pizza joint. It was developed with the React framework Gatsby.js to generate static sites on-the-fly! The backend and CMS are hosted on Sanity.io.

Here are different pages on this web app:

1. Homepage: showing the navigation bar, a grid of Slicemasters (chefs), and Hot Slices (pizza offerings).

Homepage of Slick's Slices webapp.

<>The nitty-gritty 🤓</>

The HomePage component returns two sub-components CurrentlySlicing and HotSlices wrapped inside the HomePageGrid parent component:

// index.js

export default function HomePage() {
  return (
    <HomePageGrid>
      <CurrentlySlicing sliceMasters={sliceMasters}/>
      <HotSlices hotSlices={hotSlices}/>
    </HomePageGrid>
  );
}

2. All pizzas page: this page shows all the pizzas available with a header with multiple tags to filter out your favourite pizza item according to the toppings.

All pizzas page.

<>The nitty-gritty 🤓</>

The PizzasPage component returns three sub-components:

1. <SEO>: For setting the title of the page dynamically according to the topping selected.
2. <ToppingsFilter>: helps in selecting and filtering the pizza data according to the selected topping filter.
3. <PizzaList>: the actual pizza list component that takes pizzas as argument which is fetched via GraphQL as:

// pizzas.js

const pizzas = data.pizzas.nodes

export const query = graphql `
  query PizzaQuery($toppingRegex: String) {
    pizzas: allSanityPizza(
      filter: { toppings: { elemMatch: { name: { regex: $toppingRegex } } } }
    ) {
      nodes {
        name
        id
        slug {
          current
        }
        toppings {
          id
          name
        }
        image {
          asset {
            fixed(width: 200, height: 200) {
              ...GatsbySanityImageFixed
            }
            fluid(maxWidth: 400) {
              ...GatsbySanityImageFluid
            }
          }
        }
      }
    }
  }
`

3. The pizza details page: shows the pizza image, its name and the ingredients.

Pizza details page.

<>The nitty-gritty 🤓</>

The SinglePizza component simply gets the pizza data as its parameter and renders it with styling applid via the styled-components library:

// PizzaList.js

const PizzaStyles = styled.div `
  display: grid;
  grid-template-rows: var(--rows, subgrid);
  gap: 1rem;
  h2,
  p {
    margin: 0;
  }
`;

function SinglePizza({ pizza }) {
  return (<PizzaStyles>
    <Link to={
      `/pizza/${
        pizza.slug.current
      }`
    }>
      ...
    </Link>
  </PizzaStyles>);
}

4. Slicemasters page: here all the chefs of the pizza joint are listed along with their name, photo, and description. Above the grid it has a pagination where you can navigate between different sub-pages showing other Slicemasters.

The Slicemasters page.

<>The nitty-gritty 🤓</>

This page has pagination which is controlled via the Pagination component which takes in pageSize from the environment variable GATSBY_PAGE_SIZE:

// slicemasters.js
<Pagination pageSize={parseInt(process.env.GATSBY_PAGE_SIZE)} 
  totalCount={data.sliceMasters.totalCount} 
  currentPage={pageContext.currentPage || 1} 
  skip={pageContext.skip} 
  base="/slicemasters"
/>