Вайбкодинг РЕАЛЬНОГО проекта 2 (Claude Code, Codex)

Tech / Product Summary (Vibe Coding, Real Production Project, Part 2)

The video documents building “Reels Radar” (a SaaS-style app) from an existing working backend “Reels Finder” into a production-ready web product: landing page + auth + personal account + subscriptions/payments + admin panel, with continuous iterative fixes using AI coding tools.

Core problem the project solves

A paid “producer” workflow (≈ 150,000 RUB/month) is used to pull trending competitor reels and rewrite/edit them.

The goal is to automate the workflow so the product can:

1. Fetch competitor reels
2. Translate/adapt scripts (EN → RU)
3. Generate hooks + CTA segments
4. Manage a content plan (Kanban)
5. Provide UI for editing + “ready to shoot” states
6. Deliver reels/scripts to users for production

Main stack / architecture

Frontend / Backend split

• Frontend: what the user sees (pages, buttons, UI)
• Backend: server-side actions triggered by UI (API calls, data processing)

Minimal stack emphasized

• Python + Postgres (explicitly: “Python with Postgres database”)
• External APIs for services—especially Apify for reel fetching

Versioning / rollback

• Git/GitHub used for rollback/state management

Deployment

• Server on Ubuntu via SSH (Timeweb mentioned)

---

AI Coding Workflow + Tooling

• Uses Claude Code / Claude (mentions Codex as comparison).
• Uses clddesign (Claude Design) to generate UI screens/design system, then exports an HTML archive and re-implements it in the real app.
• Strong emphasis on: when Claude generates design “locally,” the team must deploy and verify in production (VPS), not only local checks.
• Operational focus includes:
  • production testing
  • avoiding unverified changes
  • fast iteration when UI bugs appear

---

Major Features Implemented (Production Scope)

1) Landing page + funnel

• Landing page created in Claude Design, then ported to production.
• Includes marketing copy + a 4-step animated funnel concept:
  • Load competitors → Get best reels → Adapt to your business → Collect results
• Pricing/tariff CTAs drive purchase/registration.

2) Authentication & accounts

Implemented multiple auth methods:

• Telegram login
• Email login with code
• Yandex login (noted because in Russia you can’t rely only on non-Russian email flows)

Also includes:

• personal profile
• profile setting corrections (avatar/name from Telegram)
• logout and re-login flows

3) Payments & subscriptions

Implemented end-to-end payment logic:

• T-Bank (Tinkoff) for acquiring subscriptions / online store payments
• Unicender for email sending / verification codes

Requires infrastructure for legal/payment compliance:

• online store
• test cash register first, then real cash register
• webhook checking / subscription activation logic

Adds:

• subscription tariffs
• free-tier behavior
• follow-up plans to correct monthly limits and finalize recurring payments

4) Subscription gating / limits

Free and paid tiers are tied to:

• maximum number of reels/videos per period (speaker discusses setting free plan to 5, paid higher)

Multiple bugs were encountered:

• free plan pulling 20 instead of 5
• tariff repeat/cancel issues

5) Core product UI states (Kanban)

Kanban-style content lifecycle:

• competitor reels load → ideas → editing → “ready to shoot” / “in editing” / “filmed” / “posted”

UI improvements:

• standardized card layout
• smoother card movement
• performance optimization so card transfers/rendering are fast

6) Admin panel (internal analytics)

Admin dashboard designed in Claude Design and integrated.

Shows:

• revenue and expenses
• users and subscription counts
• payments
• MRR-like metrics
• daily graphs
• translation/token cost monitoring (speaker repeatedly stresses cost tracking)

Requested improvements:

• better graph tooltips/point labels

7) Automation & testing

Strong end-to-end testing emphasis:

• automated tests for registration (mail codes)
• competitor import
• translation
• ensuring ideas appear promptly
• verifying UI behavior and flows

References Playwright-style browser testing as a tool Claude can use to verify UI.

8) Security audit + vulnerability fixing

Claude (and “workers”) performed repository audits, including:

• finding critical vulnerabilities (production secrets/data exposure risk)
• fixing payment double-processing / concurrency issues
• addressing authorization issues and performance pitfalls

A “worker” approach is described:

• multiple Claude sessions handle different tasks in parallel
• fixes returned to a main session for review

---

Performance and UX Issues Addressed

Recurring bug/improvement categories:

Speed / delays

• slow card rendering and board updates (timer/queue delays initially)
• translation timing issues (translation not immediately reflected)
• preview/image load delays

UI layout correctness

• cards moving incorrectly (preview stretched)
• non-standard card sizing causing “level jumps” / nested card outline artifacts

Functional logic

• repeat button not updating
• subscription activation/disable incorrect
• “subscribe indefinitely” bug
• cancellation not possible after purchase
• free-tier quota ignored (pulled too many reels)

After iterative fixes:

• ideas appeared quickly after import (speaker cites improvements like 0–1 seconds for ideas availability)
• translation/import still takes longer but is considered acceptable
• previews and card states became consistent

---

Costs / Economy Calculations (Token + Marginality)

Approximate unit economics are discussed:

• translation cost per reel/video estimated via tokens
  • mentions values like “1,000 reels ≈ $3” (order-of-magnitude)
• marginality logic considers:
  • free/paid tier pricing vs translation + server costs
  • proposed subscription pricing around 2,500 RUB and ~4,900 RUB monthly

Key cost drivers:

• AI translation tokens
• reel fetching API usage (Apify)

The admin panel is intended to track:

• translation costs
• service usage

---

Iterative “Design → Production” Loop

Repeated workflow:

1. Ask Claude Design for UI/screens
2. Export HTML and port it into the real app
3. Deploy to a VPS and test in a real browser
4. Fix mismatches (fonts, layout, missing avatar loading, etc.)
5. Repeat for other pages (landing, profile, subscription, admin panel)

---

What the Video Concludes

• The project is described as:
  • built “from scratch to release”
  • tested live with real users
  • deployed on a domain (reelsradar.ru, with later experiments like “radar” variants mentioned)
• Remaining work at the end is mostly:
  • polish + legal
  • payment subscription correctness (recurring payments)
  • quota correctness
  • security cleanup

---

Main Speakers / Sources

• Primary speaker: Evgeniy Pantelo (also referenced as “Evgeniy Pantel / Evgeniy PantelOvich”)
• AI coding/design sources: Claude (Claude Code), Claude Design (clddesign), and references to Fable/Opus 5 / OPU s model variants
• External services integrated: Apify, OpenAI API (GPT-5.6 mentioned), T-Bank (Tinkoff), Unicender, domain/DNS (regru/zone) and domain hosting (Timeweb mentioned)