Five Production Killers Lurking in Vibe-Coded React
Vibe-coded projects are hitting production at scale, and the failure modes are predictable: leaked secrets, broken access control, and unmaintainable component blobs. A developer who knows these five patterns can spot them in ten minutes and prevent a launch-day incident.
A code review of a three-day AI-built React admin dashboard turned up five patterns that make the app a liability despite looking polished. All state lives in one giant Context, so ticking a checkbox re-renders the sidebar and navbar. Every fetch call lacks loading, error, and race-condition handling, and delete buttons fire duplicate requests with no guard. Supabase anon keys and a Stripe live secret key were hardcoded directly in frontend source because the developer pasted them into the prompt and the AI copied them verbatim. Admin routes hide UI from non-admins but the underlying API endpoints have no server-side permission checks, leaving them open to anyone with DevTools. Components routinely exceed 500 lines with logic, handlers, and markup fused into a single file.
The fixes are straightforward: split Context by responsibility, adopt React Query for data fetching, move secrets to environment variables, enforce auth in every API route, and decompose components by concern. The deeper issue is that AI code passes a superficial review because it looks professional — clean naming, clear structure, thorough comments — while the dangerous gaps sit in the happy-path assumptions the model never questions.
AI-generated code passes superficial review more easily than junior code because its naming and structure look professional, making the gaps harder to spot.
The model's default is to implement only the happy path described in the prompt; every error path, edge case, and security boundary must be explicitly demanded.
Vibe coding inverts the traditional cost curve: the first 80% is dramatically faster, but the last 20% of hardening is harder because the codebase lacks the guardrails a senior developer would have built in from the start.
Just create more rules, no setup needed, that's it. More rules cost tokens, but the results are much better. Try to achieve the effect you want.
Yes, add more constraints, skills, etc.