Design

If you want to build a product you have to start with a design template that will at the very least include some information that your designers can action. I have embedded the figma that I use for every project below with some tips on how to get started.

1. Start by choosing your fonts and logos

2. Next you want to update your fonts in your project by navigating to FrontEnd/app/layout.tsx and update your fonts with the ones you have chosen in your design.

3. Once your fonts have been updated. Create your extentions for the fontFamily utility class in the tailwind.config under Frontend/tailwind.config.ts make sure to use the correct variable naming: var(--accent-font).

4. Next step is to update your theme colors based off of the design document you created in Figma. You can use the DaisyUI Theme Generator and randomize the colorscheme to if you don't care about coloring alongside the Gradient Generator to get the additional bases that tailwind doesn't supply.

Colors

Tailwind

FastPocket uses tailwind and therefore is extendable to suite your needs see Tailwind - Customizing Colors for more information.

DaisyUI

In order to make theming easy FastPocket uses DaisyUI and takes the decisions around color away from you so as to speed up the process of theming and styling to see more about how the theme is structured please see Daisy UI - Colors for more information.

JS Utility

If you want to use your colors FastPocket provides in JS utilities to quickly style based on your theme. You can use useTheme() to retreive your theme and then select the DaisyUI style for that theme.

In this way you get a dynamic color that you can use and reuse in JS

  const { theme } = useTheme();
  const color = colors[theme ?? "light"]["base-content"];

Fonts

FastPocket includes font styling out of the box using next-font. In its simplist form here is how you can add google fonts to your project. Arimo and Raleway are arbitrary choices based on the Fast Pocket styling you can swap those out to what you need.

import { Arimo, Raleway } from "next/font/google";

const raleway = Raleway({
  variable: "--heading-font",
  subsets: ["latin"],
});

const arimo = Arimo({
  variable: "--body-font",
  subsets: ["latin"],
});
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
    <html
      lang="en"
      className={`h-full ${raleway.variable} ${arimo.variable}`}
      suppressHydrationWarning
   / >)

FastPocket utilize CSS to set the header fonts using CSS variables this can be customized or removed as needed

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
}

FastPocket also adjust the prose in Tailwind to automatically apply the correct fonts based on blog content

      typography: {
        DEFAULT: {
          css: {
            p: {
              fontFamily: 'var(--body-font)'
            },
            h1: {
              fontFamily: 'var(--heading-font)'
            },
            h2: {
              fontFamily: 'var(--heading-font)'
            },
            h3: {
              fontFamily: 'var(--heading-font)'
            },
            h4: {
              fontFamily: 'var(--heading-font)'
            },
            h5: {
              fontFamily: 'var(--heading-font)'
            },
            h6: {
              fontFamily: 'var(--heading-font)'
            }
          }
        }
      }

Fly.io

Console

If you want to access the console for one of your containers you can use fly console

Deploy

If you want to be able to deploy after the initial run you can use fly deploy

Stripe

Live Setup

If you want to setup Stripe for live support you need to create a restricted key

Make sure you set the following settings on the restricted key

Pricing pitfalls

Must setup your checkout page on stripe

Must enable all the settings on your restricted stripe key for write

Troubleshooting

Check the error logs on stripe. They can be found under Developers > Events

Check the error logs on the pocketbase instance

Documentation