Fullstack Recipes

https://fullstackrecipes.com/recipes
Admin
Fullstack Recipes is a collection of setup guides and reusable skills for building AI-powered...
Tokens:212,482
Snippets:1,117
Trust Score:2.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install CLI Tools (Bash)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Installs the GitHub CLI for repository management and Vercel CLI for deployment. Ensure you have Homebrew and Bun installed.

```bash
# Install GitHub CLI
brew install gh

# Install Vercel CLI globally
bun add -g vercel
```

--------------------------------

### Start Development Server (Bash)

Source: https://fullstackrecipes.com/recipes/base-app-setup

This command initiates the development server for the project using Bun. It allows for live reloading and testing of the application during development. Ensure Bun is installed and configured in your project environment before running this command.

```bash
bun run dev

```

--------------------------------

### Deploy to Vercel (Bash)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Initiates the deployment of your Next.js application to Vercel. On the first run, it will guide you through project setup and linking.

```bash
# Deploy to Vercel (creates project on first run)
vercel
```

--------------------------------

### Using Bun for Package Management

Source: https://fullstackrecipes.com/recipes/base-app-setup

This section details the replacement of traditional package managers like npm, pnpm, and yarn with Bun for installation and script running. It highlights the commands to use for installation and script execution.

```bash
bun install
bun run <script>
```

--------------------------------

### Install Prettier Package

Source: https://fullstackrecipes.com/recipes/code-style-setup

Installs the Prettier code formatter as a development dependency using the Bun package manager. This command should be run in the project's root directory.

```bash
bun add -D prettier
```

--------------------------------

### Install Better Auth Package

Source: https://fullstackrecipes.com/recipes/better-auth-setup

Installs the `better-auth` package using the Bun package manager. This is the first step in integrating Better Auth into your Next.js project. Ensure Bun is installed and configured in your environment.

```bash
bun add better-auth
```

--------------------------------

### Usage Examples for Pino Logger

Source: https://fullstackrecipes.com/recipes/pino-logging-setup

Demonstrates how to use the configured Pino logger for various logging needs. Includes examples for basic info, warnings, error logging with stack traces, and adding contextual information to log messages. Supports log levels from trace to fatal.

```typescript
import { logger } from "@/lib/common/logger";

// Basic logging
logger.info("Server started", { port: 3000 });
logger.warn("Rate limit reached", { endpoint: "/api/chat" });

// Log errors with stack traces
logger.error(err, "Failed to process request");

// Add context
logger.info({ userId: "123", action: "login" }, "User logged in");
```

--------------------------------

### Start Development Server with Bun (Bash)

Source: https://fullstackrecipes.com/recipes/ai-sdk-setup

Command to start the development server using Bun. This command is typically used in a project configured with Bun for running development scripts. Ensure Bun is installed and the project has a 'dev' script defined in its package.json.

```bash
bun run dev
```

--------------------------------

### Install Resend Packages

Source: https://fullstackrecipes.com/recipes/resend-setup

Installs the necessary Resend package and `@react-email/components` for rendering email templates using Bun. This is a prerequisite for using Resend in your project.

```bash
bun add resend @react-email/components
```

--------------------------------

### Create GitHub Repository and Push (Bash)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Initializes a Git repository in the current directory, creates a new public repository on GitHub, sets the remote origin, and pushes the local code to the newly created repository.

```bash
# Create GitHub repository and push
gh repo create my-app --public --source=. --push
```

--------------------------------

### Public Landing Page Example (Next.js)

Source: https://fullstackrecipes.com/recipes/better-auth-protected-routes

This example illustrates how to create a public landing page for a Next.js application. It includes a welcome message and navigation links to 'Sign in' and 'Get started' pages. This page is accessible to all users and serves as the entry point before authentication. It utilizes Next.js Link component and UI components for buttons.

```tsx
import Link from "next/link";
import { Button } from "@/components/ui/button";

export default function HomePage() {
  return (
    <div className="min-h-dvh flex flex-col items-center justify-center gap-8 p-4">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold tracking-tight">
          Welcome to Your App
        </h1>
        <p className="text-xl text-muted-foreground max-w-md">
          Sign in to access your dashboard and start using the app.
        </p>
      </div>
      <div className="flex gap-4">
        <Link href="/sign-in">
          <Button variant="outline" size="lg">
            Sign in
          </Button>
        </Link>
        <Link href="/sign-up">
          <Button size="lg">Get started</Button>
        </Link>
      </div>
    </div>
  );
}
```

