VibeCode Upgrade

page.tsx ●

route.ts ●

package.json ●

deploy.sh ●

google-ads-manager/page.tsx

Security IssuesPerformance Issues

"use client"; // 🚨 WRONG! Should be server component for Google Ads API
import { useState, useEffect } from 'react';
import { GoogleAdsApi } from 'google-ads-api'; // 🚨 Missing import!
// 🚨 EXPOSED SECRETS IN CLIENT CODE!
const GOOGLE_ADS_CLIENT_ID = "123456789-abc.apps.googleusercontent.com";
const GOOGLE_ADS_CLIENT_SECRET = "GOCSPX-abcd1234_secret_key";
const GOOGLE_ADS_REFRESH_TOKEN = "1//04xyz-refresh_token";
const OPENAI_KEY = "sk-proj-1234567890abcdef"; // 🚨 OpenAI key leaked!
const GOOGLE_ADS_DEVELOPER_TOKEN = "your_dev_token_here";
export default function GoogleAdsManager() {
    const [campaigns, setCampaigns] = useState([]);
    const [keywords, setKeywords] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [user, setUser] = useState(null);
    // 🚨 INFINITE LOOP - missing dependency!
    useEffect(() => {
        fetchCampaigns();
        generateKeywords();
    }, []); // Missing campaigns, keywords dependencies!
    const fetchCampaigns = async () => {
        // 🚨 No auth check!
        const client = new GoogleAdsApi({
            client_id: GOOGLE_ADS_CLIENT_ID,
            client_secret: GOOGLE_ADS_CLIENT_SECRET,
            developer_token: GOOGLE_ADS_DEVELOPER_TOKEN,
        });
        const customer = client.Customer({
            customer_id: '1234567890',
            refresh_token: GOOGLE_ADS_REFRESH_TOKEN,
        });
        // 🚨 No error handling, will crash!
        const campaigns = await customer.query(`
            SELECT campaign.id, campaign.name, campaign.status
            FROM campaign
            WHERE campaign.status = 'ENABLED'
        `);
        setCampaigns(campaigns); // 🚨 Causes re-render -> useEffect -> infinite loop!
    };
    const generateKeywords = async () => {
        // 🚨 Direct OpenAI call from client!
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${OPENAI_KEY}`, // 🚨 Exposed in network tab!
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                model: 'gpt-4',
                messages: [{
                    role: 'user',
                    content: 'Generate 10 Google Ads keywords for e-commerce'
                }]
            })
        });
        const data = await response.json();
        // 🚨 No null checking, will crash!
        const generatedKeywords = data.choices[0].message.content.split('\n');
        setKeywords([...keywords, ...generatedKeywords]); // 🚨 Another infinite loop trigger!
    };
    const createCampaign = async (campaignData) => {
        // 🚨 No user authentication!
        const response = await fetch('/api/campaigns', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(campaignData)
        });
        // 🚨 No error handling!
        const result = await response.json();
        setCampaigns([...campaigns, result.campaign]); // 🚨 Triggers useEffect again!
    };
    // 🚨 No error boundaries, no loading states, no auth checks
    return (
        <div>
            <h1>Google Ads Campaign Manager</h1>
            {/* 🚨 Missing component import will break */}
            <CampaignStats campaigns={campaigns} />
            <button onClick={() => createCampaign({ name: 'New Campaign' })}>
                Create Campaign
            </button>
            {campaigns.map(c => (
                <div key={Math.random()}> {/* 🚨 Terrible key! */}
                    {c.name} - {c.status}
                </div>
            ))}
            <div>
                <h2>Generated Keywords:</h2>
                {keywords.map(k => <span key={Math.random()}>{k}, </span>)}
            </div>
        </div>
    );
}

Terminal

Output

Debug Console

$ npm run dev

Starting Next.js 15 development server...

Warning: Google Ads credentials found in client bundle!

Error: useEffect dependency array missing, causing infinite re-renders

TypeError: Cannot read properties of undefined (reading 'choices')

Module not found: Cannot resolve './components/CampaignStats'

Google Ads API Error: 401 Unauthorized - Invalid refresh token

RangeError: Maximum call stack size exceeded in useEffect

Security Warning: Campaign data and tokens logged to console

Client component trying to use server-only Google Ads API

Code Transformation

What We Fix