Forem: Carlos Rogerio Orioli

Desafio Headless: Checkout Shopify em App React Native com Zustand

Carlos Rogerio Orioli — Tue, 07 Apr 2026 18:10:07 +0000

O grande desafio no ecossistema Shopify é garantir que a transição entre a seleção de produtos nativa e o pagamento na WebView seja invisível para o usuário, mantendo a persistência do carrinho via Storefront API.

Para isso, utilizei o Zustand para o gerenciamento de estado global e o MMKV para garantir uma persistência de dados ultra-rápida, superior ao AsyncStorage tradicional. Confira o passo a passo dessa implementação:

1. Store com Zustand e MMKV

A store armazena o checkoutId e a webUrl. O uso do MMKV é o "game changer" aqui: ele é cerca de 30x mais rápido que o AsyncStorage, garantindo que o carrinho carregue instantaneamente.

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();
const mmkvStorage = {
  setItem: (name, value) => storage.set(name, value),
  getItem: (name) => storage.getString(name) ?? null,
  removeItem: (name) => storage.delete(name),
};

export const useShopifyStore = create(
  persist(
    (set) => ({
      checkoutId: null,
      webUrl: null,
      setCheckout: (id, url) => set({ checkoutId: id, webUrl: url }),
    }),
    { name: 'shopify-storage', storage: createJSONStorage(() => mmkvStorage) }
  )
);

2. Sincronização via Storefront API (GraphQL)

Antes de levar o usuário para o checkout, sincronizamos os itens locais com a Shopify para gerar (ou atualizar) a URL final de pagamento.

const syncCheckout = async (checkoutId, lineItems) => {
  const query = `
    mutation checkoutLineItemsReplace($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
      checkoutLineItemsReplace(checkoutId: $checkoutId, lineItems: $lineItems) {
        checkout { id, webUrl }
      }
    }
  `;

  const response = await fetch('https://SUA-LOJA.myshopify.com/api/2024-01/graphql.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': 'SEU_TOKEN',
    },
    body: JSON.stringify({ query, variables: { checkoutId, lineItems } }),
  });
  return await response.json();
};

3. O Checkout na WebView

Utilizamos a webUrl retornada pela API para abrir o checkout já preenchido, mantendo todas as regras de negócio da loja ativas.

import { WebView } from 'react-native-webview';

const ShopifyCheckout = () => {
  const { webUrl } = useShopifyStore();

  return (
    <WebView 
      source={{ uri: webUrl }} 
      sharedCookiesEnabled={true}
      startInLoadingState={true}
    />
  );
};

O que aprendi?

Arquitetura Agnostica: Validar a lógica na VTEX e replicar no Shopify mostra que um bom padrão de projeto sobrevive a qualquer stack.
Performance: No e-commerce de alto nível que entregamos na Converte, milissegundos salvos com MMKV convertem em vendas.

Sincronizando Zustand com VTEX OrderForm no React Native

Carlos Rogerio Orioli — Mon, 06 Apr 2026 17:22:34 +0000

Recentemente, precisei desenvolver uma integração de checkout VTEX dentro de um aplicativo React Native. O desafio era garantir que a experiência de compra fosse fluida, mantendo o estado do carrinho perfeitamente sincronizado entre o ambiente nativo do app e a finalização da compra na WebView.

Para resolver isso, utilizei o Zustand para o gerenciamento de estado global e a API de Checkout da VTEX para manipular o orderFormId.

A Arquitetura da Solução

A ideia central foi: o App gerencia os produtos e quantidades através de uma store leve Zustand e, antes de abrir o checkout, sincronizamos tudo com a VTEX via API.

1. Gerenciando o Carrinho com Zustand

A store armazena o orderFormId e persiste os dados para que o carrinho não se perca. Aqui, podemos escolher entre o AsyncStorage (padrão) ou o MMKV (para performance ultra-rápida).

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MMKV } from 'react-native-mmkv';

// Opção com MMKV (Alta Performance)
const storage = new MMKV();
const mmkvStorage = {
  setItem: (name, value) => storage.set(name, value),
  getItem: (name) => storage.getString(name) ?? null,
  removeItem: (name) => storage.delete(name),
};

export const useCartStore = create(
  persist(
    (set) => ({
      orderFormId: null,
      items: [],
      setOrderFormId: (id) => set({ orderFormId: id }),
      addToCart: (item) => set((state) => ({ items: [...state.items, item] })),
      clearCart: () => set({ items: [], orderFormId: null }),
    }),
    {
      name: 'cart-storage',
      // Troque 'mmkvStorage' por 'AsyncStorage' se preferir o padrão
      storage: createJSONStorage(() => mmkvStorage), 
    }
  )
);

Para esse projeto, utilizei o MMKV pela velocidade de leitura/escrita, mas a estrutura funciona perfeitamente com AsyncStorage também.

2. Sincronizando com a API da VTEX

Antes de navegar para a tela de checkout, enviamos os itens para o orderForm específico. Isso evita disparar várias chamadas de rede desnecessárias durante a navegação.

const syncCartWithVtex = async (orderFormId, items) => {
  try {
    await fetch(`https://{ACCOUNT}.vtexcommercestable.com.br/api/checkout/pub/orderForm/${orderFormId}/items`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        orderItems: items.map(i => ({ id: i.id, quantity: i.quantity, seller: "1" }))
      }),
    });
  } catch (error) {
    console.error("Erro na sincronização:", error);
  }
};