```tsx
import Link from "next/link";
import { Button } from "@/components/ui/button";

export default function HomePage() {
  return (
    <div className="min-h-dvh flex flex-col items-center justify-center gap-8 p-4">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold tracking-tight">
          Welcome to Your App
        </h1>
        <p className="text-xl text-muted-foreground max-w-md">
          Sign in to access your dashboard and start using the app.
        </p>
      </div>
      <div className="flex gap-4">
        <Link href="/sign-in">
          <Button variant="outline" size="lg">
            Sign in
          </Button>
        </Link>
        <Link href="/sign-up">
          <Button size="lg">Get started</Button>
        </Link>
      </div>
    </div>
  );
}
```

--------------------------------

### Install Pino and pino-pretty Logger Dependencies

Source: https://fullstackrecipes.com/recipes/pino-logging-setup

Installs the necessary Pino logging libraries. 'pino' is the core Node.js JSON logger, and 'pino-pretty' enhances development logs with human-readable, colorized output.

```bash
bun add pino pino-pretty
```

--------------------------------

### Install Neon MCP Server Globally

Source: https://fullstackrecipes.com/recipes/neon-drizzle-setup

Installs the Neon MCP server globally using your user API key. This command is essential for managing your Neon database instances. By default, it grants write access, but can be configured for read-only access for production environments.

```bash
bunx neonctl@latest init
```

--------------------------------

### Install Google SDK Provider (Bash)

Source: https://fullstackrecipes.com/recipes/index

Installs the official Google SDK package for use with the Vercel AI SDK. This facilitates integration with Google's AI models, such as Gemini. Requires appropriate Google Cloud credentials or API keys to be set in environment variables.

```bash
bun add @ai-sdk/google
```

--------------------------------

### Configure Bun Runtime on Vercel (JSON)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Specifies the Bun runtime version for the Vercel deployment. This ensures consistency between local development and deployment environments.

```json
{
  "bunVersion": "1.x"
}
```

--------------------------------

### Authenticate with GitHub and Vercel (Bash)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Logs you into GitHub and Vercel accounts using their respective CLIs. This is necessary for managing repositories and deploying applications.

```bash
# Login to GitHub
gh auth login

# Login to Vercel
vercel login
```

--------------------------------

### Install and Authenticate CLI Tools (Bash)

Source: https://fullstackrecipes.com/recipes/index

Provides commands to install necessary command-line interface tools for GitHub and Vercel, followed by authentication steps for both services. This is a prerequisite for managing code repositories and deploying applications to Vercel. It uses package managers like `brew` and `bun`.

```bash
# Install GitHub CLI
brew install gh

# Install Vercel CLI globally
bun add -g vercel
```

```bash
# Login to GitHub
gh auth login

# Login to Vercel
vercel login
```

--------------------------------

### Usage Example: Sending an Email

Source: https://fullstackrecipes.com/recipes/resend-setup

Demonstrates how to use the `sendEmail` helper function to send a transactional email. This example shows importing the function and calling it with a recipient, subject, and a React email component. Ensure that the `WelcomeEmail` component and the `sendEmail` function are correctly imported.

```typescript
import { sendEmail } from "@/lib/resend/send";

await sendEmail({
  to: "user@example.com",
  subject: "Welcome!",
  react: <WelcomeEmail name="John" />,
});
```

--------------------------------

### Add Database Scripts to package.json (JSON)

Source: https://fullstackrecipes.com/recipes/neon-drizzle-setup

Defines npm/bun scripts for common database operations: generating schemas, running migrations, and starting the Drizzle Kit studio. These scripts streamline the database workflow.

```json
{
  "scripts": {
    "db:generate": "bun run scripts/db/generate-schema.ts",
    "db:migrate": "drizzle-kit migrate",
    "db:studio": "drizzle-kit studio"
  }
}
```

--------------------------------

### Install Neon and Drizzle Packages (Bun)

Source: https://fullstackrecipes.com/recipes/neon-drizzle-setup

Installs the necessary packages for Neon and Drizzle ORM integration using the Bun package manager. It includes runtime dependencies like `drizzle-orm`, `pg`, and `@vercel/functions`, as well as development dependencies for tooling like `drizzle-kit` and type definitions.

```bash
bun add drizzle-orm pg @vercel/functions
bun add -D drizzle-kit @types/pg @next/env
```

--------------------------------

### Conditional Sign-in/Sign-up Buttons

Source: https://fullstackrecipes.com/recipes/better-auth-profile

Renders 'Sign in' and 'Get started' buttons based on authentication status. Uses React, Next.js Link, and a Button component. Appropriate for the initial state of a user session.

```jsx
return (
      <div className="flex items-center gap-2">
        <Link href="/sign-in">
          <Button variant="ghost" size="sm">
            Sign in
          </Button>
        </Link>
        <Link href="/sign-up">
          <Button size="sm">Get started</Button>
        </Link>
      </div>
    );
```

