Build a Social Media Dashboard in Retool (No-Code)

You have social media data from the API. Now what? Spreadsheets get messy. Custom dashboards take weeks to build. Retool sits in the middle — a drag-and-drop builder that connects directly to REST APIs.

In this guide, you'll build a live social media dashboard in Retool that:

• Pulls profile data across Instagram, TikTok, Twitter, and YouTube
• Displays metrics in charts, tables, and stat cards
• Compares competitors side by side
• Refreshes automatically on a schedule

No frontend code required. Just API calls and drag-and-drop.

---

What You'll Build

A dashboard with four main sections:

1. Overview Cards — Total followers, average engagement, accounts tracked
2. Platform Comparison — Bar chart comparing follower counts across platforms
3. Competitor Table — Sortable table with all tracked accounts
4. Growth Trend — Line chart showing follower changes over time

---

Step 1: Set Up the API Connection

In Retool, create a new REST API resource:

Setting	Value
Name	SociaVault API
Base URL	https://api.sociavault.com/v1/scrape
Headers	X-API-Key: your_api_key

This lets every query in your app use the same authenticated connection.

---

Step 2: Create Data Queries

Query: Get Instagram Profile

Setting	Value
Resource	SociaVault API
Method	GET
Path	/instagram/profile
Parameters	handle: {{instagram_input.value}}

Query: Get TikTok Profile

Setting	Value
Resource	SociaVault API
Method	GET
Path	/tiktok/profile
Parameters	handle: {{tiktok_input.value}}

Query: Get Twitter Profile

Setting	Value
Resource	SociaVault API
Method	GET
Path	/twitter/profile
Parameters	handle: {{twitter_input.value}}

Query: Batch Competitor Profiles

For tracking multiple accounts, create a JavaScript query that loops through a list:

// Retool JS Query
const competitors = ['handle1', 'handle2', 'handle3', 'handle4'];
const results = [];

for (const handle of competitors) {
  const response = await fetch(
    `https://api.sociavault.com/v1/scrape/instagram/profile?handle=${encodeURIComponent(handle)}`,
    { headers: { 'X-API-Key': '{{SOCIAVAULT_KEY}}' } }
  );
  const json = await response.json();
  
  if (json.success && json.data) {
    results.push({
      handle: json.data.username,
      name: json.data.full_name,
      followers: json.data.follower_count,
      following: json.data.following_count,
      posts: json.data.media_count,
      verified: json.data.is_verified,
      bio: json.data.biography,
      er: 0 // Calculate separately if needed
    });
  }
}

return results;

---

Step 3: Build the Dashboard UI

Stat Cards Row

Add four Statistic components across the top:

Card 1: Total Followers

Value: {{ competitorQuery.data.reduce((sum, c) => sum + c.followers, 0).toLocaleString() }}
Label: Total Followers Tracked

Card 2: Accounts Tracked

Value: {{ competitorQuery.data.length }}
Label: Active Accounts

Card 3: Top Performer

Value: {{ competitorQuery.data.sort((a, b) => b.followers - a.followers)[0]?.handle || '-' }}
Label: Most Followed

Card 4: Average Posts

Value: {{ Math.round(competitorQuery.data.reduce((sum, c) => sum + c.posts, 0) / competitorQuery.data.length).toLocaleString() }}
Label: Avg Posts per Account

Competitor Comparison Table

Add a Table component and connect it to competitorQuery.data:

Column	Field	Format
Handle	handle	Text with @ prefix
Name	name	Plain text
Followers	followers	Number with commas
Following	following	Number with commas
Posts	posts	Number
Verified	verified	Boolean tag
F/F Ratio	{{ currentRow.followers / Math.max(currentRow.following, 1) }}	Number (2 decimals)

Enable sorting and filtering. Add conditional formatting to highlight verified accounts in blue.

Bar Chart: Follower Comparison

Add a Chart component (bar chart):

Data source: competitorQuery.data
X-axis: handle
Y-axis: followers
Sort: descending by followers

Platform Breakdown Pie Chart

If you're tracking across platforms, add a pie chart:

// Transform query for pie chart
const platformCounts = {
  'Instagram': instagramQuery.data?.follower_count || 0,
  'TikTok': tiktokQuery.data?.stats?.followerCount || 0,
  'Twitter': twitterQuery.data?.legacy?.followers_count || 0,
  'YouTube': youtubeQuery.data?.subscriberCount || 0
};