DICA: A VTEX às vezes exige que o cabeçalho vtex-id-client-authtoken seja enviado se o usuário já estiver autenticado no app, para que o carrinho não fique como "anônimo"

3. O Checkout na WebView

A sacada foi é injetar o orderFormId na URL da WebView. Assim, o checkout da VTEX já abre com todos os itens que o usuário escolheu no app.

import { WebView } from 'react-native-webview';

const VtexCheckout = () => {
  const { orderFormId } = useCartStore();

  // URL que vincula a sessão ao carrinho do App
  const checkoutUrl = `https://www.sualoja.com.br/checkout/?orderFormId=${orderFormId}#/cart`;

  return (
    <WebView 
      source={{ uri: checkoutUrl }}
      sharedCookiesEnabled={true} //PARA MANTER A SESSÃO 
      startInLoadingState={true}
    />
  );
};

Lições aprendidas

Performance: Sincronizar o estado via API antes de abrir a WebView entrega uma experiência muito mais "nativa" do que tentar manipular o DOM da página carregada.

Persistência: O uso do Zustand com middleware de persistência é imbatível para lidar com carrinhos em dispositivos móveis.
Desenvolver soluções de e-commerce de alta performance é o que move a gente na Converte .

E você, já teve que lidar com essa ponte entre o nativo e o web no e-commerce? Vamos trocar uma ideia nos comentários!

Nietzsche in a Madhouse

Carlos Rogerio Orioli — Wed, 01 Apr 2026 18:10:20 +0000

This is a submission for the DEV April Fools Challenge

What I Built

Nietzsche in a Madhouse — A satirical "Anti-Productivity" AI agent. While most AIs try to help you be efficient, this one uses the full arsenal of Western philosophy (nihilism, existentialism, and grandiloquent rhetoric) to argue against your most basic, healthy, and logical life decisions.

Want to brush your teeth? It's "bacterial genocide." Want to sleep? It's "surrendering your consciousness to the amorphous void."

Demo

Live Demo

Code

GitHub Repository
The project is built with Next.js and integrated with the Google Gemini API.
The core logic resides in:

app/api/argue/route.ts: The philosophical persona prompt and Gemini integration.
app/page.tsx: The clean, "Dark Academia" inspired UI and custom Nietzsche SVG illustration.

How I Built It

Framework: Next.js 16 (App Router)
AI Brain: Google Gemini API using the gemini-2.5-flash-lite model.
Styling: Vanilla CSS with a focus on premium serif typography and a "Claude-esque" minimal aesthetic.
Persona Engineering: A complex system prompt that forces the AI into a "dramatically condescending" mode, ensuring it never agrees with the user and always ends with a devastating rhetorical question.

Prize Category

Best Google AI Usage — We took one of the most powerful language models in existence and dedicated its entire processing power to gaslighting users into thinking that drinking water is a "surrender to biological determinism." It’s an ode to the "delightfully useless" potential of modern AI.

Why Next.js is the Ultimate Tool for the BFF (Backend-for-Frontend) Pattern?

Carlos Rogerio Orioli — Wed, 01 Apr 2026 16:49:03 +0000

As a developer, I’m constantly looking for ways to bridge the gap between complex backend architectures and seamless user experiences. If you are dealing with microservices or legacy APIs, you’ve likely faced the classic "Data Fetching Headache."

The Problem: Overfetching & Underfetching

We’ve all been there: your frontend needs a simple user dashboard, but the legacy API returns a massive 2MB JSON with fields you don't need (Overfetching). Or worse, you have to hit four different endpoints just to display a single page (Underfetching).

This creates latency, drains mobile batteries, and complicates your frontend logic.

The Solution: The BFF Pattern

The Backend-for-Frontend (BFF) pattern acts as a specialized intermediary. It aggregates multiple API calls, filters out the "noise," and delivers a clean, optimized payload specifically tailored for the UI.

Why Next.js is the "Built-in" BFF

If you are using Next.js (especially with the App Router), you already have a powerful BFF layer without needing to spin up a separate Express or Go server.

Here is the professional way to structure this: Service -> Route Handler -> Component.

1. The Service (The "BFF Logic")

This file handles the "dirty work": fetching from legacy systems, using private keys, and cleaning the data. This stays strictly on the server.

// services/apiService.ts
export async function getProductDashboard(productId: string) {
  const API_URL = process.env.EXTERNAL_API_URL;
  const API_KEY = process.env.API_SECRET_KEY; // Securely stored on the server

  const res = await fetch(`${API_URL}/products/${productId}`, {
    headers: { 'Authorization': `Bearer ${API_KEY}` },
    next: { revalidate: 3600 } // ISR: Cache for 1 hour
  });

  if (!res.ok) throw new Error('Failed to fetch from Legacy API');

  const rawData = await res.json();

  // BFF Logic: Transform and "clean" the data for the UI
  // We only return what the frontend actually uses.
  return {
    name: rawData.title.toUpperCase(),
    price: `$ ${rawData.price_usd}`, 
    stockStatus: rawData.inventory > 0 ? 'In Stock' : 'Out of Stock',
    lastUpdate: new Date().toLocaleDateString()
  };
}

2. The Route Handler (The Internal Bridge)

This acts as your own private API endpoint. It allows your Client Components to trigger data fetching without ever exposing the sensitive Legacy API.

// app/api/products/[id]/route.ts
import { NextResponse } from 'next/server';
import { getProductDashboard } from '@/services/apiService';

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    // Calling our internal service
    const data = await getProductDashboard(params.id);
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

