Uma mensagemde Natal feitapara cada criança.

Vídeos personalizados, cartinhas e surpresas do Papai Noel.

Uma loja de Natal em React que roda dentro do WordPress, em duas identidades.

Loja on-linePapai Noel e Natal de féWordPress + WooCommerce

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT

Uma mensagemde Natal feitapara cada criança.

Vídeos personalizados, cartinhas e surpresas do Papai Noel.

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT

Uma loja de Natal em React que roda dentro do WordPress, em duas identidades.

Loja on-linePapai Noel e Natal de féWordPress + WooCommerce

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT

PortfólioMeu Natal Digital

A loja em números

Um catálogo inteiro atrás de cada porta.

Os números desta loja saem do código: o catálogo, as fichas de pedido, as duas identidades e a área do cliente.

O Natal chega em

A mesma contagem que abre a loja, ao vivo até o dia 25.

Produtos no catálogo
Vídeos, mensagens, histórias, cartinhas, pacotes e WhatsApp, cada um com o seu código no WooCommerce.
Linhas de produto
Do convite do Papai Noel às histórias bíblicas, cada linha com a sua vitrine.
Campos de personalização
21 campos de pedido e 7 de endereço; cada produto pede só os seus.
Identidades na mesma loja
Papai Noel e Natal de fé, trocadas por uma chave só.
Abas na área do cliente
Visão geral, pedidos, vídeos, perfil e configurações.
Pontos no editor visual
Textos, imagens e espaçamentos ajustáveis na própria página.

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT
Embla Carousel 8.6
react-snowfall 2.3

O catálogo

Oito linhas de presente, 21 produtos.

Cada linha tem a sua vitrine, e cada produto, o seu preço e o seu prazo no código. Os vídeos e as mensagens chegam pela área do cliente; as cartinhas, em PDF ou pelos Correios.

Convite do Papai Noel
3 produtosR$ 49,90 a R$ 79,90
O Papai Noel chama a criança pelo nome para escrever a cartinha: simples, mágico ou premium.
Papai Noel responde
3 produtosR$ 69,90 a R$ 99,90
A resposta à cartinha, em vídeo, para o dia de Natal.
Mensagens cristãs
3 produtosR$ 59,90 a R$ 74,90
Uma bênção para a criança, uma história bíblica personalizada ou uma mensagem para a família toda.
Histórias bíblicas
3 produtosR$ 54,90 a R$ 84,90
Do conto curto à narrativa completa do nascimento de Jesus, com a criança dentro da história.
Combos e pacotes
3 produtosR$ 99,90 a R$ 159,90
Convite com resposta, o pacote de irmãos e o pacote família, para até 3 crianças.
Cartinhas digitais
2 produtosR$ 19,90
A carta do Papai Noel em PDF: a que pede a cartinha e a que responde no Natal.
Cartinhas pelos Correios
2 produtosR$ 29,90
As mesmas cartas impressas, com o selo do Polo Norte, entregues pelos Correios.
WhatsApp do Papai Noel
2 produtosR$ 39,90 a R$ 59,90
O Papai Noel no WhatsApp da família, com áudio e figurinhas: antes do Natal e no dia.

Preços do catálogo do código, em reais.

A personalização

Cada pedido chega com uma ficha.

O vídeo chama a criança pelo nome porque o pedido leva os dados dela. Cada produto tem a sua ficha, conferida antes de ir para o carrinho.

Uma ficha por produto
São 21 fichas: o convite simples pede nome e idade; o premium pede mais quatro campos, como a característica especial.
Seis tipos de campo
Texto, número, texto longo, lista, escolha e endereço, cada um com o seu limite.
Conferida antes do carrinho
Obrigatório, tamanho máximo, mínimo e máximo e formato: a mensagem diz o que corrigir.
validateField()
O CEP preenche o endereço
Nas cartinhas pelos Correios, o CEP busca a rua, o bairro, a cidade e o estado.
viacep.com.br
A ficha segue com o item
O item entra no carrinho com a ficha, e o serviço de pedidos grava cada campo no pedido do WooCommerce.
_natal_nome · _natal_idade

