DEV Community: Carlos Rogerio Orioli

MyPuppy — A Brazilian Virtual Pet That Remembers You

Carlos Rogerio Orioli — Sun, 16 Aug 2026 20:45:23 +0000

MyPuppy — A Brazilian Virtual Pet That Remembers You

This is a submission for Weekend Challenge: Dog Days Edition.

What I Built

MyPuppy is a mobile-first virtual pet inspired by the digital toys of the 1990s, reimagined around Brazilian mixed-breed dogs.

Users can:

create an account;
adopt Caramelo, Fiapo de Manga, or Malhadinho;
name their dog;
feed, play with, walk, and give Cafuné to their pet;
watch hunger, happiness, energy, affection, hygiene, and walk needs evolve over time;
build memories and personality traits;
receive contextual reactions and notifications.

The goal was to make the pet feel alive without making the experience stressful or punishing. The dog never dies, and missing a few days creates gentle moments such as sleeping, boredom, or excitement when the owner returns.

The product voice is warm, funny, affectionate, and slightly chaotic — like a Brazilian friend speaking excellent English.

Demo

Live demo: MyPuppy

The application is designed primarily for mobile, but also works on desktop.

Code

GitHub repository: MyPuppy

How I Built It

MyPuppy was built with:

Next.js App Router;
React;
TypeScript;
Tailwind CSS;
PostgreSQL;
Prisma;
Gemini through the Google Gen AI SDK;
Web Push API;
VAPID;
Service Worker;
Vitest;
Vercel.

The most important architectural decision was separating the deterministic pet engine from the AI layer.

The virtual pet engine owns all game state. It calculates:

time-based decay;
action effects;
cooldowns;
event detection;
sleep states;
absence behavior;
personality progression;
owner-returned events.

The engine is implemented as pure, testable functions and does not depend on React, the database, or Gemini.

Gemini is only used to express what the dog feels. It generates short reactions and notification copy based on a small structured context containing the dog archetype, current state, personality traits, and domain event.

For example:


text
Domain event
↓
Check reaction cache
↓
Reuse cached reaction or call Gemini
↓
Validate structured response
↓
Use deterministic fallback if necessary

The Polenta Throne: Can You Stir Better Than Your Nonna?

Carlos Rogerio Orioli — Sat, 08 Aug 2026 19:25:26 +0000

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

What I Built

For this challenge, I chose a dish that represents the ultimate slow-cooked comfort food: Polenta.

Making a good polenta requires patience, time, and constant stirring. To capture this essence, I built an interactive landing page called "set point." (Orioli Chef) where the user has to physically engage with the page to "cook" the dish.

Instead of a traditional static landing page, I created an immersive, gamified experience. The user must click and drag a wooden spoon to stir the polenta. As you stir, the polenta thickens (the "hardness" level increases), and the process deliberately takes time, mimicking the real-life slow cooking required to reach the perfect "set point" (o ponto da polenta).

It features dynamic UI elements like realistic steam and bubble animations, real-time status updates based on the thickness, and a "social proof" toast notification system to show other users who are also enjoying the slow process.

Demo

🔗 Live Demo

Journey

The journey of building this was focused on translating a physical, analog feeling into a digital interface.

At first, the stirring logic was too fast and even had an automatic "simmering" timer that progressed without the user's input. I realized this defeated the purpose of the comfort food theme! I removed the automatic timers and recalibrated the interaction so that it strictly requires a deliberate "click and drag" to stir. I also replaced a generic cursor with a custom SVG wooden spoon to make it feel more authentic.

What I'm particularly proud of:

The custom interaction loop that tracks mouse movement (delta X and Y) to calculate the stirring speed and the progressive "hardness" of the polenta.
The immersive animations (bubbles, steam, and the trail left by the spoon) that make the pot feel alive.
The cohesive, warm aesthetic that matches the feeling of comfort food.

What I learned:

How to fine-tune pointer events and animation frames (requestAnimationFrame) to create a smooth, responsive, but intentionally "heavy" drag interaction.
The importance of pacing in UI design—sometimes making the user work a little harder and slower creates a much more rewarding experience.

Credits:
Made with <3 by Carlos Orioli.

Criando Blocos Gutenberg Nativos com React (e como usar IA para acelerar o processo)

Carlos Rogerio Orioli — Thu, 06 Aug 2026 00:49:28 +0000

Este tutorial mostra como criar um bloco Gutenberg nativo — sem depender do ACF — usando React puro, do zero até o build final. Na segunda parte, explico como usar um agente de IA com skills (arquivos de conhecimento reutilizáveis) e um harness (o "motor" que executa o agente em loop, com ferramentas) para acelerar esse tipo de desenvolvimento no dia a dia.

