Build a Social Media Dashboard with AI

What You Are Building

Picture a single web page — your own personal command center. At the top, stat cards show your current follower counts across YouTube, X, and Instagram. Below that, a line chart tracks how those numbers have changed over the past 30 days. Next to it, a bar chart compares engagement rates (likes, comments, shares) across your recent posts. At the bottom, a table lists your top-performing content with clickable links.

This is not a mockup with fake data. It pulls real numbers from real APIs every time you load the page — and it caches those numbers so you do not burn through your API limits.

The finished product teaches you three skills that show up in almost every project you will build with AI:

• API integration — talking to external services and getting data back. If you have not worked with APIs before, read What Is a REST API? first.
• Data visualization — turning raw numbers into charts humans can actually read.
• Responsive layout — making it look good on a laptop and a phone.

Why This Project Matters

If you are building with AI, you will eventually need to display data. Maybe it is sales numbers for a client. Maybe it is sensor readings from a home automation project. Maybe it is tracking your own content performance. The pattern is always the same: fetch data from somewhere, transform it, and show it visually.

A social media dashboard is the perfect project to learn this pattern because:

• The APIs are well-documented and free (at basic tiers).
• The data is yours — you care about the results.
• It is visual — you see immediately when something works or breaks.
• It combines multiple skills (API calls, charting, layout, caching) without being overwhelming.

Once you build this, you can rebuild the same architecture for any data source. The dashboard is the project. The pattern is the real skill.

The Tech Stack

We are keeping this deliberately simple. No frameworks, no build tools, no package managers to wrestle with.

Step 1: Scaffold the Project Structure

Start by telling your AI exactly what you want. Open Claude, Cursor, or whichever AI tool you use, and give it this prompt:

Create a social media dashboard project with this structure:

/social-dashboard/
  index.html    — main page with dashboard layout
  style.css     — responsive grid, dark theme, stat cards
  app.js        — API calls, chart rendering, caching logic

Requirements:
- index.html loads Chart.js from CDN (version 4.x)
- The page has a header with "Social Media Dashboard"
- A row of 3 stat cards (YouTube subscribers, X followers, 
  Instagram followers) with placeholder numbers
- Two chart areas: a line chart and a bar chart
- A table for top posts
- Mobile-responsive using CSS Grid
- Dark theme with a clean, modern look

Your AI will generate three files. Save them in a folder, open index.html in your browser, and you should see a dashboard layout with placeholder data. It will not be pulling real numbers yet — that comes in Step 2. But you will have the skeleton: cards, charts, and a table, all styled and responsive.

If the layout looks off or you want changes, just tell the AI: "Make the stat cards wider on mobile" or "Change the background color to #0A0E1A." Iterate until the structure feels right before you wire up the data.

Step 2: Connect to Social Media APIs

This is where the project gets real. You need API keys — think of them as passwords that let your dashboard talk to YouTube, X, and Instagram. Each platform handles this differently.

Getting Your API Keys

YouTube Data API v3: Go to Google Cloud Console, create a project, enable the YouTube Data API v3, and generate an API key under Credentials. It is free for up to 10,000 units per day — more than enough for a personal dashboard.

X (Twitter) API: Sign up at developer.x.com. The free tier gives you basic read access. You will get an API key and a Bearer Token. The Bearer Token is what your dashboard uses.

Instagram Graph API: This one requires a Meta Developer account and a Facebook Page connected to your Instagram Business or Creator account. Go to developers.facebook.com, create an app, and generate a long-lived access token. Instagram's API setup is the most complex of the three — if you are new to APIs, start with YouTube only and add Instagram later.

Once you have at least one API key, give your AI this prompt:

Update app.js to fetch real data from the YouTube Data API.

Here is my API key: [YOUR_KEY]

I need:
1. A function fetchYouTubeStats(channelId, apiKey) that calls
   the YouTube Data API v3 channels endpoint and returns
   subscriber count, view count, and video count
2. On page load, call this function and update the YouTube 
   stat card with real numbers
3. Format large numbers with commas (1,234,567)
4. If the API call fails, show "Error loading data" in the card
   instead of crashing

My YouTube channel ID is: [YOUR_CHANNEL_ID]

The AI will write a fetch() call to the YouTube API endpoint, parse the JSON response, and update the DOM. This is the REST API pattern in action: your browser sends a request, the API sends back data as JSON, and your JavaScript reads that JSON and puts the numbers on screen.

Repeat this process for X and Instagram. Each API returns data in a slightly different shape, but the pattern is identical: call the endpoint, get JSON, extract the numbers you want, display them.

What About CORS?

Some APIs will not let your browser call them directly. You will see an error in the browser console mentioning "CORS" — Cross-Origin Resource Sharing. This is a security feature, not a bug.

The fix: tell your AI to create a simple proxy. This can be a tiny server (Node.js, Python, or even a serverless function on Vercel) that your browser talks to, which then calls the social media API on your behalf. The YouTube API works directly from the browser. The X API usually requires a proxy. Instagram varies.

I am getting a CORS error when calling the X API from my 
browser JavaScript. Create a minimal proxy:

