KOCBridge — Project Story

💡 Inspiration

This project was born from a real internship experience at Baidu, the company behind MeDo.

During my internship, I worked on the overseas growth team for TeraBox (Baidu's international cloud storage app). My responsibilities included KOC/KOL outreach and management across TikTok, Instagram, YouTube, and Telegram, business data analysis for Spanish and Portuguese-speaking markets, and community operations across Southeast Asia, Latin America, and the Middle East.

Every single day, I faced the same exhausting manual workflow:

2+ hours clicking through 100+ content links to manually record view counts in a spreadsheet
2.5+ hours writing personalized outreach emails one by one — each requiring copy-pasting into a translation app, because most of our target KOCs in Indonesia, Latin America, and the Middle East only speak their native language
Hours every week calculating commissions in Excel, cross-referencing views and download counts

My manager once told me a story: "We had zero Indonesian speakers, but we opened the entire Indonesian market purely through translation tools and persistence." That story stuck with me — because it showed both the opportunity and the inefficiency.

When I heard about the Build with MeDo Hackathon, I knew exactly what to build.

🛠️ How I Built It

I used MeDo as the primary development platform, structuring the entire build through natural language conversations.

Phase 1: Requirements Definition Instead of jumping straight into building, I first had MeDo generate a full requirements document (Requirement.md) covering all three modules, success criteria, and out-of-scope items. This single step saved significant iteration time later.

Phase 2: Core App Generation I sent one comprehensive prompt describing all three modules simultaneously. MeDo generated the complete app structure — React frontend, Supabase backend, sidebar navigation, and mock data — in a single build cycle.

Phase 3: API Integrations

Replaced the default OpenAI dependency with MeDo's built-in AI service
Integrated YouTube Data API v3 for real channel data fetching
Integrated MyMemory Translation API for accurate multilingual translation

Phase 4: MeDo Skills Integration I extended the app further using MeDo's official Skills:

Google Text Translation Skill — Replaced the MyMemory API with Google's translation engine for higher accuracy across all 6 supported languages. This directly solved the "fake translation" bug where the previous implementation was generating meaningless output.
Data Analysis Skill — Enhanced the Analytics page with smarter data insights, including top-performing region summaries and platform comparison analysis.
Login Skill — Added a full user authentication system with email/password login and registration, making KOCBridge feel like a production-ready SaaS product.

Phase 5: Data & UI Expansion

Expanded mock data from 8 to 50 realistic KOC records across all platforms, languages, and regions
Added Analytics page with pie charts and bar charts for platform, language, region, and commission distribution
Added Commission Calculator as a dedicated sidebar page
Redesigned login page with split-screen layout featuring "From Baidu to the world" branding

🐛 Challenges We Faced

1. AI Generation Failures The "Generate Outreach Message" feature kept returning "AI generation failed" errors. We solved it by implementing a smart fallback: if the AI call fails, the system silently uses a template-based personalization engine, so the user never sees an error.

2. Fake Translations The initial translation feature looked like it worked — but the output was completely wrong. MeDo had generated a fake template-based "translation." We first fixed this with MyMemory API, then upgraded to Google Text Translation Skill for even better quality.

3. Open Profile Blocked The "Open Profile" button was opening external URLs in an iframe, causing ERR_BLOCKED_BY_RESPONSE errors. Fixed by switching to window.open(url, '_blank').

4. Dashboard Data Showing Zero After adding mock data, the dashboard still showed all zeros. Required a targeted fix to connect the data layer to the UI properly.

5. Data Loss After Inactivity After being away from the project, all mock KOC data disappeared — the Supabase database had been reset. We added an auto-check on every app load: if fewer than 8 records exist, the app silently re-seeds the database. We also added a manual "Reset Demo Data" button on the dashboard as backup.

6. Credits Management MeDo operates on a credit system, and complex fixes consume credits quickly. We learned to batch multiple fixes into single prompts, prioritize bugs that affected the demo most, and avoid spending credits on features that could be explained as "future roadmap."

📚 What I Learned

Prompt engineering matters as much as coding — specific, structured prompts with exact API endpoints produced far better results than vague requests
MeDo Skills are powerful shortcuts — instead of writing custom integration code, Skills like Google Text Translation and Login saved significant development time and improved quality
AI-generated code needs testing — features that looked complete often had silent failures underneath
Real pain points make better products — every feature in KOCBridge maps directly to a workflow I personally found frustrating during my internship