Vídeo Papai Noel Convite Premium

SKU 3-VPN-CONV-PRE · 7 dias úteis

Nome da criançaTexto · até 50Ana
IdadeNúmero · de 1 a 126Idade deve ser no máximo 12
Irmão ou irmãTexto · opcionalPedro
Como se comportou este ano?EscolhaSe comportou muito bem
Cenário do vídeoListaPolo Norte
Uma característica especialTexto · até 100Adora dinossauros

Ficha conferida · pronta para o carrinho

Um envelope de luz sob um céu estrelado, com a loja em versão de fé num notebook ao lado

02/Natal de fé

O Natal também é uma mensagem de fé.

Mensagens personalizadas para celebrar o nascimento de Jesus com a família.

A loja tem duas identidades e uma chave só. A mesma tela troca o logo, as cores, o vídeo do topo, a cor da neve e o produto em destaque, e a escolha fica guardada no navegador.

Papai NoelO topo
Natal de féO topo
Papai NoelComo funciona
Natal de féComo funciona
Papai NoelO catálogo
Natal de féO catálogo
Papai NoelO que você recebe
Natal de féO que você recebe

1 chaveUma escolha liga a identidade inteira, sem trocar de página.
27 arquivosOs componentes que mudam de cara com ela.
Neve douradaAté a neve que cai na página troca de branca para dourada.
GuardadaA escolha fica no navegador e volta na próxima visita.

A entrega

O vídeo chega com regras.

Depois do pedido, o vídeo mora na área do cliente, com prazo, limite de visualizações e marca d'água. O player confere cada regra antes de tocar.

A tela de vídeos de exemplo da loja — Faltam 3 dias de acesso

Prazo de acesso
Passou a data, o player fecha e mostra o aviso de acesso expirado. Com 3 dias ou menos, a contagem muda de cor.
expiresAt < agora
Limite de visualizações
Cada vez que o vídeo toca, a visualização é registrada; no limite, ele não abre mais.
currentViews >= maxViews
Só toca quando está ativo
Enquanto é produzido, o vídeo fica pendente; pronto, fica ativo; vencido, expira.
pending · active · expired
Marca d'água do pedido
O número do pedido fica por cima do vídeo durante toda a reprodução.
Sem baixar
Sem botão de download, tela cheia ou janela flutuante; o clique direito, o Ctrl+S e o arrastar ficam bloqueados.
Para a família ver
O link do vídeo sai pelo WhatsApp ou por e-mail.

A área do cliente

Visão geral
Pedidos
Vídeos
Perfil
Configurações

Níveis pelo total gasto

BronzeAté R$ 149
PrataA partir de R$ 150
OuroA partir de R$ 300
DiamanteA partir de R$ 500

Por dentro

Uma loja inteira dentro do WordPress.

O app não substitui o site: entra numa página do WordPress, fala com o WooCommerce e chega ao navegador num pacote só, com a versão no nome do arquivo.

WordPress e WooCommerce
Produtos, pedidos, clientes e cupons pela API REST do WooCommerce; o login entra por JWT. As rotas próprias da loja (vídeos, pedidos e personalização) têm o seu cliente no app.
/wc/v3 · /jwt-auth/v1 · /natal/v1
Uma página do tema
O app monta numa div da página, e um CSS próprio força a largura total dentro do tema Astra.
#natal-root
Um pacote só
O webpack gera um pacote UMD chamado NatalApp; o React vem da própria página, fora do pacote.
library: NatalApp · externals: react
A versão no nome do arquivo
O version.json entra no nome: natal.bundle.v208.js e main.v208.css. Versão nova, arquivo novo, e o navegador não usa a cópia antiga.
version.json → v208
O editor visual
Shift+F liga a edição na própria página: 32 pontos de texto, imagem e espaçamento, com desfazer e refazer, gravados no código por um servidor local.
Tunable · element-styles.ts

