Renan Xavier / Full Stack

Código sólido.
Experiências que
marcam.

Crio produtos web e mobile, da arquitetura à interface.

Explorar projetos Vamos conversar
A cada toque, o React fica maior e gira mais rápido em até três níveis. Depois retorna ao normal.
DESLIZE PARA EXPLORAR

01 / TRABALHOS SELECIONADOS

Não são apenas telas.
São produtos funcionando.

Seis cases. Produtos autorais, soluções para clientes e a engenharia por trás da operação.

01 Produtos

03 CASES 01 / 03

Três cases neste carrossel, com navegação circular. Deslize para explorar. Com a trilha em foco, use as setas esquerda e direita, Início e Fim. Tab acessa os detalhes e links de cada projeto.

Interface real do AWX com garagem e gerenciamento automotivo 01 / PRODUTO AUTORAL
PRODUTO AUTORALWEB + MOBILE

AWX Brasil

Gestão automotiva: manutenções, despesas e histórico do veículo em um só lugar.

Detalhes técnicos
Next.jsTypeScriptPostgreSQLCapacitor

Arquitetura full stack, autenticação, autorização com RLS, modelagem do domínio automotivo, FIPE, histórico de manutenção e experiência mobile via Capacitor.

Explorar produto
Demonstração real dos modelos BioSites e sua experiência visual 02 / PRESENÇA DIGITAL
NEGÓCIOS LOCAISQR + NFC

BioPlaca & BioSites

Presença digital e ferramentas de gestão para negócios locais, com QR e NFC.

Detalhes técnicos
Next.jsSupabaseQR / NFC

Fluxo administrativo de placas, identidade visual para impressão, códigos e redirecionamentos, integração NFC, vitrine BioSites e personalização de páginas.

Ver demonstração
Prévia real do Galerows com aplicativo mobile e cartas ilustradas 03 / MOBILE & MULTIPLAYER
JOGOS SOCIAISANDROID / IOS

Galerows.

Jogos para encontros, no mesmo celular ou em multiplayer local sem internet.

Detalhes técnicos
ReactTypeScriptCapacitorLAN / WS

Arquitetura dos jogos, estados de partida, salas LAN com runtime autoritativo, reconexão, segurança de comunicação e testes automatizados.

Conhecer Galerows

02 Soluções & Engenharia

03 CASES 01 / 03

Três cases neste carrossel, com navegação circular. Deslize para explorar. Com a trilha em foco, use as setas esquerda e direita, Início e Fim. Tab acessa os detalhes e links de cada projeto.

Página pública real da plataforma Cursos Pugliese 04 / PLATAFORMA DE ENSINO
EDTECHFULL STACK

Cursos Pugliese

Uma plataforma de cursos para gestão, professores e estudantes.

Detalhes técnicos
Next.jsSupabase AuthRLS

Gestão de conteúdo, cursos, módulos e progresso; autenticação SSR, permissões por papel, RLS, operações transacionais e fluxos de segurança para produção. Código privado.

Visitar site
Nova landing da enfermeira Maria Thereza Pugliese, com identidade MTP em amarelo mel, fotografia profissional e chamada de atendimento 05 / DESIGN EDITORIAL
SAÚDE & SERVIÇOSLANDING PAGE

Maria Thereza

Cuidados domiciliares apresentados com clareza, elegância e confiança.

Detalhes técnicos
HTMLCSSJavaScriptCloudflare

Identidade visual MTP com amarelo e lilás, fotografia editorial, animações acessíveis com GSAP, vídeo opcional sob demanda, performance e publicação estática na Cloudflare Pages.

Visitar site
06 / CASE TRANSVERSAL · DEMO
FULL STACKSISTEMAS ADMINISTRATIVOS

Engenharia & Backoffice

Gestão, automação e permissões nos bastidores de três produtos reais.

Detalhes técnicos
Next.jsTypeScriptPostgreSQLRLS