3. The Client Component (The Consumer)

The UI remains clean and decoupled. It calls your BFF endpoint, receiving the "perfect" object.

'use client';

import { useState } from 'react';

export default function ProductQuickView({ id }: { id: string }) {
  const [data, setData] = useState(null);

  const loadDetails = async () => {
    // We fetch from our INTERNAL Route Handler, not the legacy API!
    const res = await fetch(`/api/products/${id}`);
    const result = await res.json();
    setData(result);
  };

  return (
    <div className="p-4 border rounded">
      <button 
        onClick={loadDetails}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Quick View Product
      </button>

      {data && (
        <div className="mt-4">
          <h3>{data.name}</h3>
          <p>Price: <strong>{data.price}</strong></p>
          <p>Status: {data.stockStatus}</p>
        </div>
      )}
    </div>
  );
}

Why This Matters

Security: Your API_SECRET_KEY never leaks to the browser.
Abstraction: If the legacy API changes its JSON structure tomorrow, you only update the Service. Your Route Handlers and Components stay exactly the same.
Performance: You reduce the payload size significantly, which is critical for high-conversion e-commerce sites.

Final Thoughts

I’m Carlos, a senior developer and founder of Converte based in Florianópolis, Brazil. In my experience, choosing the right architecture isn't just about "clean code"—it’s about performance and results.

Using Next.js as a BFF allows us to deliver lightning-fast interfaces while keeping the codebase maintainable. Whether I’m catching waves here in Floripa or building complex digital solutions, the goal is always the same: agility and balance.

How about you? Do you prefer building a separate API layer, or are you leveraging Next.js's native server capabilities?

Quando usar map, filter, reduce, for, forEach e flatMap em JavaScript

Carlos Rogerio Orioli — Fri, 02 Jan 2026 10:23:26 +0000

`map`, `filter`, `reduce`, `for`, `forEach` e `flatMap`: qual usar?

Se você trabalha com JavaScript ou TypeScript, já se perguntou qual método usar para percorrer arrays — e por quê?

Aqui está um guia rápido, direto ao ponto, com exemplos simples

const numbers = [1, 2, 3, 4, 5];

`map` → transformar dados

Use quando quiser transformar cada item do array sem alterar o tamanho.

const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

`filter` → remover dados

Use quando precisar manter apenas os itens que atendem a uma condição.

const even = numbers.filter(n => n % 2 === 0);
// [2, 4]

`reduce` → calcular ou agrupar

Use quando o objetivo for chegar a um único valor (soma, objeto, agrupamento).

const sum = numbers.reduce((total, n) => total + n, 0);
// 15

`for` → controle total

Use quando precisar de controle total da iteração, como break ou continue.

const result = [];
for (let i = 0; i < numbers.length; i++) {
  result.push(numbers[i] * 2);
}
// [2, 4, 6, 8, 10]

`forEach` → executar ações

Use quando quiser apenas executar efeitos colaterais, sem retornar dados.

numbers.forEach(n => {
  console.log(n);
});

`flatMap` → map + flatten

Use quando o map retorna arrays e você quer evitar .map().flat().