As tecnologias

Do que é feito, peça por peça

Uma loja que roda dentro de um site WordPress: a vitrine é feita em React e conversa com o WooCommerce para os pedidos e a conta do cliente. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.

11tecnologias, em 3 camadas

Tela

Servidor

Construção

1Re18

Camada: Tela

React 18

Desenha a loja inteira (vitrine, fichas do convite, área do cliente) dentro da página do WordPress.

Onde está no código

src/main.tsx

Camada: Tela

TypeScript 5.9

A linguagem da loja, que ajuda a escrever o código com menos erros.

Onde está no código

tsconfig.json

Camada: Tela

Tailwind CSS 3.4

Dá o visual da loja e a ajusta ao celular.

Onde está no código

src/styles/main.css

Camada: Tela

Embla Carousel 8.6

Os carrosséis de convites e de depoimentos que passam sozinhos.

Onde está no código

src/components/testimonials.tsx

Camada: Tela

react-snowfall 2.3

Faz cair neve na página, branca ou dourada, conforme o tema.

Onde está no código

src/App.tsx

Camada: Tela

React Context React

Guarda o login e os ajustes do editor visual enquanto a pessoa navega.

Onde está no código

src/context/tuner-context.tsx

Camada: Servidor

WooCommerce REST v3

De onde vêm os pedidos e os cupons da área do cliente; a loja vive dentro do WordPress.

Onde está no código

src/api/config.ts

Camada: Servidor

JWT WP-API

Faz o login do cliente e o mantém conectado com segurança.

Onde está no código

src/api/services/auth-service.ts

Camada: Servidor

ViaCEP REST

Preenche o endereço sozinho a partir do CEP.

Onde está no código

src/api/services/personalization-service.ts

Camada: Construção

Webpack 5.102

Empacota a loja num arquivo só, que o WordPress carrega, com a versão no nome para não travar no cache.

Onde está no código

webpack.config.js

Camada: Construção

Babel 7.28

Traduz o código moderno para funcionar em qualquer navegador.

Onde está no código

.babelrc

As telas

A loja, tela por tela.

As duas identidades e a entrada da conta, como o cliente vê.

Próximo projeto03 / 51

GTA RP: scripts e ferramentasBlackout SmartphoneUm celular inteiro dentro do GTA RP: 46 apps, central de controle, notificações e conversa com o servidor em tempo realReact 18.3JavaScript (JSX)Vite 5.4Tailwind CSS 3.4

← AnteriorBabyShoes

Início

Uma mensagemde Natal feitapara cada criança.

Uma mensagemde Natal feitapara cada criança.

Um catálogo inteiro atrás de cada porta.

Produtos no catálogo

Linhas de produto

Campos de personalização

Identidades na mesma loja

Abas na área do cliente

Pontos no editor visual

Oito linhas de presente, 21 produtos.

Convite do Papai Noel

Papai Noel responde

Mensagens cristãs

Histórias bíblicas

Combos e pacotes

Cartinhas digitais

Cartinhas pelos Correios

WhatsApp do Papai Noel

Cada pedido chega com uma ficha.

Uma ficha por produto

Seis tipos de campo

Conferida antes do carrinho

O CEP preenche o endereço

A ficha segue com o item

O Natal também é uma mensagem de fé.

O vídeo chega com regras.

Prazo de acesso

Limite de visualizações

Só toca quando está ativo

Marca d'água do pedido

Sem baixar

Para a família ver

Uma loja inteira dentro do WordPress.

WordPress e WooCommerce

Uma página do tema

Um pacote só

A versão no nome do arquivo

O editor visual

Do que é feito, peça por peça

A loja, tela por tela.