Produção de placas na BioPlaca, operação profissional na AWX e administração acadêmica no Pugliese. Um case de engenharia que conecta interface, regras de negócio e persistência.

Explorar bastidores

Cada projeto representa decisões de arquitetura, interface e entrega. Mais trabalhos no GitHub ↗

CASE TRANSVERSAL / FULL STACK

Engenharia & Backoffice

Além da interface pública, a operação que faz cada produto funcionar.

PRODUÇÃO FÍSICA + GESTÃO DIGITAL

Da arte ao lote de placas.

Produzir placas em escala exige mais do que um link. Desenvolvi o fluxo que conecta estabelecimentos, códigos, impressão, estoque e venda.

AUTOMAÇÃO DE PRODUÇÃO

Um código. Uma placa pronta.

Exemplo fictício

Arte-base real da placa, antes de receber o QR Code
01 / MODELO
A arte define o ponto de partida.

O administrador escolhe um modelo ou envia uma arte PNG. No editor, ajusta a posição e o tamanho do QR com mouse, toque ou valores em pixels.

Configuração pelo operador
QR Code de demonstração gerado pela função original, com URL fictícia example.comK8P4MX / CÓDIGO DE AMOSTRA
02 / QR GERADO
Cada placa recebe seu próprio código.

A criação do lote gera códigos únicos. O QR correspondente aponta para a URL da placa, que mantém o destino configurável.

Geração automática
Prévia da placa após composição automática do QR na área definida da arte
03 / COMPOSIÇÃO
O QR entra na arte automaticamente.

O gerador aplica o QR nas coordenadas do modelo. A composição acontece no tamanho final, preservando a nitidez do código para impressão.

QR + arte, sem edição placa a placa
Placa de demonstração pronta na prévia de exportação
lote.zipplates/K8P4MX.pngmanifesto.csv
04 / EXPORTAÇÃO
Arquivos prontos para a gráfica.

O sistema reúne os PNGs e o manifesto CSV em partes de ZIP. O operador confere os arquivos e confirma o recebimento das placas físicas.

Arquivos automáticos, conferência manual

A gravação da tag NFC é manual, em aplicativo externo. O sistema prepara as URLs e a fila de conferência.

Ver o editor de modelos

Ajuste visual por mouse/toque ou coordenadas, com prévia antes de salvar a versão do modelo.

Editor real da BioPlaca renderizado com dados fictícios: arte à esquerda, coordenadas e tamanho do QR à direita e prévia composta
Componentes reais, dados fictícios. Selecione a imagem para ampliar.
Operação
Estabelecimentos, lotes, estoque, disponibilidade, vendas e valores recebidos.
Produção
Modelos versionados, prévias, composição automática, PNGs, ZIP e manifesto.
Ativação
Destinos configuráveis, preparação NFC e contadores separados de QR/NFC.
Decisões de engenharia
  • A placa é a entidade central; QR e NFC são canais de acesso ao mesmo código.
  • O modelo é imutável: lotes exportados preservam a versão original.
  • Autorização administrativa, validação no servidor e RLS protegem os dados operacionais.
  • Um download iniciado não comprova arquivo salvo; a conferência das partes é explícita.

Next.js · TypeScript · Supabase / PostgreSQL · qrcode · sharp · JSZip

WORKSPACE PROFISSIONAL

O estoque tem seu próprio contexto.

Organizar veículos, custos e vendas sem misturar a operação da concessionária com a garagem pessoal.

