- Replace vmsg WASM encoder with native MediaRecorder API (WebM/Opus)
to fix empty MP3 files causing OpenAI Whisper 400 errors
- Add minimum recording duration (2s) and file size (5KB) guards
- Add MinIO S3 storage integration for recipe images and audio
- Add /uploads/* API route that proxies files from MinIO with local fallback
- Save audio locally first for transcription, then upload to MinIO
(fixes ECONNREFUSED when backend tried to fetch its own public URL)
- Add docker-compose.prod.yml, nginx-prod.conf, frontend Dockerfile
- Frontend Dockerfile: no-cache headers on index.html, long cache on hashed assets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Problem reported: user cancelled their subscription via the generic
'Gérer' portal, but the backend still showed the old subscription.
Root cause: stripe listen wasn't running, so the
customer.subscription.updated webhook never reached the server. The
Profile page was only reading from the DB (getSubscription), so it
stayed stale forever.
Fix: call stripeService.syncSubscription() alongside getSubscription()
at mount time. The fast DB read still happens first (instant display),
then the Stripe API call updates the state if anything has drifted.
Also add a window.addEventListener('focus', ...) listener that re-syncs
every time the user tabs back to the app — handles the common pattern
of opening Stripe portal in a new tab, doing something, then coming
back.
This makes the Profile self-healing even without a webhook setup in dev.
Production should still run the webhook for other apps/users, but this
fallback ensures individual users see the truth on their next visit.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Before: 'Gérer l'abonnement' opened the generic Customer Portal. If the
user cancelled, the portal's 'return_url' was just a button label —
nothing auto-redirected back to Freedge, so the user was stranded on
billing.stripe.com after clicking 'Cancel'.
Now: dedicated 'Annuler' button on the Profile SubscriptionCard that
calls a new backend endpoint POST /stripe/portal/cancel. This creates
a portal session with flow_data.type = 'subscription_cancel' deep-linked
to the user's active subscription, plus after_completion.type = 'redirect'
so Stripe automatically redirects to /subscription/cancelled when the
cancellation is confirmed.
New page /subscription/cancelled:
- Animated heart badge (spring + pulsing halo)
- 'À bientôt, on l'espère' title
- Info box showing the period-end date (fetched via sync on mount)
so the user knows they still have access until the end of the
already-paid period
- Re-engagement message + 'Retour aux recettes' / 'Voir les plans' CTAs
- On mount: calls /stripe/sync so the DB is updated immediately
(doesn't wait for the customer.subscription.updated webhook)
Profile SubscriptionCard paid-state footer now has two buttons side by
side: 'Gérer' (outline) and 'Annuler' (ghost with red hover).
Backend verified: Stripe SDK v12 supports flow_data.after_completion.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Problem: if stripe listen is not running (dev) or the webhook secret is
misconfigured, a successful checkout leaves the user stuck on the free
plan in the DB even though Stripe knows they're subscribed.
Solution: 3 recovery mechanisms.
1. Backend: POST /stripe/sync (auth required)
Fetches the current user's subscriptions from Stripe by customer ID,
picks the most recent active/trialing/past_due one, and applies it to
the User row via the same applySubscriptionToUser helper used by the
webhook. If no active sub exists, downgrades to free. Returns the
current plan state.
2. Frontend: CheckoutSuccess now calls /stripe/sync first (instant,
reliable) before falling back to polling /stripe/subscription. This
fixes the 'just paid but still free' bug even with no webhook setup.
3. Frontend: 'Rafraîchir' button on the Profile free-plan upgrade banner
(ghost style with RefreshCw spinning icon). Tooltip hints at its
purpose. Users who paid but see the free state can click it to
self-heal in one click.
4. Backend script: scripts/sync-subscription.ts
- npm run stripe:sync -- user@example.com (sync one user by email)
- npm run stripe:sync -- --all (sync every user with a
stripeId, useful after
a prod webhook outage)
Colored output with ✓ / ✗ / ↷ status per user.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Radix Checkbox renders a <button>, so wrapping it inside our own tile
<button> violated HTML nesting rules and blocked the click from reaching
the tile handler. The visual state (orange border + bg) already
indicates selection — drop the Checkbox entirely and add aria-pressed
for accessibility. Also bump vertical padding and add an active scale
for tactile feedback.
Backend:
- Prisma: add stripeSubscriptionId, subscriptionStatus, priceId,
currentPeriodEnd to User + migration SQL
- plugins/stripe.ts: getPlans catalog with env-based price IDs
- server.ts: raw body JSON parser for webhook signature verification,
skip rate limit on /stripe/webhook
- types/fastify.d.ts: declare rawBody on FastifyRequest
- routes/stripe.ts (new):
- GET /stripe/plans public
- GET /stripe/subscription user status
- POST /stripe/checkout hosted Checkout Session, lazy-creates
customer, dynamic payment methods, promo codes enabled
- POST /stripe/portal Billing Portal session
- POST /stripe/webhook signature verified, handles
checkout.session.completed, customer.subscription.*,
invoice.payment_failed. Resolves user by clientReferenceId,
metadata.userId, or stripeId fallback
- .env.example + README: Stripe setup, stripe CLI, test cards
Frontend:
- api/stripe.ts typed client (getPlans, getSubscription,
startCheckout, openPortal)
- pages/Pricing.tsx: 3-card grid (free/essentiel/premium) with
popular badge, current plan indicator, gradient popular card
- pages/CheckoutSuccess.tsx: animated confirmation with polling on
/stripe/subscription until webhook activates plan
- pages/Profile.tsx: SubscriptionCard above tabs — free users see an
upgrade banner, paid users see plan + status + next billing date
+ 'Gérer l'abonnement' button opening Customer Portal
- components/header.tsx: 'Tarifs' link in nav
- App.tsx: /pricing (public) and /checkout/success (protected) routes
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Full rewrite of /profile with a cleaner layout and nicer polish.
Layout:
- Removed the sidebar 'user info' card; replaced with a horizontal hero
at the top: avatar (with premium badge overlay), name, email, logout
button, and 3 badges (plan, member since, recipe count)
- Tabs stretched full-width (no more 1/3 sidebar + 2/3 content split)
- Removed the 'Mes recettes' section from the bottom (redundant with
/recipes list page)
Hero:
- 24-28 Avatar with gradient fallback and ring-4 separator
- Premium crown icon overlay (Sparkles badge) if subscription != 'free'
- Badges: plan tier, member since (localized French date), recipe count
- Logout button moved up here, styled as ghost with red hover
Cuisine tab (the main improvement):
- Diet is now a 4-button segmented control instead of a native <select>
- Max time and servings inputs have suffix labels ('min', 'pers.')
- Equipment checkboxes replaced by visual tile buttons with emoji
icons, 2-col mobile / 4-col desktop, selected state = orange border +
bg. Hidden actual checkbox for accessibility.
- 'Actif' badge in the card header when any pref is set
- Rounded xl inputs (h-11), brand gradient submit button
Other tabs (Profil/Email/Sécurité):
- Consistent visual language: h-11 rounded-xl inputs, h-12 brand
gradient buttons, bolder labels
- Email tab shows current email in the description
- Improved placeholders
Alerts:
- Custom inline alerts with AnimatePresence, auto-dismiss after 4s for
success, dismissible X button, CheckCircle2/AlertCircle icons
- No more shadcn Alert component (simpler + branded colors)
Danger zone:
- Dedicated bordered section at the bottom with icon + explanation
- Delete button opens a proper Dialog (replaces prompt() hack)
- Dialog asks for password, has Cancel/Delete buttons
Mobile polish:
- Hero stacks avatar on top, centered
- Tab triggers show icon-only on mobile, icon+label on sm+
- All 4 diet buttons fit in 2 cols on mobile
- Equipment tiles also 2 cols on mobile
- Logout button full-width on mobile
Removed all unused imports: AvatarImage, Separator, CardFooter, Alert,
AlertTitle, AlertDescription. Cleaned up handlers that weren't needed
(inline setState in onChange).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The page had 2 stacked headers (its own + MainLayout), was capped at
max-w-md which wasted desktop space, and had cheap-looking dashed amber
borders. Full rewrite with 4 clean states.
State machine: idle -> recording -> review -> processing
IDLE state:
- Brand pill 'Nouvelle recette' with Wand2 icon
- Big H1 with 'ton frigo' in warm-gradient
- Subtitle explaining the chef Antoine
- User preferences rendered as chips (vegan, allergies, max time,
cuisine) loaded from /users/profile. Each chip is a Badge with
backdrop-blur, + a 'Modifier' chip linking to /profile. Chips only
appear if the user actually set preferences.
- Giant centered mic button (112-128px) with:
- 3 concentric pulsing rings (border-2, staggered 0.6s delays)
- Gradient from-orange-500 to-amber-500
- shadow-2xl + orange glow
- ring-4 ring-white for separation from background
- Scale 1.04/0.94 on hover/tap
- Keyboard shortcut hint (Space) shown on md+
- Rotating tip card below with Lightbulb icon (4 tips cycling every 4.5s)
RECORDING state:
- Pulsing red dot + 'ENREGISTREMENT' label
- 7xl monospaced tabular timer
- Synthetic 20-bar waveform animating (each bar randomized
height/duration for organic feel)
- Large red stop button (80px) with Square icon
- Keyboard shortcut hint
REVIEW state:
- Spring-animated green checkmark badge
- H2 'Tout est bon ?' + subtitle
- Audio player card with:
- Circular play/pause button (brand gradient)
- 32-bar static waveform (deterministic sin/cos pattern)
- Trash button
- Hidden <audio> controlled via id
- File size in KB
- Two buttons: 'Recommencer' (outline) + 'Créer ma recette' (brand
gradient, ChefHat icon that rotates -8deg on hover)
PROCESSING state: (kept from previous version, slightly enlarged to
60-72 and using the new gradient halo)
Bonus:
- Space bar shortcut: starts/stops recording when not focused on input
- Remove the duplicate sticky header
- 'Mes recettes' back button + 'Préférences' link in top bar
- max-w-3xl centered layout, works from mobile to desktop
- All imports cleaned up (no more KitchenIllustration, Sheet, Card,
useMobile, cn, Info, showTips, isRecorderLoading)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- ui/shimmer.tsx: reusable shimmer placeholder
- recipe-card-skeleton.tsx: skeleton grid for loading states
- CookingLoader: rebuilt as floating chef hat with orbiting sparkles
- RecipeDetailLoader: now a proper skeleton of the detail page
- PageTransition: smooth fade+lift on route change
- index.css: custom keyframes (shimmer, float, glow-pulse), thin
scrollbars, :focus-visible, safe-area utilities
- RecipeList: skeleton grid, header with count, polished tabs,
hover lift on cards, spring FAB on mobile
- Header: scroll-aware blur/shadow, animated active underline,
auto-close mobile menu on navigation
- MainLayout: ambient blurred blobs in background, warm gradient
- Home hero: gradient pill badge with wobbling Sparkles,
CTA with sliding sheen
- Login/Register buttons: brand gradient, inline spinners
- Profile: skeleton loading state instead of plain spinner
- RecipeForm streaming: glow halo behind image, blur-to-sharp reveal
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Backend:
- Prisma: add user preferences (dietaryPreference, allergies, maxCookingTime,
equipment, cuisinePreference, servingsDefault) + migration SQL.
Also make stripeId nullable so signup works without Stripe.
- prompts.ts: buildUserPrompt now takes a BuildPromptOptions with preferences.
Injects strong, explicit constraints in the user message (vegan rules,
allergy warnings, time limits, equipment availability, cuisine hints).
- recipe-generator.ts: new streamRecipe() async generator. Streams OpenAI
chat completion with json_schema strict mode, parses the growing buffer
to detect 'titre' and 'description' early, yields typed events:
{ type: 'delta' | 'title' | 'description' | 'complete' }
Final event includes the parsed StructuredRecipe + cost log.
- recipes.ts route: new POST /recipes/create-stream returning SSE:
event: progress { step }
event: transcription{ text }
event: title { title } <- triggers parallel image gen
event: description { description }
event: recipe { recipe }
event: image { url }
event: saved { id }
event: done
Heartbeat every 15s to prevent proxy timeouts. Image generation is
kicked off the moment the title is extracted, running in parallel with
the rest of the recipe stream. Legacy POST /recipes/create still works
and now also passes user preferences.
- users.ts route: GET /profile now returns preferences (equipment
deserialized from JSON). New PUT /users/preferences with validation
(diet enum, time 5-600, servings 1-20, equipment array -> JSON).
- ai.ts plugin: generateRecipe signature extended to accept preferences.
Frontend:
- api/recipe.ts: createRecipeStream() async generator that consumes SSE
via fetch + ReadableStream + TextDecoder (EventSource can't do POST).
Parses 'event:' and 'data:' lines, yields typed StreamEvent union.
- api/auth.ts: User interface extended with preferences; new
UserPreferences type exported.
- api/user.ts: updatePreferences() method.
- RecipeForm.tsx: handleSubmit now consumes the stream. Live UI displays:
1. Initial cooking loader with step label
2. Transcription appears as soon as it's ready
3. Title fades in the moment it's extracted (before the rest of the
recipe finishes generating)
4. Description appears right after
5. Image replaces the loader when ready
6. Small delay before navigating to the saved recipe detail page
- Profile.tsx: new 'Cuisine' tab with form for diet, allergies, max time,
servings, cuisine preference, and equipment checkboxes (8 options).
UX improvement: perceived latency is dramatically reduced. Instead of
waiting 40s staring at a spinner, the user sees the title ~3-4s in and
can start reading, while the image finishes generating in parallel.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Helmet's default 'Cross-Origin-Resource-Policy: same-origin' header was
blocking the frontend (http://localhost:5173) from loading images and
audio served by the backend at /uploads/*. Set policy to 'cross-origin'
so images can be embedded in the frontend.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
