� Make a Coffee

Generate hilariously overcomplicated coffee instructions in airplane safety card style using AI.

Live Demo | Portfolio

Demo

Example of "Chaos" style safety card - because coffee preparation should be as dramatic as possible.

<� Features

• 1-9 Step Coffee Instructions: Choose how many critical steps your coffee emergency requires
• AI-Powered Image Generation: Uses Hugging Face FLUX.1-schnell model to create safety-card style illustrations
• Three Illustration Styles:
  • 🎯 Simple: Clean stick figures, minimal safety card style
  • 🎨 Fun: Happy dangerous predators (sharks, bears, tigers!) making coffee
  • 🎲 Chaos: Wild experimental art, expect anything!
• PB&J Exercise Integration: Guided prompts emphasizing programming-level precision for better results
• Revise Instructions: Edit and regenerate individual steps without starting over
• Interactive Slideshow: Click through your generated steps one by one
• Airplane Safety Card View: See all steps in a classic emergency card grid layout
• Image Export: Download your coffee safety instructions as a high-quality PNG
• Light/Medium/Dark Roast Themes: Because even your UI should match your coffee preference
• Dev Mode: Debug view showing full AI prompts and configuration

=� Getting Started

Prerequisites

• Node.js (v18 or higher)
• A Hugging Face API key (get one at Hugging Face Settings)
  • Free tier available with generous rate limits
  • Uses FLUX.1-schnell model for fast, high-quality image generation

Installation

1. Clone the repository:

git clone git@github.com:emckenna/make-a-coffee.git
cd make-a-coffee

2. Install dependencies:

npm install

3. Create a .env.local file:

cp .env.example .env.local

4. Add your Hugging Face API key to .env.local:

HUGGINGFACE_API_KEY=your_api_key_here

5. Start both the frontend and API servers (in separate terminals):

# Terminal 1: Start the API server
npm run dev:api

# Terminal 2: Start the frontend
npm run dev

API Server Management:

npm run dev:api           # Start API server
npm run dev:api:restart   # Restart API server (picks up code changes)
npm run dev:api:stop      # Stop API server

6. Open http://localhost:5173 in your browser

=� Building for Production

npm run build

=� Deploying to Vercel

Quick Deploy:

vercel

Then add your HUGGINGFACE_API_KEY as an environment variable in your Vercel project settings.

For detailed deployment instructions, including API key setup, troubleshooting, and production configuration, see DEPLOYMENT.md.

<� Tech Stack

• Frontend: React + Vite
• Styling: Tailwind CSS
• AI: Hugging Face FLUX.1-schnell (with optional Gemini/DeepAI support)
• Image Export: html2canvas
• Deployment: Vercel

>� How It Works

1. Choose the number of steps (1-9) for your coffee instructions
2. Enter a description for each step (with PB&J-style precision guidance!)
3. Select your illustration style:
   • 🎯 Simple: Clean stick figures, minimal style
   • 🎨 Fun: Happy dangerous predators making coffee
   • 🎲 Chaos: Wild AI creativity, expect anything!
4. Click "Generate Emergency Coffee Instructions"
5. View your generated images in a slideshow
6. Want to tweak a step? Click "✏️ Revise" to edit and regenerate
7. Export as an airplane safety card grid
8. Download as a high-quality PNG image

AI Provider Configuration

The default provider is Hugging Face (free tier available). You can configure additional providers in src/config.js:

• Hugging Face (enabled): FLUX.1-schnell model - fast and reliable
• Gemini (disabled): Requires paid Google Cloud billing
• DeepAI (disabled): Requires paid Pro account

See .env.example for all available API key configurations.

🔧 Troubleshooting

Vercel Deployment Issues

If you encounter FUNCTION_INVOCATION_FAILED errors on Vercel:

The project uses a dual module system:

• Frontend (React/Vite): ES modules ("type": "module" in root package.json)
• API (Serverless Functions): CommonJS ("type": "commonjs" in api/package.json)

This setup is necessary because:

1. Vite requires ES modules for the frontend build
2. The serverless functions use CommonJS for better compatibility with Node.js packages

The api/package.json file overrides the root module type for the API directory only.

Local Development

To test the API locally:

npm run dev:api

This starts an Express server on port 3001 that mimics Vercel's serverless function environment.

Health Check

Visit /api/health on your deployed app to check:

• Environment variables are set correctly
• Provider modules are loading
• Node.js environment info

�� Warning

Following these instructions may result in actual coffee. Side effects include: caffeine jitters, increased productivity, and uncontrollable laughter.

=� License

MIT

>� Contributing

This is a fun side project, but PRs are welcome! Especially if they make it funnier.

<� Credits

Made with love (and excessive amounts of coffee) using Claude Code.