Parte 1 — Criando o bloco nativo

1. Pré-requisitos

Node.js instalado
Um tema ou plugin WordPress local para testar
@wordpress/scripts, o toolchain oficial que compila JSX sem você precisar configurar Webpack/Babel manualmente

2. Estrutura de pastas

Vamos criar um bloco de "Depoimento" (testimonial), 100% React, sem PHP de render.

my-plugin/
├── my-plugin.php
├── package.json
└── src/
    └── testimonial/
        ├── block.json
        ├── index.js
        ├── edit.js
        ├── save.js
        └── editor.scss

3. Inicializando o projeto

mkdir my-plugin && cd my-plugin
npm init -y
npm install @wordpress/scripts --save-dev

No package.json, adicione os scripts de build:

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  }
}

4. `block.json`

Aqui definimos os attributes são os dados que o próprio Gutenberg gerencia e salva dentro do post_content:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-plugin/testimonial",
  "title": "Depoimento",
  "category": "widgets",
  "icon": "format-quote",
  "description": "Bloco de depoimento em React puro.",
  "textdomain": "my-plugin",
  "attributes": {
    "autor": { "type": "string", "default": "" },
    "cargo": { "type": "string", "default": "" },
    "depoimento": { "type": "string", "default": "" }
  },
  "supports": {
    "html": false
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./editor.css",
  "style": "file:./style.css"
}

5. `edit.js` — a interface no editor

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
  const { autor, cargo, depoimento } = attributes;
  const blockProps = useBlockProps({ className: 'testimonial-edit' });

  return (
    <div {...blockProps}>
      <RichText
        tagName="p"
        placeholder="Escreva o depoimento..."
        value={depoimento}
        onChange={(val) => setAttributes({ depoimento: val })}
      />
      <RichText
        tagName="strong"
        placeholder="Nome do autor"
        value={autor}
        onChange={(val) => setAttributes({ autor: val })}
      />
      <RichText
        tagName="span"
        placeholder="Cargo"
        value={cargo}
        onChange={(val) => setAttributes({ cargo: val })}
      />
    </div>
  );
}

6. `save.js` — o que vira HTML final salvo no post

Isso substitui totalmente o render.php. O output desse componente é serializado e gravado em post_content no momento de salvar/publicar.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
  const { autor, cargo, depoimento } = attributes;
  const blockProps = useBlockProps.save({ className: 'testimonial' });

  return (
    <div {...blockProps}>
      <blockquote>
        <RichText.Content tagName="p" value={depoimento} />
        <footer>
          <RichText.Content tagName="strong" value={autor} />
          {cargo && <RichText.Content tagName="span" value={` — ${cargo}`} />}
        </footer>
      </blockquote>
    </div>
  );
}

7. `index.js` — registro

import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import save from './save';
import metadata from './block.json';
import './editor.scss';

registerBlockType(metadata.name, { edit: Edit, save });

8. Registrando o bloco no PHP

<?php
/**
 * Plugin Name: My Plugin — Testimonial Block
 */

add_action('init', function () {
    register_block_type(__DIR__ . '/build/testimonial');
});

Note que aponta para build/, não para src/ — é ali que o wp-scripts build gera os arquivos compilados.

9. Build

npm run build

Ative o plugin no WordPress, abra o editor e o bloco "Depoimento" já aparece no inserter, pronto pra usar — sem nenhum PHP intermediando o render.

10. Indo além

A partir daqui, as extensões mais comuns são:

Imagem: attribute do tipo object guardando { url, id, alt }, usando MediaUpload
Repeater (lista de itens): attribute do tipo array, renderizado com .map() tanto no edit.js quanto no save.js
InnerBlocks: permitir que outros blocos sejam aninhados dentro do seu

Parte 2 — Usando IA (skills + harness) para acelerar esse trabalho

Quando você usa um agente como o Claude Code para esse tipo de tarefa, vale entender dois conceitos que mudam bastante a qualidade do resultado: harness e skills.

O que é o "harness"

O harness é o programa que roda o agente em loop: ele manda o prompt pro modelo, recebe de volta uma decisão (rodar um comando, editar um arquivo, ler algo), executa essa ação de verdade no seu sistema, devolve o resultado pro modelo, e repete — até a tarefa terminar. É a "carroceria" em volta do modelo: dá acesso a terminal, sistema de arquivos, git, etc. Sem harness, o modelo só conversa; com harness, ele efetivamente cria pastas, roda npm run build, edita block.json, testa e corrige.

Na prática, isso significa que pra um bloco Gutenberg você pode literalmente pedir "cria um bloco nativo de FAQ com repeater de perguntas e respostas, registra no plugin e roda o build" — e o agente executa passo a passo, igual você faria manualmente, mas sozinho.