- A single serverless function (for Vercel or Netlify)
- It accepts my dashboard's request
- Adds my Bearer Token server-side (so it is not exposed)
- Forwards the request to the X API
- Returns the response to my dashboard

Keep it as simple as possible. One file.

Step 3: Build the Dashboard Layout

With data flowing in, it is time to make the dashboard look like something you are proud to open every morning. The layout has four zones:

1. Stat cards row — three cards across the top showing headline numbers (subscribers, followers, total views). Each card has the platform icon, the metric name, the current number, and a small change indicator (up or down from last period).
2. Charts row — two charts side by side. A line chart showing follower growth over time and a bar chart comparing engagement across recent posts.
3. Top posts table — a simple table listing your best-performing content: title, platform, engagement count, and a link.
4. Last updated timestamp — shows when data was last fetched so you know if you are looking at fresh or cached numbers.

Improve the dashboard layout in style.css:

- Stat cards: use CSS Grid, 3 columns on desktop, 1 column 
  on mobile (below 768px)
- Each stat card has a colored left border: red for YouTube, 
  blue for X, pink for Instagram
- Charts row: 2 columns on desktop, stacked on mobile
- Add subtle box shadows and rounded corners to all cards
- Dark theme: background #0F1117, cards #1A1D2E, 
  text #E2E8F0, accent colors per platform
- Add a "Last updated: [timestamp]" line below the charts
- Make sure everything has appropriate padding and spacing

CSS Grid is the key technology here. It lets you define a layout grid and have elements snap into it — and it automatically adjusts for different screen sizes with media queries. Your AI handles the CSS, but understanding what CSS Grid does helps you ask for changes: "Make the chart area span full width" or "Add a fourth column for TikTok stats."

Step 4: Add Charts and Visualizations

Chart.js is the library doing the heavy lifting here. It is included via a single CDN link in your HTML — no installation needed. Here is what each chart type is good for:

For this dashboard, you need two charts: a line chart for growth and a bar chart for engagement. Here is the prompt:

Add two Chart.js charts to the dashboard:

Chart 1 — Line chart "Follower Growth (30 Days)":
- X-axis: dates (last 30 days)
- Y-axis: follower count
- Three lines: YouTube (red), X (blue), Instagram (pink)
- Smooth curves, filled area below each line with transparency
- Responsive, maintains aspect ratio on resize

Chart 2 — Bar chart "Engagement by Post":
- X-axis: post titles (truncated to 20 chars)
- Y-axis: total engagement (likes + comments + shares)
- Bars colored by platform
- Show value labels on top of each bar
- Horizontal grid lines only

Both charts should use the Chart.js dark theme options:
- Grid lines: rgba(255,255,255,0.1)
- Text color: #A0AEC0
- No borders around the chart area

Use the data from our API fetch functions. If no data is 
available yet, show a "Loading..." message in the chart area.

Chart.js works by creating a <canvas> element in your HTML and then initializing a chart object in JavaScript that targets that canvas. The AI will generate something like this:

// Simplified example — your AI generates the full version
const ctx = document.getElementById('followerChart').getContext('2d');
const followerChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Mar 1', 'Mar 2', 'Mar 3', /* ... */],
    datasets: [{
      label: 'YouTube',
      data: [10200, 10245, 10312, /* ... */],
      borderColor: '#FF0000',
      backgroundColor: 'rgba(255, 0, 0, 0.1)',
      fill: true,
      tension: 0.4
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: { grid: { color: 'rgba(255,255,255,0.1)' } },
      x: { grid: { display: false } }
    }
  }
});

You do not need to memorize this syntax. The AI writes it. But understanding the structure — a chart type, labels for the axis, datasets with colors, and options for styling — helps you ask for changes. "Make the YouTube line thicker." "Add a tooltip that shows the exact number." "Change the line chart to a stacked area chart."

Step 5: Auto-Refresh and Caching

Without caching, your dashboard hits the APIs every single time someone loads the page. This is a problem because every API has rate limits — a cap on how many requests you can make per day or per minute. Exceed the limit and the API cuts you off.

The fix is simple: store API responses in the browser's localStorage with a timestamp. On the next page load, check the timestamp. If the data is less than 15 minutes old, use the cached version. If it is older, fetch fresh data.

Add a caching layer to app.js:

1. Create a function cachedFetch(key, fetchFunction, maxAgeMinutes)
   - Check localStorage for a cached response under `key`
   - If it exists AND is less than `maxAgeMinutes` old, return it
   - Otherwise, call fetchFunction(), store the result in 
     localStorage with a timestamp, and return it
   - If fetchFunction fails, return the stale cache as fallback

2. Wrap all three API calls (YouTube, X, Instagram) with 
   cachedFetch using a 15-minute cache duration

3. Add a "Last updated" timestamp on the page that shows when
   data was actually fetched (not the page load time)

4. Add a "Refresh Now" button that clears the cache and 
   re-fetches everything

5. Add auto-refresh every 15 minutes using setInterval

This pattern — check cache first, fetch if stale, show a timestamp — is used in almost every data-driven application. Learning it here means you already know it for your next project.

