How to Build a Social Media Aggregator in FlutterFlow

Create a social_posts collection with fields: userId (String), platform (String: 'twitter', 'instagram', 'youtube'), platformPostId (String, the original post ID), content (String, text or caption), mediaUrl (String, nullable), mediaType (String: 'image', 'video', 'text'), timestamp (Timestamp), engagementCount (Integer, likes + comments combined), postUrl (String, link to original post). Also create a connected_accounts collection with: userId, platform, accessToken (encrypted), refreshToken, tokenExpiry, platformUsername. This normalized schema lets you query all platforms in one feed.

Create three Cloud Functions for connecting social accounts. Each function initiates the OAuth flow: generate an auth URL with required scopes, redirect the user, and handle the callback to exchange the authorization code for access and refresh tokens. Store tokens in connected_accounts with the platform field. For Twitter use OAuth 2.0 PKCE, for Instagram use Instagram Basic Display API OAuth, for YouTube use Google OAuth with youtube.readonly scope. Encrypt access tokens before storing in Firestore using a server-side encryption key.

1// Cloud Function: connectTwitter (simplified)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const crypto = require('crypto');
5
6const ENCRYPT_KEY = process.env.TOKEN_ENCRYPT_KEY;
7
8function encrypt(text) {
9  const iv = crypto.randomBytes(16);
10  const cipher = crypto.createCipheriv(
11    'aes-256-cbc', Buffer.from(ENCRYPT_KEY), iv
12  );
13  let encrypted = cipher.update(text, 'utf8', 'hex');
14  encrypted += cipher.final('hex');
15  return iv.toString('hex') + ':' + encrypted;
16}
17
18exports.handleTwitterCallback = functions.https
19  .onRequest(async (req, res) => {
20    const { code, state } = req.query;
21    const userId = state; // passed during auth init
22    // Exchange code for tokens
23    const tokenRes = await fetch(
24      'https://api.twitter.com/2/oauth2/token',
25      { method: 'POST', body: new URLSearchParams({
26        grant_type: 'authorization_code',
27        code, redirect_uri: REDIRECT_URI,
28        client_id: CLIENT_ID,
29        code_verifier: STORED_VERIFIER
30      })}
31    );
32    const tokens = await tokenRes.json();
33    await admin.firestore()
34      .collection('connected_accounts').add({
35        userId, platform: 'twitter',
36        accessToken: encrypt(tokens.access_token),
37        refreshToken: encrypt(tokens.refresh_token),
38        tokenExpiry: Date.now() + tokens.expires_in * 1000,
39        platformUsername: tokens.screen_name
40      });
41    res.redirect('/account-connected?platform=twitter');
42  });

Build a scheduled Cloud Function (runs every hour) that iterates through connected_accounts, decrypts tokens, calls each platform API to fetch recent posts, and normalizes them into social_posts documents. For Twitter: GET /2/users/:id/tweets. For Instagram: GET /me/media. For YouTube: GET /youtube/v3/search?forMine=true. Map each response to the unified schema: extract content text, media URL, engagement metrics, and original post URL. Use platformPostId to avoid duplicate entries on subsequent fetches.

Create an AggregatedFeedPage. Add a TabBar at the top with tabs: All, Twitter, Instagram, YouTube. Below, add a ListView with a Backend Query on social_posts filtered by userId equals current user, ordered by timestamp descending. For the 'All' tab, show all platforms. For individual tabs, add a where clause on platform. Each list item is a PostCard Container: a Row with a platform badge icon (bird for Twitter, camera for Instagram, play button for YouTube) using conditional Image based on the platform field, followed by a Column with content Text (truncated to 2 lines), mediaUrl as Image if present, engagementCount with a heart icon, and timestamp as relative time.

Create an AnalyticsPage accessible from a chart icon in the AppBar. Query social_posts grouped by platform and sum engagementCount. Display a Custom Widget bar chart (using fl_chart) comparing total engagement across platforms. Below the chart, show stat cards: total posts per platform, average engagement per post, most engaging post with a link. Add a date range picker to filter analytics to specific periods. This helps users understand which platform drives the most engagement.

Add a ComposePostPage with a TextField for content, an optional image picker, and ChoiceChips for selecting target platforms (Twitter, Instagram, YouTube). On submit, call a Cloud Function that receives the content and selected platforms, decrypts each platform's tokens, and posts via their respective APIs. Twitter: POST /2/tweets. Instagram: requires Facebook Graph API media creation flow. YouTube: community posts or video descriptions. Show a success/failure status per platform in a results dialog after posting.