Creating the storefront, cart, and product detail pages

GraphCMS offers a well-made, rock-solid, open source template for creating e-commerce websites, which can be found at this URL: https://github.com/GraphCMS/graphcms-commerce-starter.

We're not adopting this starter template because we want to fully understand the reasoning behind certain technical decisions and how to approach the problems that can appear during the development phase.

That said, we can focus on developing the first essential components for our storefront.

We will wrap our entire application in a Chakra UI box so that every page will have a similar layout. We can do that by opening the _app.js file and adding the following components:

import { Box, Flex, ChakraProvider } from '@chakra-ui/react';
function MyApp({ Component, pageProps }) {
  return (
<ChakraProvider>
  <Flex w="full" minH="100vh" bgColor="gray.100">
  ...