Crosspost

Inspiration

In today's digital landscape, content creators, marketing teams, and entrepreneurs face a common challenge: social media fragmentation. Maintaining an active presence across LinkedIn, Instagram, Facebook, X, and YouTube often means logging into multiple dashboards, re-formatting captions, re-uploading media, and manually adjusting posting times.

What it does

Unified Multi-Platform Composer & Real-Time Validation Engineered a single-screen composer that eliminates social fragmentation by letting creators draft, format, and broadcast to multiple social networks in one click. Dynamic platform boundary guards: Implemented live character counters and visual warning indicators tailored to each social network's specific limits (e.g., LinkedIn's 3,000-character cap vs. Instagram's 2,200). Multi-channel feed previews: Built realistic rendering previews so users can inspect their post layout, media attachments, and typography as it will appear on each target channel before hitting publish.
Robust, Production-Ready OAuth 2.0 Security Architecture Zero client-side secrets: Kept all OAuth tokens, client secrets, and API keys securely isolated on the backend server. Resilient authorization flows: Implemented official OAuth 2.0 authorization code flows with PKCE and token refresh capabilities across LinkedIn, Meta Graph API (Instagram & Facebook Pages), and Google. Intelligent token health management: Created clear connection state indicators (Connected, Reconnect Required, Unlinked) with one-click token refresh mechanisms to gracefully recover from expired permissions.
Reliable Asynchronous Post Scheduling Queue Automated background dispatch: Designed a background queue worker that periodically scans database records and atomically broadcasts scheduled posts when their target timestamp is reached. Comprehensive queue management: Built a dedicated Post Queue interface that tracks delivery statuses (Scheduled, Published, Failed), provides failure diagnostics, allows single-click retries, and links directly to live published posts.
Resilient Multi-Tier Database & Infrastructure Fallbacks Dual database resilience: Configured Drizzle ORM with PostgreSQL connection pooling, auto-reconnect logic, and a seamless Supabase fallback system to prevent downtime during container restarts. Atomic media handling: Supported multi-format media uploads (images and videos up to 50MB) with secure storage and direct URL linking for platform broadcasts.
Transparent User Experience & Beta Workflow Handling Frictionless beta feature interception: Rather than leaving users with broken unconfigured API states for upcoming integrations (YouTube, Twitter/X, TikTok), we created a clean, dedicated Beta Version modal that explains channel availability and returns users safely to the application. Built-in compliance & help ecosystem: Integrated comprehensive Terms of Service, Privacy Policy, Data Deletion requests, and a detailed Help & Support guide with step-by-step connection walkthroughs and FAQs.

How we built it

CrossPost was designed as a full-stack, modular web application built with modern web technologies:

The Frontend Experience React & TypeScript: Powered by Vite for lightning-fast development, structured with strict type safety across post models, social channel metadata, and user session states. Tailwind CSS: Designed with a responsive, high-contrast visual system featuring clean typography, clear visual hierarchy, and real-time character counters tailored to each platform's limits. Interactive Previews: Built a multi-channel preview engine that gives creators immediate visual feedback on how their media and copy will appear on target feeds.
The Backend & Integration Layer Node.js & Express: Implemented server-side RESTful API routes handling user authentication, session verification, and social provider communications. OAuth 2.0 Engine: Built custom OAuth 2.0 authorization code flows with PKCE (Proof Key for Code Exchange) and automated token refresh mechanisms for LinkedIn, Meta Graph API (Instagram & Facebook Pages), Twitter/X, and Google/YouTube. Database & Persistence: Implemented a relational data model using PostgreSQL and Drizzle ORM, with built-in connection pooling, query retries, and fallback handling for robust data storage. Automated Scheduling Queue: Created a background worker that regularly evaluates scheduled campaigns and orchestrates atomic multi-channel dispatches when the publish timestamp arrives.

Challenges we ran into

OAuth Redirects & Embedded Sandbox Constraints Challenge: Handling OAuth popups, session cookies, and callback routing within an iframe environment and dynamic cloud container URLs. Solution: Designed a dedicated callback listener pattern with window.opener.postMessage to safely transmit authorization tokens back to the parent window while keeping sensitive credentials hidden on the backend. Divergent Social Platform API Specifications Challenge: Every platform enforces different token lifetimes, media upload formats, rate limits, and character boundaries (e.g., 3,000 characters on LinkedIn vs. 280 on X). Solution: Developed a normalized abstraction layer that validates post length, transforms media payloads, and handles platform-specific API responses gracefully. Graceful Beta Feature Management Challenge: Some platforms require extended developer verification or custom API access tiers before production publishing can go live. Solution: Implemented an intuitive beta-state interceptor for upcoming platforms (YouTube, TikTok, X) that clearly informs users of channel availability and keeps them focused on live, production-ready integrations.

Accomplishments that we're proud of

Unified Multi-Platform Composer & Real-Time Validation Engineered a single-screen composer that eliminates social fragmentation by letting creators draft, format, and broadcast to multiple social networks in one click. Dynamic platform boundary guards: Implemented live character counters and visual warning indicators tailored to each social network's specific limits (e.g., LinkedIn's 3,000-character cap vs. Instagram's 2,200). Multi-channel feed previews: Built realistic rendering previews so users can inspect their post layout, media attachments, and typography as it will appear on each target channel before hitting publish.
Robust, Production-Ready OAuth 2.0 Security Architecture Zero client-side secrets: Kept all OAuth tokens, client secrets, and API keys securely isolated on the backend server. Resilient authorization flows: Implemented official OAuth 2.0 authorization code flows with PKCE and token refresh capabilities across LinkedIn, Meta Graph API (Instagram & Facebook Pages), and Google. Intelligent token health management: Created clear connection state indicators (Connected, Reconnect Required, Unlinked) with one-click token refresh mechanisms to gracefully recover from expired permissions.
Reliable Asynchronous Post Scheduling Queue Automated background dispatch: Designed a background queue worker that periodically scans database records and atomically broadcasts scheduled posts when their target timestamp is reached. Comprehensive queue management: Built a dedicated Post Queue interface that tracks delivery statuses (Scheduled, Published, Failed), provides failure diagnostics, allows single-click retries, and links directly to live published posts.
Resilient Multi-Tier Database & Infrastructure Fallbacks Dual database resilience: Configured Drizzle ORM with PostgreSQL connection pooling, auto-reconnect logic, and a seamless Supabase fallback system to prevent downtime during container restarts. Atomic media handling: Supported multi-format media uploads (images and videos up to 50MB) with secure storage and direct URL linking for platform broadcasts.
Transparent User Experience & Beta Workflow Handling Frictionless beta feature interception: Rather than leaving users with broken unconfigured API states for upcoming integrations (YouTube, Twitter/X, TikTok), we created a clean, dedicated Beta Version modal that explains channel availability and returns users safely to the application. Built-in compliance & help ecosystem: Integrated comprehensive Terms of Service, Privacy Policy, Data Deletion requests, and a detailed Help & Support guide with step-by-step connection walkthroughs and FAQs.

What we learned

Token Security is Paramount: Storing third-party OAuth access and refresh tokens safely on the server side and never exposing private keys or secrets to the client browser is essential for building a trustworthy publishing tool. The Power of Real-Time Feedback: Subtle UI details—such as real-time character meters, connection status indicators (Connected, Reconnect Required, Unlinked), and instant channel previews—dramatically reduce user error before publishing. Resilient Scheduling: Building a background queue requires careful error handling, retry policies, and clear failure diagnostic logging so users always know whether their campaign succeeded or why a specific channel rejected a broadcast.