Gatsby Starter Pizza

Starter designed for delivery business

Installation

gatsby new project-name https://github.com/gatsbytemplates/gatsby-starter-pizza.git

Or manually:

Download
Unzip
Install deps:

npm i

Features

Built-in cart with cache
Order form with GetForm integration
Cart animation

Items editing

All pizzas located in content folder, you can edit it as mdx files. Currently used only info from frontmatter

Styles customization

This starter using tailwind css inside of styled components powered by Emotion. This was made possible by twin.macro

Example:

import tw from 'twin.macro';
import styled from '@emotion/styled';

const Date = styled.div`
  ${tw`
    uppercase px-6 font-body
  `}
  color: ${(p) => p.theme.colors.light};
`;

export default Date;

inside ${tw``} you define tailwind styles, and outside you can use ordinary styled components style, including ThemeUI pre-defined colors.

For tailwind classes customization, use tailwind.config.js* in root of your project. Refer to official tailwind docs. Don't forget to import gatsby-starter-pizza tailwind config.

*changes of this file my require reload of gatsby development server(due to current twin.macro limitations)

Colors and fonts customization

All colors and fonts are defined in "tailwind.config.js" in root of this starter. To add Google Fonts, go to gatsby-config.js, find "gatsby-plugin-prefetch-google-fonts" section and edit it.

API's integration

In order to work with GetForm you need to register there and get your personal API keys. Then, add them to your .env.development :

GETFORM_API_KEY="SoMe-KeY"

Troubleshooting:

When removing or changing item's name, ensure that you manually removed "cart" item from localStorage

TODO's:

separate pages for each item with complete description and more photos
integration with e.g. Firebase
auth with personal account page
order history
more animations
headless CMS integration

gatsbytemplates/gatsby-pizza-starter