Mini Memes 🎨

A Farcaster Mini App for creating, sharing, and minting memes as NFTs. Built with Next.js, Fabric.js, and integrated with OnchainKit/MiniKit for seamless Web3 functionality.

Features

• 🖼️ Meme Creation: Choose from popular meme templates and add custom text
• ✏️ Advanced Editor: Drag, resize, and position text with Fabric.js canvas editor
• 🔗 Farcaster Integration: Share memes directly to your Farcaster feed
• 🪙 Zora NFT Minting: Create and mint memes as Zora Coins (ERC-1155 NFTs) on Base blockchain
• 🚀 Token Launches: Launch meme tokens with Clanker integration
• 💾 Profile System: Save and manage your created memes
• 📱 Mobile Optimized: Fully responsive design for mobile and desktop

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS, Framer Motion
• Canvas: Fabric.js for meme editing
• State Management: Zustand
• Web3:
  • OnchainKit/MiniKit for Farcaster integration
  • Wagmi & Viem for wallet connections
  • Zora Coins SDK for creating ERC-1155 NFT collections
  • Clanker SDK for token launches
• Storage:
  • Vercel Blob for image storage
  • Supabase for meme templates and user data
  • Upstash Redis for notifications

Getting Started

1. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

2. Set up environment variables:

Create a .env.local file with the following variables:

# Frame Configuration
NEXT_PUBLIC_URL=https://mini-memes.xyz
NEXT_PUBLIC_VERSION=1.0.0
NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=mini-memes
NEXT_PUBLIC_ICON_URL=/favicon.png
NEXT_PUBLIC_IMAGE_URL=/opengraph.png
NEXT_PUBLIC_SPLASH_IMAGE_URL=/app.jpg
NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR=#7c3aed

# Farcaster Account Association
FARCASTER_HEADER=
FARCASTER_PAYLOAD=
FARCASTER_SIGNATURE=

# Redis for Notifications
REDIS_URL=
REDIS_TOKEN=

# Supabase for Data Storage
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

# Vercel Blob Storage
BLOB_READ_WRITE_TOKEN=

# Optional: Allowed FIDs for Save Feature
NEXT_PUBLIC_ALLOWED_SAVE_FIDS=123,456,789

# Zora Platform Referrer (earns referral fees)
NEXT_PUBLIC_ZORA_REFERRER=0x2CD1353Cf0E402770643B54011A63B546a189c44

You can regenerate the FARCASTER Account Association environment variables by running npx create-onchain --manifest in your project directory.

3. Start the development server:

npm run dev

Architecture

Core Components

1. TemplateGallery (components/TemplateGallery.tsx)

   • Displays available meme templates in a responsive grid
   • Handles template selection and navigation

2. MemeBuilder (components/MemeBuilder.tsx)

   • Main orchestrator for meme creation
   • Manages text editing, sharing, and minting features
   • Zora Integration: Handles the handlePostToZora() function for NFT minting
   • Integrates with Farcaster and Clanker for additional features

3. EditorCanvas (components/EditorCanvas.tsx)

   • Fabric.js canvas implementation
   • Handles meme template background and text overlays
   • Responsive canvas sizing

API Routes

• /api/upload-meme: Uploads generated memes to Vercel Blob storage
• /api/user-memes: CRUD operations for user's saved memes
• /api/meme-template/[id]: Fetches individual meme templates
• /api/launch-token: Records token launches via Clanker
• /api/notify & /api/webhook: Farcaster notification handling

State Management

• useMemeStore (stores/use-meme-store.ts): Global meme creation state
• useEditorStore (stores/useEditorStore.ts): Canvas editor state

Data Flow

1. User selects template from gallery → Navigates to /template/[id]
2. Template loads in EditorCanvas with predefined text boxes
3. User adds/edits text using Fabric.js interactive controls
4. Generated meme can be:
   • Shared to Farcaster with compose cast action
   • Minted as Zora Coin NFT (see Zora Integration below)
   • Launched as token via Clanker
   • Saved to user profile (if FID is allowed)

Zora Integration 🌟

Mini Memes leverages Zora's Coins SDK to enable users to mint their memes as NFT collections on Base. Here's how it works:

Minting Process

1. "Coin It" Button: Users click this button after creating their meme
2. Metadata Creation: The app uploads meme metadata (name, symbol, description, image) to IPFS
3. Smart Contract Deployment: Using createCoin() from Zora SDK, we deploy a new ERC-1155 NFT collection
4. Success Modal: Users receive a shareable Zora link to their minted collection

Code Implementation

// From components/MemeBuilder.tsx
import { createCoin } from '@zoralabs/coins-sdk';

const result = await createCoin(
  {
    name: data.name,
    symbol: data.symbol,
    uri: metadataUri,
    payoutRecipient: walletAddress,
    platformReferrer: '0x2CD1353Cf0E402770643B54011A63B546a189c44',
    chainId: 8453, // Base chain ID
  },
  walletClient,
  publicClient,
);

Key Benefits of Zora Coins

• Low Cost: Affordable minting on Base L2
• Creator Rewards: Built-in royalty mechanism for meme creators
• Social Features: Collections are shareable and tradeable on Zora.co
• Composability: NFTs can be used in other Base/Ethereum applications

Zora Links

After minting, users receive a link like: https://zora.co/coin/base:0x...

This allows them to:

• View their NFT collection
• Share with others
• Manage minting settings
• Track collection activity

Technical Details

• Chain: Base (Chain ID: 8453)
• Token Standard: ERC-1155 (multi-token standard)
• Metadata Storage: IPFS via Pinata
• UI Components:
  • CoinModal.tsx: Form for NFT details (name, symbol, description)
  • ZoraSuccessModal.tsx: Success state with share functionality
• Platform Fee: 0.000333 ETH per mint (Zora protocol fee)

Development

Adding New Meme Templates

1. Add template image to public/meme-bg/
2. Insert template record in Supabase meme_templates table:

   INSERT INTO meme_templates (template_id, image_url, text_boxes)
   VALUES (
     'template-name',
     '/meme-bg/template-image.jpg',
     '[]' -- JSON array of text box configurations
   );

Customizing Text Defaults

Edit lib/fabric-defaults.ts to change default text properties:

export function getDefaultTextBoxProps() {
  return {
    fontSize: 32,
    fontFamily: 'Impact',
    fill: 'white',
    stroke: 'black',
    strokeWidth: 2,
    // ... other properties
  };
}

Deployment

1. Deploy to Vercel:

   vercel

2. Set environment variables in Vercel dashboard

3. Configure custom domain (optional)

4. Share your frame URL in Farcaster!

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Learn More

• MiniKit Documentation
• OnchainKit Documentation
• Farcaster Frames
• Fabric.js Documentation
• Zora Coins SDK - Used for minting meme NFTs
• Clanker SDK

Support

For issues, questions, or suggestions, please open an issue on GitHub.