return Object.entries(platformCounts).map(([platform, count]) => ({
  platform,
  followers: count
}));

---

Step 4: Add Search Functionality

Dynamic Profile Lookup

Add a Text Input and Button:

1. Text Input: profileSearch — Placeholder: "Enter Instagram handle"
2. Button: "Look Up" — onClick: instagramProfileQuery.trigger()

Query:

GET /instagram/profile
Parameters: handle = {{ profileSearch.value }}

Display results in a Container with individual Text components:

{{ instagramProfileQuery.data.data.full_name }}
{{ instagramProfileQuery.data.data.follower_count.toLocaleString() }} followers
{{ instagramProfileQuery.data.data.biography }}

Multi-Platform Search

Add a Select dropdown for platform choice:

Options: Instagram, TikTok, Twitter, YouTube

Then use a JavaScript Query that routes to the correct endpoint:

const handle = profileSearch.value;
const platform = platformSelect.value;

const endpoints = {
  Instagram: 'instagram/profile',
  TikTok: 'tiktok/profile',
  Twitter: 'twitter/profile',
  YouTube: 'youtube/channel'
};

const response = await fetch(
  `https://api.sociavault.com/v1/scrape/${endpoints[platform]}?handle=${encodeURIComponent(handle)}`,
  { headers: { 'X-API-Key': '{{SOCIAVAULT_KEY}}' } }
);

return response.json();

---

Step 5: Historical Tracking

Retool doesn't store historical data natively, but you can use Retool Database (built-in PostgreSQL) or connect to your own database.

Retool Database Setup

Create a table called metric_snapshots:

CREATE TABLE metric_snapshots (
  id SERIAL PRIMARY KEY,
  handle TEXT NOT NULL,
  platform TEXT NOT NULL,
  followers INTEGER,
  posts INTEGER,
  snapshot_date DATE DEFAULT CURRENT_DATE
);

Save Snapshots

Add a query that runs after fetching profiles:

INSERT INTO metric_snapshots (handle, platform, followers, posts)
VALUES (
  {{ currentProfile.handle }},
  {{ currentProfile.platform }},
  {{ currentProfile.followers }},
  {{ currentProfile.posts }}
);

Growth Chart

Query historical data and display in a line chart:

SELECT snapshot_date, followers, handle
FROM metric_snapshots
WHERE handle = {{ selectedHandle.value }}
ORDER BY snapshot_date ASC
LIMIT 90;

Connect to a Line Chart with:

• X-axis: snapshot_date
• Y-axis: followers
• Group by: handle (for multi-account comparison)

---

Step 6: Schedule Auto-Refresh

Retool lets you schedule queries:

1. Click on your batch query → Settings
2. Enable "Run query on a schedule"
3. Set to every 24 hours
4. Enable "Run on page load" for fresh data when opening the dashboard

For the database snapshot, create a Retool Workflow that runs daily:

1. Fetch all competitor profiles
2. Insert snapshots into the database
3. Optionally send a Slack summary

---

Template: Agency Client Dashboard

For agencies managing multiple client accounts, create a multi-page Retool app:

Page 1: Client Selector

• Dropdown: Select client
• Table: All clients with summary stats
• Button: "Generate Report"

Page 2: Client Detail

• Profile overview (all platforms)
• Content performance table
• Growth chart (last 90 days)
• Competitor comparison

Page 3: Reporting

• Date range picker
• Exportable tables
• PDF generation via Retool's built-in export

---

Retool vs. Alternatives

Feature	Retool	Grafana	Google Data Studio	Custom React
Setup time	1-2 hours	2-4 hours	1-2 hours	Days-weeks
API integration	Native REST	Plugin needed	Connectors	Custom code
Charts & tables	Drag-and-drop	Config files	Templates	Libraries
Database	Built-in PostgreSQL	External only	Google BigQuery	External
User management	Built-in	Basic	Google accounts	Custom auth
Free tier	5 users	Open source	Free	N/A

Retool wins for internal dashboards because it handles auth, database, and UI in one platform, with zero frontend code.

---

Get Started

Sign up for SociaVault and start building your dashboard with the free tier.

---

Related Reading

• Connect SociaVault to Make.com
• Build a Social Media CRM in Notion
• Social Media Alerts in Slack
• SociaVault API Documentation