![post-image](/_next/image?url=https%3A%2F%2Fplaky.com%2Fblog%2Fwp-content%2Fuploads%2F2023%2F08%2FCode-and-documentation.jpg&w=3840&q=75)
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