--- tokens: 6071 title: "Build a Social Media Dashboard with React (2026) | Postproxy" description: "Build a social media dashboard with React and Postproxy — post creation, account selection, status tracking, and publish logs in a custom publishing UI." url: "https://postproxy.dev/blog/how-to-build-a-social-media-dashboard-with-postproxy-and-react/" --- ![Build a Social Media Dashboard with React (2026)](/blog/how-to-build-a-social-media-dashboard-with-postproxy-and-react.png) Quick answer Build a social media dashboard with React and Postproxy by setting up a thin Express proxy that forwards requests with your API key, then creating four screens: connected accounts (with reconnect for expired profiles), compose (text, media URL, profile checkboxes, draft or publish), post detail (per-platform status), and publish log. Use the \`/api/profiles\`, \`/api/posts\`, and \`/api/posts/:id/publish\` endpoints. ## Why build your own social media dashboard Postproxy gives you a publishing API. One endpoint, multiple platforms, media handling included. But the dashboard you use to interact with that API doesn’t have to be ours. Maybe you want publishing embedded in a tool your team already uses. Maybe you need an approval flow that doesn’t exist in any off-the-shelf product. Maybe your content pipeline has opinions about how posts should be created, reviewed, and tracked — and you want the UI to reflect those opinions. This tutorial walks through building a React dashboard on top of Postproxy’s API. Not a toy. A functional publishing interface with account selection, post creation, status tracking, and a publish log. The kind of thing you could hand to a social media manager and they’d actually use. If you came here weighing this against Hootsuite or a similar full-stack tool, [the lightweight Hootsuite API alternative guide](/blog/hootsuite-api-alternative-lightweight-publishing-apis/) compares that path with rolling your own UI on top of a publishing API. ## What does the social media dashboard include? Four screens: 1. **Accounts** — connected social profiles, their status, and a way to reconnect expired ones 2. **Compose** — create a post, pick platforms, optionally attach media, publish or save as draft 3. **Post detail** — per-platform publish status for a single post 4. **Publish log** — a feed of all posts with their outcomes The backend is a thin proxy — a few API routes that forward requests to Postproxy with your API key. The frontend is React with straightforward state management. No framework magic. No abstractions you’d have to undo later. ## How do you set up the React project? Start with a React app and a minimal Express backend. The backend exists to keep your API key out of the browser. ``` mkdir social-dashboard && cd social-dashboardmkdir client servercd server && npm init -y && npm install express cors node-fetchcd ../client && npx create-react-app . --template typescript ``` Your server needs three environment variables: ``` POSTPROXY_API_KEY=your_api_key_herePOSTPROXY_BASE_URL=https://api.postproxy.devPORT=3001 ``` ## How do you build the backend proxy? The server is intentionally thin. It adds the authorization header and forwards requests. That’s it. ``` const express = require('express');const cors = require('cors'); const app = express();app.use(cors());app.use(express.json()); const API_KEY = process.env.POSTPROXY_API_KEY;const BASE_URL = process.env.POSTPROXY_BASE_URL || 'https://api.postproxy.dev'; async function proxyGet(path) { const res = await fetch(`${BASE_URL}${path}`, { headers: { 'Authorization': `Bearer ${API_KEY}` }, }); return res.json();} async function proxyPost(path, body) { const res = await fetch(`${BASE_URL}${path}`, { method: 'POST', headers: { 'Authorization': `Bearer ${API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify(body), }); return res.json();} // List connected profilesapp.get('/api/profiles', async (req, res) => { const data = await proxyGet('/api/profiles'); res.json(data);}); // List all postsapp.get('/api/posts', async (req, res) => { const data = await proxyGet('/api/posts'); res.json(data);}); // Get single postapp.get('/api/posts/:id', async (req, res) => { const data = await proxyGet(`/api/posts/${req.params.id}`); res.json(data);}); // Create postapp.post('/api/posts', async (req, res) => { const data = await proxyPost('/api/posts', req.body); res.json(data);}); // Publish a draftapp.post('/api/posts/:id/publish', async (req, res) => { const data = await proxyPost(`/api/posts/${req.params.id}/publish`, {}); res.json(data);}); app.listen(process.env.PORT || 3001, () => { console.log('Proxy server running on :3001');}); ``` This gives your React app a same-origin API that mirrors Postproxy’s endpoints. No API key in the browser. No CORS issues. Add error handling and rate limiting before you ship this to production — but for building the dashboard, this is enough. ## Screen 1: Connected accounts The accounts screen is the first thing a user sees. It answers one question: “Where can I publish?” Fetch profiles on mount and render them as a list. Each profile has a platform, a display name, and a status. ``` import { useEffect, useState } from 'react'; interface Profile { id: string; name: string; platform: string; status: string; expires_at: string | null;} export function Accounts() { const [profiles, setProfiles] = useState([]); useEffect(() => { fetch('/api/profiles') .then(res => res.json()) .then(data => setProfiles(data)); }, []); return (

Connected Accounts

{profiles.map(profile => (
{profile.platform} {profile.name} {profile.status} {profile.status === 'expired' && ( )}
))}
);} ``` The `status` field does the heavy lifting. An `active` profile is ready to publish. An `expired` profile needs reconnection — the user’s OAuth token has lapsed. Show this clearly. A “Reconnect” button that triggers a new Initialize Connection flow is the right UX. Don’t hide expired accounts. Don’t silently skip them during publishing. Make the state visible. For reconnection, your backend calls Postproxy’s Initialize Connection endpoint and returns the OAuth URL. The frontend redirects the user there. After authentication, they land back on your callback URL with a refreshed token. ## Screen 2: Compose This is where posts are created. The compose screen needs three things: a text input, a profile selector, and a publish action. ``` import { useEffect, useState } from 'react'; interface Profile { id: string; name: string; platform: string; status: string;} export function Compose() { const [body, setBody] = useState(''); const [profiles, setProfiles] = useState([]); const [selected, setSelected] = useState([]); const [mediaUrl, setMediaUrl] = useState(''); const [publishing, setPublishing] = useState(false); const [result, setResult] = useState(null); useEffect(() => { fetch('/api/profiles') .then(res => res.json()) .then(data => setProfiles(data.filter((p: Profile) => p.status === 'active'))); }, []); function toggleProfile(id: string) { setSelected(prev => prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id] ); } async function handlePublish(draft: boolean) { setPublishing(true); const payload: any = { post: { body, draft }, profiles: selected, }; if (mediaUrl) { payload.media = [mediaUrl]; } const res = await fetch('/api/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); const data = await res.json(); setResult(data); setPublishing(false); } return (

Compose