Pular para o conteúdo

JHONATAN OLIVEIRA®

PORTFOLIO / 2026

FRONTEND / PRODUTO / DESIGN

Engenharia, direção e ofício digital em um único sistema contínuo.

ISSUE / 01

Arquivo de projetos

02 / Case study

Plataforma Web / 2026

STRATA - Operate like a company.

A STRATA é uma plataforma de operação comercial focada na gestão de propostas, decisões e receita.

STRATA - Operate like a company.
J / O — Plataforma Web

Índice do case

01 — 04

Disciplina
Plataforma Web
Ano
2026
Status
Concluído
Registros visuais
09

Tecnologias

Next.jsTypeScriptTailwindCSSSentryPostHogGSAPMotionPrisma ORMSupabasePostgresNext AuthUptimeRobotResendVercel

STRATA — Operate like a company.

A STRATA nasceu de uma observação simples: a maioria dos profissionais digitais trabalha com excelência técnica, mas com operação improvisada.

Propostas espalhadas em documentos soltos.
Follow-ups manuais.
Zero previsibilidade de conversão.
Nenhuma métrica estruturada.

A STRATA resolve isso.

Não como um gerador de PDF.
Mas como uma plataforma operacional para gestão de propostas comerciais, decisões e receita.

O objetivo é claro: permitir que freelancers, agências e profissionais do digital operem com estrutura — como se fossem uma organização multinacional.

Problema

Vender serviços digitais exige clareza, organização e acompanhamento.

Na prática, a maior parte do mercado ainda depende de processos frágeis:

  • propostas não padronizadas

  • ausência de rastreabilidade

  • falta de dados sobre comportamento do cliente

  • dependência excessiva de controle manual

Isso limita crescimento.

Sem operação estruturada, não existe escala sustentável.

Solução

A STRATA centraliza o fluxo comercial em um único sistema.

  • criação estruturada de propostas

  • envio direto ao cliente

  • acompanhamento de métricas em tempo real

  • organização por status e ciclo de venda

  • histórico completo de interação

A proposta deixa de ser apenas um documento.

Passa a ser parte de um sistema.

Arquitetura e decisões técnicas

A construção da STRATA seguiu um princípio simples: previsibilidade acima de improviso.

Stack

  • Next.js 16 (App Router)

  • React 19

  • TypeScript (strict mode)

  • Prisma ORM

  • PostgreSQL

  • Tailwind CSS + shadcn/ui

  • Vercel

Mas stack não é diferencial.

O diferencial está nas decisões.

Server-first

Sempre que possível, priorizei Server Components e Server Actions.

  • menos JavaScript no cliente

  • menor superfície de ataque

  • maior controle de estado

  • melhor performance estrutural

Segurança e controle

  • Autenticação com NextAuth + Prisma Adapter

  • Validação estrutural com Zod

  • Variáveis de ambiente tipadas

  • Headers configurados (HSTS)

  • Lógica sensível isolada no servidor

Segurança não foi adicionada depois.
Foi considerada desde a base.

Observabilidade

  • Sentry para rastreamento de erros

  • Uptime Robot com hooks automáticos

  • PostHog para análise comportamental

Não esperar o usuário reportar falha é parte da arquitetura.

Design como operação

A interface foi projetada com foco em fluxo e clareza.

Sem distrações.
Sem excesso de elementos.
Sem fricção desnecessária.

A proposta é o protagonista.
O sistema é a infraestrutura invisível que sustenta.

Resultado

A STRATA não é apenas uma ferramenta.

É a materialização de uma visão:

Decisão técnica como responsabilidade.
Arquitetura como compromisso.
Operação como vantagem competitiva.

Produto não cresce com estética isolada.
Cresce com estrutura.

04 / Evidências visuais

09 ITEMS

O trabalho, em contexto.

Telas, motion e artefatos de apoio que mostram como o sistema se comporta para além de uma capa estática.

Projetos selecionados / arquivo

END / CASE

Um case é só um capítulo.

Volte ao arquivo para conhecer outras interfaces, produtos e experimentos construídos com a mesma atenção a produto, direção visual e engenharia frontend.

Ver todos os projetos