const pairs = numbers.flatMap(n => [n, n * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Regra de ouro

Transformar → map
Filtrar → filter
Calcular/agrupar → reduce
Executar ações → forEach
Evitar arrays aninhados → flatMap

E você?
Qual desses métodos você mais usa no dia a dia?
Já se perdeu em um reduce achou difícil de ler?

Comenta aí

JavaScript Syntax Cheatsheet (Guia Rápido)

Carlos Rogerio Orioli — Sun, 28 Dec 2025 22:07:03 +0000

Um guia de referência rápida para as principais sintaxes e recursos modernos do JavaScript.

Variáveis e Escopo

No JavaScript moderno, o escopo é fundamental. Utilizamos const para valores que não mudam e let para variáveis que precisam de ser reatribuídas dentro do seu bloco de código. O var deve ser evitado por ter um escopo menos previsível.

// Constante: valor que não pode ser reatribuído
const pi = 3.14;

// Let: variável com escopo de bloco
let contador = 0;
contador += 1;

// Var: (Legado/Não recomendado) Escopo de função
var nome = "Global";

Tipos de Dados

O JavaScript é uma linguagem de tipagem dinâmica. Isto significa que uma variável pode conter diferentes tipos de dados, desde textos simples a estruturas complexas como objetos e listas.

const texto = "Olá Mundo";       // String (Texto)
const numero = 42;               // Number (Inteiro ou Decimal)
const booleano = true;           // Boolean (Verdadeiro ou Falso)
const lista = [1, 2, 3];         // Array (Lista de valores)
const objeto = { id: 1 };        // Object (Pares de chave/valor)
const vazio = null;              // Null (Valor nulo intencional)
let indefinido;                  // Undefined (Variável sem valor)

Funções

As funções são blocos de construção essenciais. As Arrow Functions introduzidas no ES6 tornaram a escrita mais concisa, especialmente quando a lógica é simples e pode ser escrita numa única linha com retorno implícito.

// Função Tradicional
function somar(a, b) {
  return a + b;
}

// Arrow Function (Moderna)
const subtrair = (a, b) => a - b;

// Arrow Function com retorno implícito (não precisa de {} ou return)
const dobrar = n => n * 2;

Condicionais

As condicionais permitem que o código tome decisões. O operador ternário é uma forma elegante de escrever um if/else simples numa só linha, enquanto o switch ajuda a gerir múltiplas condições de uma mesma variável.

// If / Else padrão
if (idade >= 18) {
  console.log("Adulto");
} else {
  console.log("Menor");
}

// Operador Ternário (Forma curta de if/else)
const status = idade >= 18 ? "Liberado" : "Bloqueado";

// Switch para múltiplas opções
switch (cor) {
  case "red": return "Vermelho";
  case "blue": return "Azul";
  default: return "Cor desconhecida";
}

Loops e Iteração

Para percorrer dados, o for...of é a forma mais legível para Arrays. Além disso, métodos funcionais como .map(), .filter() e o poderoso .flatMap() permitem transformar, filtrar e achatar coleções de dados de forma eficiente.

const frutas = ["Maçã", "Banana", "Uva"];

// For...of: Ideal para percorrer elementos de um array
for (const fruta of frutas) {
  console.log(fruta);
}

// Map: Cria um novo array transformando cada elemento
const dobrados = [1, 2, 3].map(n => n * 2);

// Filter: Cria um novo array apenas com os itens que passam no teste
const pares = [1, 2, 3, 4].filter(n => n % 2 === 0);

// FlatMap: Mapeia cada elemento e achata o resultado num novo array
// Útil para quando a função de mapeamento retorna um array
const frases = ["Olá mundo", "JS é incrível"];
const palavras = frases.flatMap(f => f.split(" ")); 
// Resultado: ["Olá", "mundo", "JS", "é", "incrível"]

Template Literals

Esquecer a concatenação manual com o símbolo +. Com as crases, podemos interpolar variáveis e expressões diretamente dentro da string, facilitando a leitura do código.


const usuario = "Carlos";
// Uso de ${} dentro de crases para inserir valores dinâmicos
console.log(`Olá, ${usuario}! Hoje é ${new Date().toLocaleDateString()}.`);

Desestruturação (Destructuring)

A desestruturação permite "desembalar" valores de objetos ou arrays de forma rápida. É extremamente útil para capturar propriedades de objetos de configuração ou retornos de funções.

const config = { tema: "dark", lang: "pt-br" };

// Extraindo propriedades 'tema' e 'lang' diretamente do objeto
const { tema, lang } = config;

// Extraindo valores por posição de um array
const [primeiro, segundo] = [10, 20];

Promises e Async/Await

Para operações que demoram tempo (como carregar dados da internet), usamos o modo assíncrono. O par async/await permite escrever código assíncrono que se parece com código sequencial, tornando-o muito mais fácil de manter.

// A palavra 'async' indica que a função lidará com processos demorados
async function buscarDados() {
  try {
    // 'await' pausa a execução até que a promessa seja resolvida
    const resposta = await fetch("[https://api.exemplo.com/dados](https://api.exemplo.com/dados)");
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    // Captura erros se a conexão ou os dados falharem
    console.error("Erro na busca:", erro);
  }
}

Spread & Rest Operator

Os três pontos ... têm dois papéis: o Spread "espalha" elementos de um array noutro, enquanto o Rest "recolhe" vários argumentos numa única variável dentro de uma função.

// Spread (Espalhar): Copia ou expande arrays/objetos
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // Resulta em [1, 2, 3, 4]

// Rest (Agrupar): Transforma argumentos soltos num array
function listar(...itens) {
  console.log(itens); // 'itens' será um array com todos os argumentos
}

Dica de Performance: Utilize sempre const por padrão. Só mude para let se tiver a certeza absoluta de que o valor da variável precisará de ser alterado durante a execução.

My Year Review (2025) - by Chat GPT

Carlos Rogerio Orioli — Fri, 26 Dec 2025 20:03:58 +0000

🔎 Perfil Profissional & Presença Online
🧠 Identidade e foco

Você se apresenta como Carlos Rogerio Orioli — um desenvolvedor Web (Front-end e Full-stack) com fortes conhecimentos em JavaScript, React, Node.js, WordPress, Web Design, Martech e Engenharia de Prompt para IA, além de atuação em design gráfico e produção de conteúdo técnico.
GitHub

Seu perfil profissional combina desenvolvimento técnico com marketing e design, refletindo uma visão ampla e estratégica de produtos digitais.
GitHub

🛠️ GitHub — Repositórios e Contribuições
📈 Atividade no GitHub

No GitHub você tem um perfil ativo com:

98 repositórios públicos (especialmente projetos próprios).
GitHub

~86 estrelas acumuladas na comunidade, indicando reconhecimento pelo seu trabalho.
GitHub

~280 seguidores e ~496 seguindo, mostrando bom engajamento e networking técnico.
GitHub

⭐ Destaques de 2025

Projetos notáveis:

voafoguete — repositório colaborativo com recursos e cursos gratuitos para desenvolvimento pessoal/tecnológico.
GitHub

TextVox-BACKEND — backend em TypeScript para conversão de áudio em texto utilizando OpenAI APIs (projeto com foco prático em IA).
GitHub

Esses projetos mostram o seu interesse em aplicações úteis, open-source e em integração com IA, além de compartilhar conhecimento com a comunidade.

📝 dev.to — Conteúdo Publicado & Engajamento

No DEV Community (dev.to) você se destaca como um autor ativo e engajado:

🏅 Conquistas na plataforma

Você conquistou diversos badges importantes em 2025, incluindo:

2025 Hacktoberfest Writing Challenge Completion — completou ao menos um prompt no evento de escrita de 2025.
DEV Community

Streaks de comentários (1-week e 2-week wellness) — ativa participação na comunidade via comentários.
DEV Community

JavaScript badge — contribuição destacada na comunidade de JS.
DEV Community

Longevity badges — reconhecimento pela sua presença contínua na plataforma ao longo dos anos.
DEV Community

📚 Conteúdo técnico publicado

Você produziu diversos artigos em 2025 sobre tópicos relevantes como:

✔️ Construção de agentes de notícias hiper-personalizados
✔️ Uso de React e IA no desenvolvimento
✔️ Desafios DevChallenge e Frontend Challenges
✔️ Técnicas e práticas em JavaScript e web em geral

Isso demonstra que você compartilha conhecimento prático e atual, contribuindo com a comunidade de desenvolvedores e fortalecendo sua marca pessoal.
DEV Community

💼 LinkedIn — Projetos e Portfólio

No LinkedIn você tem compartilhado projetos e atualizações que demonstram evolução técnica e aplicação prática:

🧠 Projetos compartilhados em 2025

✔️ Aplicação web que consulta CNPJs pela Brasil API e envia os resultados por e-mail, um exemplo claro de integração de APIs e automação de fluxo de dados.

✔️ Postagens sobre uso de Prisma e Turso (tecnologias modernas de banco de dados/infra).

Essas postagens mostram que você está desenvolvendo soluções completas, explorando stacks modernas e compartilhando essa evolução com profissionais da sua rede.

📊 Principais Conquistas e Aprendizados — 2025
🚀 Desenvolvimento Técnico

✔️ Fortalecimento em Full-stack development (React, Node.js, TypeScript)
✔️ Projetos com IA e APIs avançadas (OpenAI, Brasil API)
✔️ Continuação de projetos open-source relevantes e úteis

📣 Conteúdo e Comunidade

✔️ Produção consistente de artigos técnicos úteis no dev.to
✔️ Participação ativa com comentários e engajamento
✔️ Construção de autoridade técnica na comunidade

🌐 Visibilidade e Engajamento

✔️ Boa rede de seguidores no GitHub
✔️ Conteúdo técnico reconhecido por badges e participação comunitária
✔️ Postagens no LinkedIn com foco em aprendizado e soluções práticas

🎯 O que isso significa para sua carreira

Em 2025 você consolidou:

✨ Sua presença como desenvolvedor completo, não só codificando, mas também compartilhando conhecimento.
✨ A capacidade de entregar soluções práticas, integrando APIs, automação, design e IA.
✨ Uma comunidade confiável ao seu redor (seguidores no GitHub e leitores no dev.to).

Isso é um equilíbrio valioso entre produção técnica e influência comunitária — ideal para quem mira oportunidades como consultoria, liderança técnica ou desenvolvimento de produtos digitais próprios.

Bora construir um Agente de Notícias Hiper-Personalizado? 🤖📰 (Codar Juntos)

Carlos Rogerio Orioli — Sat, 20 Dec 2025 02:37:43 +0000

A ideia: Chega de newsletter genérica!

Você já percebeu que a maioria das newsletters de tech ou são genéricas demais ou só cobrem o que acontece no Vale do Silício? Eu decidi mudar isso criando um Software Agêntico que faz curadoria sob medida, e quero convidar vocês para codarem comigo.

Não é só um chatbot. É um agente autônomo que:

Varre a web em tempo real usando Tavily.
Filtra por País e Idioma: Você quer notícias sobre IA que saíram no Japão, mas resumidas em Português? O agente resolve.
Sintetiza com Gemini 1.5 Pro: O "cérebro" que traduz, resume e formata.
Entrega via Resend: Automação direto para a sua inbox (ou de uma audiência inteira).

A Stack (Modern & Clean) 💻

Escolhi essa stack para ser fácil de subir, mas potente o suficiente:

Framework: Next.js (Vercel)
Intelligence: Gemini SDK + Tavily API (Os olhos e o cérebro)
Database & ORM: MongoDB + Prisma (para salvar as preferências de cada user)
E-mail: Resend (usando Audiences para escalabilidade)
Design de E-mail: MJML (para garantir que o e-mail seja responsivo em tudo)

O Plano de Voo 🚀

[x] Definir a arquitetura (Prisma + Mongo).
[x] Criar o formulário de captura de preferências (Temas, Países, Idiomas).
[X] Orquestrar o loop do agente: Pesquisa -> Resumo -> Tradução.
[X] Configurar o Cron Job na Vercel para o envio semanal automático.

Por que estou postando isso?

Quero aprender em público e trocar ideia com quem também está explorando o mundo de AI Agents. Se você manja de TypeScript, quer entender como orquestrar LLMs além do "prompt básico" ou quer discutir arquitetura de banco de dados, esse projeto é pra você.

Como você pode colar junto:

Comenta aí: Qual feature você adicionaria em um agente de notícias?
Stack: Qual parte te interessa mais? (Prompt Engineering, Integração de APIs ou o Frontend no Next?)
GitHub: Vou liberar o repo com a aplicação completa!

🔑 As 5 Contas Necessárias para o Projeto

Para construir este software agêntico, precisaremos integrar os melhores serviços de IA e infraestrutura do mercado. Antes de começar o código, crie suas contas e pegue suas chaves de API:

GitHub 🐙 (Onde o código vive)
Para que serve: Hospedar o seu repositório, gerenciar versões e permitir que outras pessoas colaborem com o seu projeto.
Criar conta no GitHub
Google AI Studio (Gemini) 🧠 (O cérebro)
Para que serve: É aqui que você gera a sua GEMINI_API_KEY. O Gemini 2.5 será o responsável por raciocinar sobre as notícias, traduzir e formatar o e-mail.
Pegar API Key do Gemini
Tavily AI 🔍 (Os olhos)
Para que serve: Diferente do Google comum, o Tavily é um motor de busca feito especificamente para agentes de IA. Ele retorna resultados limpos e otimizados para que o Gemini possa ler.
Criar conta no Tavily
Resend 📧 (O mensageiro)
Para que serve: Plataforma moderna para envio de e-mails transacionais. Vamos usá-la para disparar a newsletter e gerenciar a lista de inscritos (Audiences).
Criar conta no Resend
Vercel ▲ (A casa do projeto)
Para que serve: Onde faremos o deploy da nossa aplicação Next.js. Além disso, usaremos o Vercel Cron Jobs para fazer o agente "acordar" sozinho toda semana.
Criar conta na Vercel

💡 Dica de Segurança

Nunca suba suas chaves de API diretamente no GitHub! No Dia 1 do vídeo, mostro como usar o arquivo .env para manter essas chaves seguras apenas na sua máquina e nas configurações da Vercel.

📅 Plano de Desenvolvimento Detalhado

Dia 1: Estrutura Base e Banco de Dados

O objetivo hoje é ter o projeto rodando localmente e o banco pronto para receber inscritos.

Setup: npx create-next-app@latest ai-newsletter
Libs: @prisma/client, @google/generative-ai, @tavily/core, resend, zod, mjml.
DB: Configurar o schema.prisma com o modelo Subscriber.

Dia 2: Frontend e Captura de Leads

Interface onde o usuário escolhe seus interesses.

Formulário: Inputs de E-mail, Selects para País/Idioma e Checkboxes para Temas.
API: Rota /api/subscribe para salvar no MongoDB via Prisma.

Dia 3: O Cérebro do Agente (Core Logic)

A "mágica" agêntica:

Search & Synthesis: Função que integra Tavily (busca) com Gemini (raciocínio).
Prompt Engineering: Instruir o Gemini a formatar especificamente para o idioma do usuário.

Dia 4: Integração Resend e Loop de Envio

Transformar o conteúdo em e-mails reais.

MJML Integration: Usar MJML para garantir que o layout gerado pela IA seja responsivo.
Batch Logic: Rota que processa todos os inscritos e dispara os envios.

Dia 5: Deploy e Automação na Vercel

O agente ganha vida própria:

Vercel Cron: Configurar o vercel.json para o agendamento (ex: toda segunda às 9h).
Teste Final: Cadastro real e validação do recebimento.

GITHUB DO PROJETO

Bora parar de só dar "oi" pro ChatGPT e começar a construir ferramentas que realmente entregam valor de forma autônoma. 🚀

Acendendo Velas (e Códigos) com React e IA neste Chanucá!

Carlos Rogerio Orioli — Tue, 09 Dec 2025 12:01:37 +0000

🕎 Acendendo Velas (e Códigos) com React e IA neste Chanucá! ✨

Neste Chanucá, decidi ir além do convencional e unir tradição milenar com tecnologia de ponta. O resultado é uma Hanukiá interativa que não é apenas um código bonito, mas que também respeita o calendário real da festividade!

Minha aplicação garante que as velas só podem ser acesas nos dias e horários corretos (sim, a validação de data está rigorosa!). E para deixar a experiência ainda mais mágica, o app traz histórias e receitas exclusivas geradas usando Inteligência Artificial. 🤯

🛠️ A Stack por Trás do Milagre

Foco total em performance e interatividade! Veja o que usei para construir este projeto:

Frontend: React 19 + Vite (Para uma performance instantânea e desenvolvimento rápido).
Estilo: Tailwind CSS (Para um visual moderno, responsivo e sem dores de cabeça).
Animações: Framer Motion (Essencial para o efeito drag & drop das velas e as animações realistas da chama 🔥).
Lógica Principal: Validação de datas complexa para garantir a fidelidade à tradição judaica.
A Mágica da IA: Integração com a API do Google Gemini para gerar curiosidades históricas e conteúdos culinários únicos a cada interação do usuário.

Foi um desafio técnico super divertido implementar as regras de data junto com a interatividade dinâmica proporcionada pela IA.

🔗 Quer Acender Uma Vela?

Dê uma olhada no projeto e me diga o que achou!

Live Demo da Hanukiá
Código Fonte no GitHub

💬 Vamos Trocar Uma Ideia!

Se você curte React, se já fez alguma integração divertida com LLMs (Large Language Models), ou se simplesmente quer compartilhar sua tradição festiva favorita (de qualquer cultura!), deixa um comentário!

SEO & OG Analyzer whit AI

Carlos Rogerio Orioli — Sat, 22 Nov 2025 17:29:56 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built the SEO & OG Analyzer AI, a comprehensive web tool that helps developers and marketers optimize their websites instantly.

Users simply paste a URL, and the app uses Google Gemini to simulate a crawl, analyzing the page's content to generate:

Open Graph Previews: A visual simulation of how the link looks on social media (Facebook/LinkedIn).
SEO Audit: An analysis of titles, descriptions, headings, and missing tags with AI-suggested improvements.
Structured Data: Automatically generated, valid JSON-LD schemas (Organization, Article, etc.).
Ready-to-use Code: HTML meta tags and JSON scripts formatted for copy-pasting.

I utilized the Gemini API (gemini-2.5-flash) with the Google Search Tool (googleSearch) to allow the AI to fetch real-time context about the URL without needing a complex backend web scraper.

The UI is built with React, TypeScript, and Tailwind CSS.

Demo

Features in Action

Visual Preview: See exactly how your link appears on social networks.
AI Insights: Gemini critiques your current SEO strategy and suggests specific keywords and headings.
Code Generation: Get the exact <meta> tags and JSON-LD needed to fix the site.

Live Demo: https://ia-seo-gen.vercel.app/
GitHub: https://github.com/rogeriorioli/IA-SEO-GEN

My Experience

Working through this track taught me that Prompt Engineering can effectively replace complex backend logic.

Traditionally, building this app would require:

a web scraping library (like Puppeteer),
a parsing library (like Cheerio),
and complex logic to extract metadata.

With Gemini, I simply provided a prompt acting as a "Technical SEO Expert" and used the googleSearch tool to do the heavy lifting.

Key Takeaways

Strict JSON Handling: The biggest challenge was ensuring the AI returned parsable JSON. I learned to implement robust error handling to strip Markdown code blocks ( ``` json) and clean up the response before parsing it in the frontend.

Tool Use:
Enabling the googleSearch tool was a game-changer. It allowed the model to "see" the website in real-time rather than hallucinating content based on the URL string alone.
Speed:
The gemini-2.5-flash model is incredibly fast, making the user experience feel almost instantaneous, even while performing complex analysis.

This project showed me that AI isn't just for chatbots—it's a powerful engine for structural analysis and code generation.

Helloween AI chat agent

Carlos Rogerio Orioli — Sun, 26 Oct 2025 12:31:01 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

Hello Chat is an interactive AI-powered chat interface with a spooky Halloween theme. I created a modern chat application similar to ChatGPT, but with a festive Halloween twist that keeps the spooky spirit alive year-round!

Key Features:

🎃 Halloween-themed UI with custom spooky animations (floating ghosts, glowing pumpkins)
👻 AI Assistant powered by Google Gemini that responds exclusively about Halloween topics
🧛 Smart topic redirection - the AI politely redirects off-topic conversations back to Halloween themes
🌍 Multi-language support with an easy toggle between Portuguese 🇧🇷 and English 🇺🇸
💀 Modern, responsive design with custom dark color scheme and animations
🕷️ Real-time chat interface with smooth message animations

The Halloween Theme:
I chose a dark, atmospheric gradient background (purple to black) with vibrant orange accents - the classic Halloween color palette. The interface includes animated emojis (🎃👻🦇🧛💀) that float and glow, creating an immersive Halloween atmosphere. Custom CSS animations make the ghosts float up and down, and pumpkins glow with a pulsing effect.

The chat interface itself is styled to feel modern and clean (like ChatGPT/Gemini) but with that spooky Halloween touch - black message bubbles with orange borders for the AI, and vibrant orange bubbles for user messages.

Demo

🚀 Live Demo: HELLO AGENT CHAT

📦 Repository: GitHub Repository

💻 Local Demo: Clone the repo and run npm run dev, then visit http://localhost:3000

🏗️ Tech Stack:

Next.js 14 with App Router
TypeScript
Tailwind CSS with custom Halloween theme
Google Gemini API
Custom internationalization system

Journey

Development Process

I started by setting up a fresh Next.js 14 project with TypeScript and Tailwind CSS. The first challenge was designing a Halloween theme that felt spooky and festive without being overwhelming or cliché. I spent time experimenting with color combinations and settled on a dark gradient (purple to black) with orange accents - staying true to Halloween traditions.

Technical Challenges Overcome

Google Gemini API Integration: The initial struggle was getting the API key configuration right and handling different Gemini model versions. I implemented a robust fallback system to handle API changes gracefully.
System Prompt Engineering: Creating a system prompt that keeps the AI focused on Halloween topics while remaining helpful and friendly was tricky. The AI now intelligently redirects off-topic conversations while maintaining user engagement.
Building a Custom i18n System: Since I wanted multi-language support but didn't want to add heavy dependencies, I built a lightweight translation system from scratch. It's simple, effective, and easy to extend to more languages.
Comprehensive Error Handling: I implemented user-friendly error messages that are helpful and thematic - they guide users through API key setup while maintaining the Halloween atmosphere.

What I'm Proud Of

Smooth CSS Animations: The floating ghost and glowing pumpkin animations create an immersive Halloween atmosphere without being distracting
Responsive Design: The chat interface looks beautiful and works seamlessly on all screen sizes
User Experience: The language toggle is intuitive, positioned in the header with clear visual indicators
Error Messages: Even error messages are themed and helpful - they guide users through setup while keeping the spooky mood
Code Organization: Clean separation of concerns with translations in a dedicated module, making it easy to maintain and extend

What I Learned

How to integrate Google Gemini API with Next.js API routes and handle different model versions
Building a custom internationalization system without heavy frameworks
Creating engaging CSS animations that enhance UX without being distracting
Environment variable management in Next.js and deployment best practices
User-friendly error handling that guides users through setup issues

What I Hope to Do Next

Add more languages (Spanish 🇪🇸, French 🇫🇷)
Implement message history persistence using localStorage or a database
Add voice input capability for hands-free spooky chats
Create multiple Halloween themes (pumpkin patch, graveyard, haunted house) that users can choose
Add more custom emojis and expand the animation library
Implement a dark/light mode toggle for different viewing preferences
Add Halloween sound effects for a more immersive experience

Getting Started

Prerequisites

Node.js 18+ installed
A Google Gemini API key (get one here)

Installation

Clone the repository:

git clone <repository-url>
cd hello-chat

Install dependencies:

npm install

Create a .env.local file in the root directory:

cp .env.example .env.local

Add your Gemini API key to .env.local:

GEMINI_API_KEY=your_actual_api_key_here

Run the development server:

npm run dev

Open http://localhost:3000 in your browser

Project Structure

hello-chat/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts       # Gemini API integration
│   ├── globals.css            # Global styles & animations
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Main chat interface
├── lib/
│   ├── translations.ts        # Internationalization system
│   └── README.md             # Translation documentation
├── .env.example               # Environment variables template
└── package.json               # Dependencies

License

MIT License - Feel free to use this project for your own spooky creations! 🎃

SKATEBOARD DECK DESIGN HELLOWEEN

Carlos Rogerio Orioli — Thu, 23 Oct 2025 12:00:40 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

I created an interactive landing page where users can customize their own skateboard shape with Halloween-themed prints.

The page mixes punk, horror, and Halloween aesthetics, featuring dark tones, neon accents, and creepy visuals like skulls, pumpkins, and ghosts.

Users can:

Choose a print from a gallery of Halloween designs and see it instantly applied to the skateboard mockup.
Upload their own artwork (PNG, JPG, or SVG) to create a truly unique and scary board.
Buy the customized skateboard directly through a purchase button.

The goal was to blend interactivity and e-commerce with a strong Halloween visual identity, appealing to skateboarders who love edgy, horror-inspired art.

Demo

🚀 Live Demo: https://custom-helloween-skateboard-deck.vercel.app/
🧠 Code Repository: https://github.com/rogeriorioli/custom-helloween-skateboard-deck

Journey

This project was a blast to build!

I started with the idea of bringing Halloween energy into the skate culture, combining both worlds through a clean yet chaotic interface.

Technically, I used React + TailwindCSS, and implemented interative click to image to overlay prints onto the skateboard shape dynamically.

The biggest challenge was making the image overlay feel natural and visually satisfying — like a real printed shape.

What I learned:

How to handle image layering and uploads efficiently in React.
How to design a dark, high-contrast UI that’s still visually balanced.
The importance of subtle animations and small visual details (hover glows, fades, etc.) to create immersion.

Happy Halloween 🎃

May your code be spooky and your UI delightfully haunted!

Forem: Carlos Rogerio Orioli

Desafio Headless: Checkout Shopify em App React Native com Zustand

1. Store com Zustand e MMKV

2. Sincronização via Storefront API (GraphQL)

3. O Checkout na WebView

O que aprendi?

Sincronizando Zustand com VTEX OrderForm no React Native

A Arquitetura da Solução

1. Gerenciando o Carrinho com Zustand

2. Sincronizando com a API da VTEX

3. O Checkout na WebView

Lições aprendidas

Nietzsche in a Madhouse

What I Built

Demo

Code

How I Built It

Prize Category

Why Next.js is the Ultimate Tool for the BFF (Backend-for-Frontend) Pattern?

The Problem: Overfetching & Underfetching

The Solution: The BFF Pattern

Why Next.js is the "Built-in" BFF

1. The Service (The "BFF Logic")

2. The Route Handler (The Internal Bridge)

3. The Client Component (The Consumer)

Why This Matters

Final Thoughts

Quando usar map, filter, reduce, for, forEach e flatMap em JavaScript

map, filter, reduce, for, forEach e flatMap: qual usar?

map → transformar dados

filter → remover dados

reduce → calcular ou agrupar

for → controle total

forEach → executar ações

flatMap → map + flatten

Regra de ouro

JavaScript Syntax Cheatsheet (Guia Rápido)

My Year Review (2025) - by Chat GPT

Bora construir um Agente de Notícias Hiper-Personalizado? 🤖📰 (Codar Juntos)

A ideia: Chega de newsletter genérica!

A Stack (Modern & Clean) 💻

O Plano de Voo 🚀

Por que estou postando isso?

🔑 As 5 Contas Necessárias para o Projeto

💡 Dica de Segurança

📅 Plano de Desenvolvimento Detalhado

Dia 1: Estrutura Base e Banco de Dados

Dia 2: Frontend e Captura de Leads

Dia 3: O Cérebro do Agente (Core Logic)

Dia 4: Integração Resend e Loop de Envio

Dia 5: Deploy e Automação na Vercel

Acendendo Velas (e Códigos) com React e IA neste Chanucá!

🕎 Acendendo Velas (e Códigos) com React e IA neste Chanucá! ✨

🛠️ A Stack por Trás do Milagre

🔗 Quer Acender Uma Vela?

💬 Vamos Trocar Uma Ideia!

SEO & OG Analyzer whit AI

What I Built

Demo

Features in Action

My Experience

Key Takeaways

Helloween AI chat agent

What I Built

Demo

Journey

Development Process

Technical Challenges Overcome

What I'm Proud Of

What I Learned

What I Hope to Do Next

Getting Started

Prerequisites

Installation

Project Structure

License

SKATEBOARD DECK DESIGN HELLOWEEN

What I Built

Demo

Journey

`map`, `filter`, `reduce`, `for`, `forEach` e `flatMap`: qual usar?

`map` → transformar dados

`filter` → remover dados

`reduce` → calcular ou agrupar

`for` → controle total

`forEach` → executar ações

`flatMap` → map + flatten