FRONT-END ENGINEER
VINICIUS JUAREZ
Desenvolvedor Front-End com React, Next.js e TypeScript. Criei e publiquei no NPM a biblioteca de componentes que sustenta este site, e coloquei em produção um e-commerce integrado à Shopify e um gerador de currículos com exportação em PDF.
React
TypeScript
Next.js
NPM
ecosystem.config.ts
// Sobre Mim
COMO TRABALHO
Começo pela base: tokens de design e componentes reutilizáveis. As telas vêm depois, montadas sobre essa base. Assim, uma mudança visual é feita em um lugar só e o mesmo código atende vários projetos.
01
TYPESCRIPT
CORE
Todos os projetos aqui são escritos em TypeScript. Props, respostas de API e estado global têm tipos definidos.
02
DESIGN SYSTEM
UI
Cores e tipografia ficam em tokens centralizados. Para mudar a identidade visual de um projeto, altero um arquivo.
03
COMPONENTES
TEMPLATE
Button, Text, Flex, Stack e outros componentes da minha biblioteca são reaproveitados entre projetos, incluindo este portfólio.
04
PERFORMANCE
UX
Uso lazy loading, divisão de código e os recursos de renderização do Next.js para carregar só o necessário em cada página.
05
PROCESSO
DX
Commits semânticos, versionamento com SemVer e layouts pensados primeiro para telas pequenas.
// PROJETOS PRINCIPAIS
01 Biblioteca de Componentes · Pacote NPM
2024
Publicada
Lib @av-digital/components
Biblioteca de componentes React publicada no NPM. Estruturei o monorepo, os tokens de design e o fluxo de versionamento. Está na versão 0.3.9 e é a base de UI deste portfólio.
12 componentes tipados com variantes configuráveis
Monorepo Nx
Tokens de design compartilhados entre componentes
Versionamento semântico (v0.3.9)
components/index.ts
v0.3.9
<Button />
Primary
Secondary
<Dropdown />
Primary
Secondary
Sizes
<Text />
h1
size
weight
label
Others...
<Input />
Primary
Secondary
Ghost
Sizes
<Flex />
gap
justify
align
direction
wrap
12 componentes
Nx monorepo
02 E-commerce · Next.js + Shopify
2025
Produção
E-commerce Touge
Loja de dropshipping no ar em tougeclub.store. Desenvolvi o front-end inteiro: catálogo de produtos via Shopify Storefront API, carrinho e fluxo de compra até o pagamento.
Integração com Shopify Storefront API
Carrinho persistido com Context API + LocalStorage
Fluxo de pagamento testado de ponta a ponta
Monitoramento das etapas de compra
tougeclub.store
Next.js · Shopify
Shopify Storefront API
Context API
LocalStorage
03 Gerador de Currículos · Next.js
2024
Produção
SheetSty
Editor de currículos com pré-visualização em tempo real e 5 templates. Todos os templates leem os mesmos dados de um contexto compartilhado, então um modelo novo entra sem alterar o editor.
5 templates com layouts diferentes
Exportação em PDF no formato A4
Rascunho salvo entre sessões (Context API + LocalStorage)
Cores, fontes e tamanhos ajustáveis
Clássico
2 colunas
Sidebar direita
Faixa superior
Minimalista
5 modelos
Exportação em PDF
Cores e fontes editáveis
// Front End
// Versionamento
// Backend
// UI
// Ferramentas