DEV Community: Leandro Barbosa

I Turned Sanity Into a Social Content Operating System That Publishes to Instagram

Leandro Barbosa — Mon, 28 Sep 2026 16:04:28 +0000

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

What I Built

I built Sanity Social, a social content operating system for agencies.
Instead of using Sanity only as a CMS, I used it to manage the complete lifecycle of social content: client brand guidelines, campaigns, AI-assisted drafting, editorial review, approval, scheduling, and finally publishing directly to Instagram.
A post moves through:
Idea → Draft → Internal Review → Client Review → Approved → Instagram
The final version isn't a mock integration. I connected a real Instagram Business account through Meta OAuth and successfully published an approved post from the Sanity application directly to Instagram.

Demo

Code

leandroBarbosaFR / social-sanity

Social Studio

An agency workspace for planning, approving, scheduling and publishing social content, built as a Sanity App SDK application. It runs inside the Sanity Dashboard, uses Sanity UI and the Content Lake for all content and workflow state, and publishes to Instagram through a small Next.js backend that is the only place secrets live.

Sanity models the whole editorial process here, not just the posts: client → brand guidelines → campaign → social post → review workflow (Sanity Workflows) → human approval → publishing to Instagram, orchestrated by Sanity Functions. AI caption drafts and an assistant run on Sanity Content Agent and read the structured brand and campaign context. AI never approves or publishes anything.

Sanity Challenge 2026

Built for the DEV + Sanity Challenge 2026, Path Two ("Vibe-Code Something Strange"), with Claude Code.

Sanity project	`8btwn23g`, dataset `production`
App (Sanity Dashboard)	"Social Studio" App SDK

…

View on GitHub

My Build Process

I built the project with Claude Code, using it as an implementation partner rather than a one-shot code generator.
The initial idea was simple: turn Sanity into a social content operating system for agencies, with structured client data, brand guidelines, campaigns, review states, AI-assisted drafting, and Instagram publishing.
One early direction was to turn the whole project into a full multi-tenant SaaS with custom authentication, tenant provisioning and Supabase RLS. That architecture still makes sense commercially, but it was too large for the challenge and distracted from the most interesting Sanity features.
So I changed direction and focused on a deeper Sanity-native experience using App SDK, Workflows, structured content and external API publishing.
The final editorial flow became:
Idea → Draft → Internal Review → Client Review → Approved → Instagram
Claude Code helped implement the custom App SDK interface, schemas, workflow synchronization, Instagram OAuth, encrypted token storage, publishing validation, duplicate-publish protection, AI drafting and tests.
Where things got interesting
Not everything worked on the first attempt.
The Content Agent integration looked correct locally but failed against the real API until I deployed the required Studio and fixed issues that only appeared in production.
Instagram was the biggest reality check. Mock publishing worked, but I wanted the submission to prove a real end-to-end flow. That meant configuring Meta OAuth, Instagram professional account access, Supabase, secure token storage and the deployed backend.
At one point the Sanity App reported “Backend unavailable” even though the backend health endpoint was fully healthy. That led to another debugging pass around the frontend/backend connection instead of assuming the deployment itself was broken.
The final test was real: I connected the @1367.studio Instagram Business account and successfully published an approved post from Social Studio directly to Instagram.
AI and structured content
I also wanted the AI feature to use Sanity for more than simple storage.
“Draft with AI” reads structured context including:

brand voice
target audience
content pillars
preferred and forbidden vocabulary
CTA preferences
campaign objective
key messages This produced much more relevant drafts than a generic caption prompt. Testing The final project has 72 passing tests, covering workflow behavior, publishing validation, Meta API errors, OAuth protection and duplicate publishing prevention. pnpm check passes typechecking, linting, tests and all builds. What I learned The biggest lesson was that Sanity became much more interesting once I stopped thinking of it only as a CMS. The same structured content can drive AI context, review workflows, scheduling and real external actions like publishing to Instagram.

Sanity Project Details

Sanity Project ID: 8btwn23g
Dataset: production
The project uses structured documents for:

clients
brand guidelines
campaigns
social posts
workflow and publishing state Sanity Workflows manage the editorial review process, while the custom App SDK interface provides the calendar, content views, post editor, Instagram preview, AI-assisted drafting, and publishing controls. The structured relationships between client, brand guidelines, campaign, and social post are also used as context for AI-generated content.

Some Images

Instagram post:

Sanity schemas:

NEXT JS x SANITY.IO

Leandro Barbosa — Wed, 02 Oct 2024 08:05:06 +0000

Building Dynamic Websites with Next.js and Sanity.io: A Perfect Match for Modern Development

When it comes to creating fast, scalable, and dynamic websites, two technologies stand out: Next.js and Sanity.io. Pairing these two powerful tools can take your web development to the next level. Let’s dive into why this combo is so effective and how it can streamline your projects.

Why Next.js?

Next.js, powered by React, is a versatile framework that allows you to build dynamic applications with server-side rendering (SSR) and static site generation (SSG). It's hybrid nature means that it offers the best of both worlds: dynamic pages for personalised content and static pages for faster load times.

Key Features:

SSG and SSR: Deliver both static and dynamic content seamlessly.
API Routes: Build full-stack applications by creating REST or GraphQL APIs directly within your project.
Automatic Image Optimisation: Handle image resizing, format conversion, and performance enhancements out-of-the-box.
Vercel Integration: Perfectly optimised for deployment on Vercel for speed and scalability.

Why Sanity.io?

Sanity.io is a headless CMS designed for flexibility and customisation. It allows developers to define custom content schemas and use real-time collaboration features to manage content more effectively. Sanity’s GROQ query language and its live preview features are a perfect match for the fast-paced development environment offered by Next.js.

Key Features:

Real-Time Content Updates: Sanity.io enables editors to see changes instantly, and combined with Next.js' hot-reloading, it results in a seamless content editing experience.
Custom Content Types: Tailor your content model exactly to your project’s needs with Sanity’s schema builder.
Scalability: Whether it’s a small portfolio or a large-scale e-commerce platform, Sanity can handle your content needs.
GROQ: A flexible query language that allows you to retrieve only the content you need—optimising performance and reducing API calls.

Why Use Them Together?

Speed and Performance: With Next.js’ static site generation and Sanity’s real-time updates, your site will not only load quickly but will also reflect changes instantly.
Flexibility: Sanity.io’s highly customisable structure allows you to create complex content models, while Next.js handles how this content is delivered, either statically or dynamically.
Developer Experience: Both tools provide excellent developer experiences—Next.js with its powerful framework and Sanity.io with its easy-to-use CMS interface.
Scalability and Security: Both Next.js and Sanity.io are built to scale, and Sanity.io's secure APIs ensure your data is safe.

Sanity.io Next.js

Let's talk JS 🤪

Leandro Barbosa — Fri, 06 Jan 2023 10:37:02 +0000

Let's talk about Types in javascript

Leandro Barbosa — Fri, 06 Jan 2023 09:59:53 +0000

In JavaScript, there are several types of data that you can work with in your code. Here is a list of the basic data types in JavaScript:

Number: Numbers can be integers (e.g., 42) or floating-point values (e.g., 3.14). In JavaScript, all numbers are represented as double-precision floating-point values.

String: A string is a sequence of characters, represented in JavaScript by either single or double quotes (e.g., 'Hello, world!' or "Hello, world!").

Boolean: A boolean value represents a true or false value.

null: The null value represents the absence of a value or a null reference.

undefined: The undefined value represents a value that has not been assigned a value.

In addition to these basic data types, JavaScript also has several composite data types, which are data structures that can hold multiple values. These composite data types include:

Array: An array is a collection of values that are all of the same data type. Arrays are created using square brackets (e.g., [1, 2, 3]).

Object: An object is a collection of key-value pairs. Objects are created using curly braces (e.g., {name: 'John', age: 30}).

instagram @leandrobarbosa_____

Google Logo

Leandro Barbosa — Thu, 05 Jan 2023 22:42:02 +0000

here is my version of google logo with only css

and here is the css code

and here our google-logo class

here we gonna create the retangle to do the G using the :before

and finally the triangle to be able to do the same shape as a google logo, with :after

----------------------THE FINAL RESULTS-----------------------