/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; const BREW_METHODS = { pourOver: { name: "V60 Pour Over", description: "A precise, manual brewing method using a V60 dripper that allows full control over extraction", shortDescription: "Precision V60 brewing technique that highlights delicate flavor notes with meticulous extraction control.", equipment: [ "Hario V60 ceramic dripper", "V60 paper filters", "Gooseneck kettle", "Digital scale", "Burr grinder", "Brewing vessel/carafe", ], steps: [ "Heat water to 202-205°F (94-96°C)", "Grind light roast beans to medium-fine consistency", "Place V60 on brewing vessel", "Insert paper filter and rinse thoroughly with hot water", "Discard rinse water and place vessel on scale", "Add 22g of ground coffee, create a small divot in center", "Start timer, pour 44ml water for initial bloom", "Gently swirl to ensure even saturation", "Wait 30-45 seconds", "Pour remaining water in slow, spiral motion", "Maintain consistent water level, avoid agitating grounds", "Total brew time: 2.5-3 minutes", "Aim for a steady, controlled pour with consistent flow rate", ], ratio: "1:16-1:17 (coffee to water)", grindSize: "Medium-fine (sea salt texture)", waterMeasurement: "12-14 oz (360-420 ml)", waterTemp: "202-205°F (94-96°C)", }, chemexPourOver: { name: "Chemex Pour Over", description: "An elegant, manual brewing method using a distinctive glass carafe that produces a clean, bright cup", shortDescription: "Classic pour-over method using a beautiful glass carafe, producing exceptionally clean and nuanced coffee.", equipment: [ "Chemex glass brewer", "Chemex bonded filters", "Gooseneck kettle", "Digital scale", "Burr grinder", "Wooden collar/handle", ], steps: [ "Heat water to 195-205°F (90-96°C)", "Fold Chemex filter into quadrant with three layers on one side", "Place filter in Chemex with three-layer side against spout", "Rinse filter thoroughly with hot water to remove paper taste", "Discard rinse water and place Chemex on scale", "Grind medium roast beans to medium coarseness", "Add 30g of ground coffee", "Start timer, pour 60ml water for initial bloom", "Gently swirl to ensure even saturation", "Wait 45 seconds", "Continue pouring water in slow, circular motion", "Maintain consistent water level", "Total brew time: 4-5 minutes", "Allow all water to drain through filter before serving", ], ratio: "1:15-1:16 (coffee to water)", grindSize: "Medium (kosher salt texture)", waterMeasurement: "16-18 oz (480-540 ml)", waterTemp: "195-205°F (90-96°C)", }, frenchPress: { name: "French Press", description: "A full-immersion brewing method that produces a rich, full-bodied coffee", shortDescription: "Immersive brewing technique that creates a robust, full-bodied coffee with rich, intense flavors.", equipment: [ "French press", "Coarse coffee grinder", "Kettle", "Digital scale", "Wooden spoon", ], steps: [ "Boil fresh, filtered water", "Coarsely grind coffee beans", "Add ground coffee to French press", "Pour hot water over grounds", "Stir gently to ensure even saturation", "Place lid on top, but do not plunge", "Let steep for 4 minutes", "Slowly press plunger down", "Serve immediately to prevent over-extraction", ], ratio: "1:15 (coffee to water)", grindSize: "Coarse (breadcrumb texture)", waterMeasurement: "12 oz (360 ml)", waterTemp: "200°F (93°C)", }, coldBrew: { name: "Cold Brew", description: "A smooth, low-acid brewing method using cold water extraction", shortDescription: "Slow-steeped brewing technique that produces a smooth, less acidic coffee with natural sweetness.", equipment: [ "Large jar or pitcher", "Fine mesh strainer", "Cheesecloth or paper filter", "Coarse coffee grinder", ], steps: [ "Use coarse ground coffee", "Combine coffee and cold water in 1:4 ratio", "Stir to ensure even saturation", "Cover and refrigerate", "Steep for 12-24 hours", "Strain through fine mesh filter", "Dilute with water or milk if desired", "Serve over ice", ], ratio: "1:4 (coffee to water)", grindSize: "Extra coarse (rock salt texture)", waterMeasurement: "32 oz (960 ml)", waterTemp: "Cold water (refrigerator temperature)", }, aeropress: { name: "AeroPress", description: "A quick, versatile brewing method producing clean, smooth coffee", shortDescription: "Compact, fast brewing method that creates a clean, smooth cup with minimal bitterness.", equipment: [ "AeroPress", "AeroPress filters", "Kettle", "Digital scale", "Fine to medium grinder", ], steps: [ "Heat water to just below boiling", "Grind coffee to fine-medium consistency", "Insert filter into AeroPress cap", "Rinse filter with hot water", "Add ground coffee", "Pour hot water over grounds", "Stir for 10 seconds", "Insert plunger and press down slowly", "Total brew time: 1-2 minutes", ], ratio: "1:15 (coffee to water)", grindSize: "Fine to medium (table salt texture)", waterMeasurement: "8 oz (240 ml)", waterTemp: "195-205°F (90-96°C)", }, }; function App() { const [selectedMethod, setSelectedMethod] = useState(null); return (

Coffee Brewing Guide

{selectedMethod ? (

{selectedMethod.name}

{selectedMethod.shortDescription}

Coffee Ratio

{selectedMethod.ratio}

Grind Size

{selectedMethod.grindSize}

Water Measurement

{selectedMethod.waterMeasurement}

Water Temperature

{selectedMethod.waterTemp}

Equipment

{item}

Brewing Steps

{step}

) : (

Select a brewing method to view details and instructions

)}

); } function client() { // Ensure the DOM is fully loaded before rendering if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", () => { const rootElement = document.getElementById("root"); if (rootElement) { createRoot(rootElement).render(); } else { console.error("Root element not found"); } }); } else { const rootElement = document.getElementById("root"); if (rootElement) { createRoot(rootElement).render(); } else { console.error("Root element not found"); } } } // Only run client-side code in a browser environment if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Coffee Brewing Guide

`, { headers: { "content-type": "text-html" }, }, ); }

coffeeBrewApp

Versions

v0