--------------------------------

### Set Up Next.js on Vercel with Bun

Source: https://fullstackrecipes.com/recipes/index

Guide for creating a Next.js app, initializing a GitHub repository, and deploying to Vercel with automatic deployments. It uses Bun as the package manager and runtime, configures Vercel for Bun, and sets up GitHub integration for continuous deployment.

```bash
# Install GitHub CLI
brew install gh

# Install Vercel CLI globally
bun add -g vercel

# Login to GitHub
gh auth login

# Login to Vercel
vercel login

bunx create-next-app@latest my-app --ts --tailwind --react-compiler --no-linter --src-dir --app --use-bun
cd my-app

# Create GitHub repository and push
gh repo create my-app --public --source=. --push

# Deploy to Vercel (creates project on first run)
vercel

# Connect Git for Automatic Deployments
vercel git connect

# Pull environment variables
bun run env:pull
```

```json
{
  "bunVersion": "1.x"
}
```

```json
{
  "scripts": {
    "env:pull": "vercel env pull .env.development --environment=development",
    "env:push": "vercel env push .env.development --environment=development"
  }
}
```

--------------------------------

### Add Bun Types for TypeScript (Bash)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Installs the necessary types for Bun to enhance TypeScript support within your Next.js project. This improves autocompletion and type checking.

```bash
bun add -D @types/bun
```

--------------------------------

### Set Up Prettier for Code Formatting

Source: https://fullstackrecipes.com/recipes/index

Configure Prettier for code formatting in a Next.js project using Bun. This recipe focuses on code formatting without including a linter like ESLint to simplify configuration. It includes installation, script additions to package.json, and optional VSCode extension setup.

```bash
bun add -D prettier
```

```json
{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "fmt": "prettier --write ."
  }
}
```

```bash
ext install esbenp.prettier-vscode
```

--------------------------------

### Track Environment Variable Access in Process.env

Source: https://fullstackrecipes.com/recipes/base-app-setup

