Postly AI

"Most small businesses have no marketing team. Postly changes that upload a product photo, get ready-to-post content for Facebook, X & Instagram in 30 seconds.

Comment

Inspiration

In the fast-paced world of digital marketing, e-commerce managers and solopreneurs spend an agonizing amount of time translating a single product photo into engaging, platform-specific content. We noticed that while generative AI was powerful, it was heavily fragmented. You had to use one tool to edit the image, another to write a caption, and then manually adjust the tone for Twitter versus LinkedIn. We asked ourselves: What if one raw product image was mathematically all you needed to generate any number of perfectly optimized marketing campaigns across multiple social platforms? Specifically, we wanted to reduce the time-to-market equation from T = (time to analyze + time to write + time to edit) × number of platforms down to roughly a single, constant workflow. This inspired Postly AI — an enterprise-grade, end-to-end campaign generator that turns a single image drag-and-drop into a complete marketing strategy.

What it does

  1. Upload & Polish Start by dropping in your product photo. No preparation needed — just the image as it is.
  2. AI Vision Analysis Postly's vision model gets to work immediately, reading the image like a seasoned marketer would. It picks up on materials, key product attributes, likely price points, and who the product is actually for.
  3. Multi-Channel Generation From that analysis, Postly writes platform-native copy for Facebook, X (Twitter), Instagram, LinkedIn, and TikTok. Each one shaped around the tone, format, and audience that platform demands. Not the same caption copy-pasted five times. Actually different content.
  4. Humanize This is where you take the wheel. Dial in the tone urgent, professional, casual or jump in and edit the copy directly. The AI gives you a strong foundation; you make it sound like you.
  5. Distribution When you're ready, share straight to your platforms via your device's native share sheet, or save everything to your enterprise dashboard for later. ## How we built it Postly is built on a modern, highly secure client-server architecture designed to be both robust and developer-friendly. Frontend (The Client) The interface is built with React (via Vite) and Tailwind CSS. We invested heavily in the visual experience, incorporating glassmorphism, deep contrast dark modes, fluid micro-animations, and clean modern typography powered by Google's Outfit and Inter fonts. Backend (The Proxy Server) An Express.js Node server sits at the center of everything. It handles all communication with external APIs, meaning zero API keys are ever exposed to the browser. Your credentials stay server-side, always. Database, Storage & Auth Instead of a traditional MongoDB setup, we went all-in on Supabase. It handles user authentication via JWT session management, stores campaign data in a PostgreSQL table protected by Row Level Security, and keeps uploaded product images safe inside Supabase Storage buckets. The Intelligence The brains of Postly run on the OpenAI API, leveraging GPT-4 Vision to read and interpret product images and GPT-4's language capabilities to craft the marketing copy. It is the engine that connects a simple image upload to a fully formed campaign strategy. ## Challenges we ran into CORS and the Web Share API We wanted a truly native mobile experience where tapping "Share" would open Instagram directly with the product image attached. The problem is that fetching remote URLs in the browser almost always runs into strict CORS blocks. Our solution was to mathematically reconstruct the image on the client side. We paint the remote image onto a hidden canvas element in the DOM, then extract it as a local Blob, essentially a pixel-by-pixel function mapping coordinates to RGBA color values. Because the image now lives locally in the browser's memory, CORS restrictions no longer apply. It's a clean workaround that makes the share experience feel completely effortless to the end user. Security Architecture Moving from a frontend-only prototype to a production-ready full-stack application meant taking security seriously from the ground up. We built custom Express middleware that intercepts every request and verifies the Supabase JWT Authorization token before the server is allowed to make a single call to OpenAI. No valid session, no access. It's a straightforward rule that keeps the entire intelligence layer locked down. State Management and Navigation The AI returns a rich, deeply structured JSON payload covering product attributes, tone analysis, and platform-specific posts all at once. Managing that volume of data while keeping the Single Page Application feeling fast and responsive required careful architectural decisions around how state flows through the dashboard and how the router handles transitions without ever making the user wait. ## Accomplishments that we're proud of Zero UI Lag During Generation One of the things we're most proud of is how the app feels while the AI is doing its work. Instead of a spinning loader or a frozen screen, every processing step is masked by a carefully crafted animated skeleton UI. The experience stays fluid and alive, so users never feel like they're sitting around waiting for a machine to think. Enterprise-Grade Aesthetics We refused to ship something that looked like a prototype. The final dashboard was designed to feel like a tool worth paying serious money for, the kind of polished SaaS product you'd expect from a well-funded startup. Every detail was intentional, from the CSS gradients and layout hierarchy to the crisp SVG iconography via Lucide. The goal was simple: open the app and immediately trust it. Bulletproof Backend Integration Deeply wiring Supabase Auth into a custom Express proxy layer is one of those things that sounds straightforward on paper but gets complicated fast in practice. We got it right. The result is a backend integration that is genuinely production-ready, secure by default, and stable enough to build on confidently as the product scales. ## What we learned Canvas API and Client-Side Image Processing Working through the CORS challenge gave us a much deeper appreciation for what the Canvas API is actually capable of. Manipulating images entirely on the client side, without ever touching a server, opens up a surprising range of possibilities we hadn't fully explored before. The Right Way to Use Supabase Service Role Keys This was a genuinely valuable lesson in backend architecture. Using Supabase's Service Role Key securely on the server lets you step around Row Level Security for administrative tasks like AI-driven writes, while keeping everything user-facing locked down with standard anon keys. Getting that balance right makes the whole system both flexible and airtight at the same time. Prompt Engineering is a Discipline of Its Own Getting an AI to return creative, high-quality content is one thing. Getting it to return that content in a perfectly structured, predictable JSON format every single time is another challenge entirely. We learned that reliable structured outputs require very deliberate system instructions. Something as specific as telling the model exactly which keys to use and exactly how many values to return makes the difference between an AI feature that works in demos and one that holds up in production. ## What's next for Postly AI

Saving campaigns and native sharing is a strong foundation, but the next phase is about closing the loop entirely and making Postly a true end-to-end publishing platform. Direct OAuth Integrations The clipboard is a workaround, not a finish line. The next major milestone is building full OAuth 2.0 flows for Facebook, X, and LinkedIn so users can hit "Publish" directly inside Postly and have the content land on the platform instantly, no copying, no switching apps, no extra steps. Analytical Feedback Loops The Dashboard's Performance tab will come alive with real data. We plan to implement webhooks that listen for live engagement signals, tracking changes in likes, clicks, and interactions as they happen, and feeding that data back into the dashboard in real time so users always know what is landing and what isn't. A/B Testing Variants Instead of generating a single post per platform, Postly will generate two distinct variants for each channel. Over a two hour window, the system will quietly monitor how each version performs and automatically put its weight behind the winner. Less guesswork, more results, all without the user having to lift a finger.

Built With

Share this project:

Updates