Módulo profissional em validação
Painel real do workspace AWX renderizado com dados fictícios, com estoque, capital, entradas, saídas, margem e atalhos operacionais
Componentes reais com valores fictícios. A demonstração não representa resultados comerciais ou liberação de produção.
Estoque e cadastro
Veículos da loja, limites próprios, cadastro, edição e manutenção.
Custos e operação
Aquisição, despesas e relatórios de custo, margem e ciclo do estoque.
Venda e transferência
Saída do estoque com histórico e mudança de titularidade por operação validada.
InterfaceServiços & regrasPostgreSQL / RLS
Decisões de engenharia
  • Garagem pessoal e estoque profissional usam escopos separados.
  • Membership e papéis de proprietário, administrador e vendedor limitam as ações; financeiro exige permissão específica.
  • Operações transacionais preservam ciclo e histórico, sem transferir informações financeiras privadas ao comprador.
  • O case mostra a implementação existente em validação. Emissão fiscal, DRE, conciliação e financiamento não fazem parte desta apresentação.

Next.js · React · TypeScript · Supabase / PostgreSQL · RPCs · RLS

ADMINISTRAÇÃO ACADÊMICA

Autonomia para ensinar. Permissões para organizar.

Uma estrutura acadêmica completa, com visão global para o Admin e um espaço de trabalho restrito ao conteúdo de cada professor.

Dashboard Admin real renderizado com dados fictícios: cursos por estado, professores, alunos, acessos e atenção operacional
Componentes reais, com nomes e números fictícios. Nenhum dado de professor ou aluno foi capturado.
Conteúdo
Cursos, matérias, módulos, aulas, materiais e publicação contextual.
Alunos e acessos
Diretório de alunos, concessão e validade de acesso, planos e progresso.
Papéis separados
Admin com escopo global; Teacher no próprio domínio; Student no conteúdo autorizado.
Ver a visão do professor

O professor acompanha cursos, turmas, alunos e planejamento semanal sem acessar a administração global.

Dashboard Teacher real com cursos, planos, alunos e turma de demonstração, todos fictícios
Demonstração do componente Teacher com dados fictícios.
Decisões de engenharia
  • Autenticação SSR e autorização por papel são conferidas no servidor; RLS mantém o isolamento no banco.
  • Planos compõem cursos. A concessão de acesso efetivo é validada separadamente.
  • Turmas e planejamento organizam a experiência; não concedem acesso por si só.
  • Publicação, revogação e ações sensíveis possuem validações e confirmações próprias.

Next.js · TypeScript · Supabase Auth SSR · PostgreSQL · RLS

02 / COMO EU CONSTRUO

Entender. Construir.
Validar no uso real.

01

Produto primeiro.

Na BioPlaca, conecto o produto físico à presença digital sem complicar a experiência do comércio.

02

Regras explícitas.

Nos Cursos Pugliese, os perfis de administração, professor e aluno orientam permissões e acesso.

03

Entrega verificável.

No Galerows, valido gestos, partidas e conexão local entre celulares, além do layout responsivo.

Retrato de Renan XavierRX / DEVELOPER

03 / SOBRE MIM

Curiosidade de criador.
Disciplina de engenheiro.

Sou Desenvolvedor Full Stack, com experiência na evolução de sistemas corporativos em C#/.NET e SQL Server. Hoje desenvolvo produtos próprios e para clientes com React, Next.js, TypeScript e PostgreSQL.

Gosto de unir tecnologia, experiência e regras de negócio. Para mim, uma interface só está pronta quando funciona bem no mundo real.

Baixar currículo ↗LinkedIn ↗
Explorar minhas tecnologias
FRONTEND

React · Next.js · TypeScript · Tailwind CSS

BACKEND & DADOS

C# · .NET · PostgreSQL · Supabase · SQL Server · RLS

MOBILE & INFRA

Capacitor · WebSocket · Vercel · Cloudflare · GitHub Actions

IA & QUALIDADE

LLMs · RAG · agentes · testes automatizados · revisão de código

04 / PRÓXIMO PASSO

Tem uma boa ideia?
Vamos torná-la real.

Disponível para conversar sobre oportunidades Full Stack, produtos digitais e colaboração.

renanlima2000.aer@gmail.com
Enviar e-mail

GitHub ↗LinkedIn ↗