Patches the global 'process.env' object to track which environment variables are accessed. It uses a Proxy to intercept property gets, adding any accessed string property (that doesn't start with '_') to a 'referencedEnvVars' set. This helps identify environment variables that are defined but not actually used by the application's configuration.

```typescript
const referencedEnvVars = new Set<string>();

function trackEnvAccess() {
  const originalEnv = process.env;
  const handler: ProxyHandler<NodeJS.ProcessEnv> = {
    get(target, prop) {
      if (typeof prop === "string" && !prop.startsWith("_")) {
        referencedEnvVars.add(prop);
      }
      return Reflect.get(target, prop);
    },
  };
  process.env = new Proxy(originalEnv, handler);
}
```

--------------------------------

### Create Next.js App with Bun (Bash)

Source: https://fullstackrecipes.com/recipes/nextjs-on-vercel

Initializes a new Next.js application with specified configurations: TypeScript, Tailwind CSS, React Compiler, no linter, src directory, App Router, and Bun as the package manager. Then navigates into the new project directory.

```bash
bunx create-next-app@latest my-app --ts --tailwind --react-compiler --no-linter --src-dir --app --use-bun
cd my-app
```

--------------------------------

### Install Workflow Packages with Bun

Source: https://fullstackrecipes.com/recipes/workflow-setup

Installs the core 'workflow' package and the '@workflow/ai' package using the Bun package manager. These packages are essential for setting up AI agent workflows.

```bash
bun add workflow @workflow/ai
```

--------------------------------

### Running Development Server (Bash)

Source: https://fullstackrecipes.com/recipes/stripe-sync

This command initiates the development server for the web application. It uses `bun dev` which, in turn, orchestrates the startup of both the Next.js development server and the Stripe webhook forwarder using `npm-run-all`.

```bash
# In apps/web directory
bun dev

# This runs (via npm-run-all):
# - bun dev:next    → Next.js dev server
# - bun dev:stripe  → Stripe webhook forwarder
```

--------------------------------

### Install Specific AI Provider SDKs (Bash)

Source: https://fullstackrecipes.com/recipes/ai-sdk-setup

Installs the SDK for a specific AI provider. Options include OpenAI, Anthropic, and Google. This allows direct integration with these services.

```bash
# OpenAI
bun add @ai-sdk/openai

# Anthropic
bun add @ai-sdk/anthropic

# Google
bun add @ai-sdk/google
```

--------------------------------

### AI Coding Agent Configuration Guidelines

Source: https://fullstackrecipes.com/recipes/base-app-setup

This markdown file outlines patterns and coding guidelines for AI coding assistants. It emphasizes organizing code into self-contained libraries within src/lib/ and preferring native web platform APIs over abstractions.

```markdown
# Patterns

- Everything is a library: Organize features and domains as self-contained folders in `src/lib/` (e.g., `chat`, `ai`, `db`). Co-locate schema, queries, types, and utilities together. Components go in `components/<feature>/`.
- Use the web platform: Prefer native APIs and standards. Avoid abstractions that hide what the code actually does.

# Coding Guidelines


```

--------------------------------

### Sign Up User (TypeScript)

Source: https://fullstackrecipes.com/recipes/better-auth-setup

Demonstrates how to sign up a new user with email and password using the client-side authentication hooks. This function takes user details like email, password, and name as input. It requires the 'signUp' function to be imported from '@/lib/auth/client'.

```typescript
import { signUp } from "@/lib/auth/client";

await signUp.email({
  email: "user@example.com",
  password: "securepassword",
  name: "John Doe",
});
```

--------------------------------

### Install Workflow Development Kit Packages (Bash)

Source: https://fullstackrecipes.com/recipes/ai-agent-workflow

Installs the necessary packages for the Workflow Development Kit and its AI components using Bun. This is the initial setup step for enabling durable AI agent workflows.

```bash
bun add workflow @workflow/ai

```

--------------------------------

### Database Configuration Validation Error Example (TypeScript)

Source: https://fullstackrecipes.com/recipes/base-app-setup

This example shows the expected error message when a required server-side environment variable (DATABASE_URL) is missing for the 'Database' configuration. It highlights the `InvalidConfigurationError` and the specific field that needs to be defined.

```typescript
Error [InvalidConfigurationError]: Configuration validation error for Database!
Did you correctly set all required environment variables in your .env* file?
 - server.url (DATABASE_URL) must be defined.

```

--------------------------------

### Initialize and Load Environment Variables

Source: https://fullstackrecipes.com/recipes/base-app-setup

Sets the Node.js environment, loads configuration from .env files (including development-specific ones if in development mode), and logs the loaded environment files. It uses `loadEnvConfig` and tracks environment variable access.

```typescript
const environment = args.environment ?? process.env.NODE_ENV ?? "development";
  (process.env as Record<string, string>).NODE_ENV = environment;
  console.log(dim(`  Environment: ${environment}\n`));

  // Load env files
  // Second param `dev` tells loadEnvConfig to load .env.development files
  const isDev = environment === "development";
  console.log(dim("  Loading environment files..."));

  const loadedEnvFiles: string[] = [];
  const { combinedEnv, loadedEnvFiles: files } = loadEnvConfig(
    projectDir,
    isDev,
  );

  for (const file of files) {
    loadedEnvFiles.push(file.path);
    console.log(dim(`    ✓ ${path.relative(projectDir, file.path)}`));
  }

  if (loadedEnvFiles.length === 0) {
    console.log(dim("    No .env files found"));
  }

  console.log("");

  // Start tracking env access before importing configs
  trackEnvAccess();
```

--------------------------------

### Install AI Elements (Bash)

Source: https://fullstackrecipes.com/recipes/ai-sdk-setup

Installs the AI Elements UI components, which provide pre-built components for AI interfaces such as chat bubbles, message lists, and streaming text displays.

```bash
bunx shadcn@latest add @ai-elements/all
```

--------------------------------

### Install Anthropic SDK Provider (Bash)

Source: https://fullstackrecipes.com/recipes/index

Installs the official Anthropic SDK package for use with the Vercel AI SDK. This enables integration with Anthropic's Claude models. Requires setting ANTHROPIC_API_KEY in environment variables.

```bash
bun add @ai-sdk/anthropic
```

--------------------------------

### Install OpenAI SDK Provider (Bash)

Source: https://fullstackrecipes.com/recipes/index

Installs the official OpenAI SDK package for use with the Vercel AI SDK. This allows integration with OpenAI's language models. Requires setting OPENAI_API_KEY in environment variables.

```bash
bun add @ai-sdk/openai
```

--------------------------------

### Configure Vercel AI Gateway API Key (Environment Variables)

Source: https://fullstackrecipes.com/recipes/base-app-setup

Sets up authentication for Vercel AI Gateway by defining API keys in the environment. Either AI_GATEWAY_API_KEY or VERCEL_OIDC_TOKEN must be set.

```env
AI_GATEWAY_API_KEY="your-api-key-here"
VERCEL_OIDC_TOKEN="your-oidc-token"
```

--------------------------------

### Install AI SDK Packages (Bash)

Source: https://fullstackrecipes.com/recipes/ai-sdk-setup

Installs the Vercel AI SDK and its React integration packages. The `@beta` tag is used to install the latest v6 features.

```bash
bun add ai@beta @ai-sdk/react@beta
```
Tokens:
Raw