Step 6: Deploy It

Your dashboard works locally. Now put it on the internet so you can check it from your phone, share it with clients, or show it off.

Option 1: Vercel (Recommended for Beginners)

Vercel deploys static sites for free. If your dashboard is just HTML + CSS + JS files with no backend proxy, deployment is almost instant:

1. Push your project folder to a GitHub repository.
2. Go to vercel.com and sign in with GitHub.
3. Import your repository. Vercel auto-detects it as a static site.
4. Click Deploy. Done. You get a URL like social-dashboard.vercel.app.

If you need a proxy function for CORS issues, Vercel supports serverless functions. Drop a JavaScript file in an /api folder and it becomes a live endpoint automatically.

Option 2: Netlify

Nearly identical to Vercel. Drag and drop your project folder onto netlify.com and it is live. Netlify also supports serverless functions for backend proxies.

Option 3: Your Own VPS

If you have a VPS with nginx (like we use for this site), you can deploy via SFTP. Upload your files to the server's web directory and configure nginx to serve them. This gives you full control but requires more setup.

Prepare the social dashboard for production deployment:

1. Move all API keys to environment variables (not hardcoded)
2. Add error handling for every API call — show a user-friendly
   message if an API is down
3. Minify the CSS and JavaScript (or tell me the commands)
4. Add a simple favicon and meta tags for sharing
5. Make sure all CDN links use HTTPS
6. Add a loading spinner that shows while data is being fetched

Common Pitfalls and What to Tell Your AI

Every project has landmines. Here are the ones you will hit building this dashboard — and exactly what to tell your AI when you do.

CORS Errors

What happens: Your browser console shows "Access-Control-Allow-Origin" errors. Your API call works in Postman but not in your dashboard.

What to tell your AI: "I'm getting a CORS error calling [API name] from client-side JavaScript. Create a minimal serverless proxy function for Vercel that handles this API call server-side."

Read What Is CORS? for the full explanation.

API Rate Limits

What happens: The API returns a 429 status code or an error message about exceeding your quota.

What to tell your AI: "My YouTube API calls are hitting the rate limit. Add exponential backoff retry logic and increase the cache duration to 30 minutes."

Stale or Missing Data

What happens: Charts show old data, stat cards display "undefined," or the page loads with blank spaces.

What to tell your AI: "Some API responses are returning undefined values. Add null checks and fallback values throughout app.js. If a data point is missing, show 'N/A' instead of undefined. Show the cached data timestamp so I can see whether data is fresh."

Chart Library Confusion

What happens: The AI generates code for Chart.js v3 when you loaded v4 from the CDN, or mixes up Chart.js syntax with a different library.

What to tell your AI: "I am using Chart.js version 4.4.x loaded via CDN. Make sure all chart code uses Chart.js v4 syntax. The v4 API uses scales as an object, not an array."

Charts Not Rendering

What happens: You see a blank space where the chart should be. No error in the console.

What to tell your AI: "My Chart.js chart is not rendering. The canvas element exists in the HTML. Check that: (1) the canvas has a set height, (2) the Chart constructor is called after the DOM loads, (3) the data arrays are not empty, (4) there is no duplicate chart instance on the same canvas."

What AI Gets Wrong About This Project

AI tools generate dashboard code very confidently. But there are specific areas where the generated code commonly fails:

• Hardcoded API keys in JavaScript: Almost every AI will put your API key directly in the fetch URL. Always tell it explicitly to use environment variables or a config file.
• No error handling: AI-generated API calls often assume success. Add a line to every prompt: "Add try/catch with user-friendly error messages."
• Wrong API version: Social media APIs change frequently. The AI might generate code for an older version. Always include the specific API version in your prompt.
• Ignoring mobile: The first layout pass usually looks great on desktop and broken on mobile. Always test with your browser's responsive mode and tell the AI to fix specific breakpoints.
• Over-engineering: Ask for a simple dashboard, and some AI tools will generate a full React app with Redux, TypeScript, and a build pipeline. Be specific: "Plain HTML, CSS, and JavaScript. No framework. No build step."

Level Up: What to Add Next

Once your basic dashboard is working and deployed, here are three additions that turn it from a project into a real tool:

1. Authentication

Add a simple login so only you can see the dashboard. Tell your AI: "Add basic password authentication using a hashed password stored in an environment variable. Show a login screen before the dashboard loads. Store the auth state in a session cookie."

2. Multiple Accounts

Track more than one set of social accounts. This is useful if you manage social media for clients. Prompt: "Add a dropdown selector that switches between different account profiles. Each profile has its own API keys and channel IDs stored in a config file."

3. Export to CSV

Let yourself download the data for spreadsheet analysis. Prompt: "Add an Export CSV button that downloads the current dashboard data as a CSV file. Include columns for date, platform, metric name, and value."

4. Rebuild in React

Once you understand how every piece works in plain JavaScript, rebuild it as a React app using Recharts instead of Chart.js. This is not just a rewrite — it teaches you components, state management, and how modern frameworks handle the same problems differently.

FAQ