O que são "skills"

Skills são arquivos de instrução (SKILL.md) que ficam disponíveis pro agente e são carregados automaticamente quando relevantes. Cada skill documenta um domínio específico — convenções do seu time, padrões de código, checklist de revisão, como aquele projeto em particular estrutura os blocos.

Para o seu caso de blocos Gutenberg + WordPress, uma skill útil poderia registrar:

A estrutura de pastas que seu time usa (src/blocks/<nome>/...)
Se vocês preferem SCSS ou CSS puro, apiVersion padrão, categoria default
Convenção de nomenclatura (meu-tema/nome-do-bloco)
Se o projeto usa ACF em paralelo (para blocos que precisam de campo global via post meta) e quando usar cada abordagem
Trechos de código de referência (exemplo de bloco com InnerBlocks, exemplo com upload de imagem) que o agente deve seguir como modelo

Isso transforma o agente de "sabe Gutenberg em geral" para "sabe exatamente como o seu projeto faz Gutenberg" — reduzindo o retrabalho de revisar código que não segue o padrão do time.

Fluxo prático sugerido

Escreva uma skill descrevendo os padrões do seu projeto de blocos (pode ser gerada com apoio do próprio agente, revisando blocos já existentes no repositório)
Peça a criação de um novo bloco em linguagem natural, descrevendo os campos e comportamento
O agente, com a skill carregada e o harness executando comandos, cria a pasta, o block.json, edit.js, save.js, registra no PHP e roda o build
Você revisa o diff (como revisaria um PR de qualquer dev) antes de commitar

Esse combo — harness pra executar e skill pra manter o padrão do projeto — é o que faz a diferença entre "gerar código genérico de Gutenberg" e "gerar código que já nasce do jeito que o seu time trabalha".

Resumo

	Sem IA	Com harness + skill
Criar estrutura do bloco	Manual, arquivo por arquivo	Agente cria tudo de uma vez, seguindo padrão do projeto
Consistência entre blocos	Depende de disciplina do time	Skill garante convenção fixa
Build e teste	Você roda os comandos	Agente roda e corrige erros de build sozinho
Revisão	—	Você revisa o diff antes do commit, como um PR normal

Vibe Code Playground

Carlos Rogerio Orioli — Mon, 27 Apr 2026 15:41:33 +0000

✨ Vibe Code Playground

Vibe Code is a curated gallery of high-end UI component prompts. Instead of copying and pasting static code, you copy the "vibe" — highly detailed, technically-focused prompts that you can paste into any LLM (like ChatGPT, Claude, or Gemini) to generate stunning, interactive React + Tailwind CSS components instantly.

SHOW GALERY

🚀 Features

Curated Prompts: Hand-picked instructions for high-end aesthetics (Apple-style, Bento Grid, Glassmorphism, etc.).
Code-Centric: Every prompt is engineered to return functional React + Tailwind code.
Vibe Filter: Easily browse by style — from "Minimal" to "Cyberpunk".
One-Click Copy: Get the prompt and go straight to your favorite AI.
Open Source: Community-driven gallery. Adding a new component is as simple as a PR.

🛠️ Tech Stack

React: Modern functional components and hooks.
Vite: Ultra-fast development and build.
Tailwind CSS: Utility-first styling.
Framer Motion: Smooth entry animations.

🤝 Contributing

We love contributions! Check out our CONTRIBUTING.md to see how you can add your own vibes to the gallery. It's the easiest way to help scale this library!

Repository

Built with ♥ by 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. 🚀

DEV Community: Carlos Rogerio Orioli

MyPuppy — A Brazilian Virtual Pet That Remembers You

MyPuppy — A Brazilian Virtual Pet That Remembers You

What I Built

Demo

Code

How I Built It

The Polenta Throne: Can You Stir Better Than Your Nonna?

What I Built

Demo

Journey

Criando Blocos Gutenberg Nativos com React (e como usar IA para acelerar o processo)

Parte 1 — Criando o bloco nativo

1. Pré-requisitos

2. Estrutura de pastas

3. Inicializando o projeto

4. block.json

5. edit.js — a interface no editor

6. save.js — o que vira HTML final salvo no post

7. index.js — registro

8. Registrando o bloco no PHP

9. Build

10. Indo além

Parte 2 — Usando IA (skills + harness) para acelerar esse trabalho

O que é o "harness"

O que são "skills"

Fluxo prático sugerido

Resumo

Vibe Code Playground

✨ Vibe Code Playground

🚀 Features

🛠️ Tech Stack

🤝 Contributing

Repository

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

4. `block.json`

5. `edit.js` — a interface no editor

6. `save.js` — o que vira HTML final salvo no post

7. `index.js` — registro

`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