A Christmas messagemade just forevery child.

Personalized videos, letters and surprises from Santa Claus.

A Christmas store in React that runs inside WordPress, in two identities.

Online storeSanta Claus and faithWordPress + WooCommerce

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT

A Christmas messagemade just forevery child.

Personalized videos, letters and surprises from Santa Claus.

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT

A Christmas store in React that runs inside WordPress, in two identities.

Online storeSanta Claus and faithWordPress + WooCommerce

React 18.3
TypeScript 5.9
Webpack 5
Tailwind 3.4
WooCommerce REST
JWT

PortfolioMeu Natal Digital

The store in numbers

A whole catalog behind every door.

Every number on this page comes from the code: the catalog, the order forms, the two identities and the customer area.

Christmas arrives in

The same countdown that opens the store, live until the 25th.

Products in the catalog
Videos, messages, stories, letters, bundles and WhatsApp, each with its own WooCommerce ID.
Product lines
From Santa's invitation to the Bible stories, each line with its own showcase.
Personalization fields
21 order fields and 7 address fields; each product asks only for its own.
Identities in one store
Santa Claus and Christmas of faith, switched by a single toggle.
Tabs in the customer area
Overview, orders, videos, profile and settings.
Spots in the visual editor
Texts, images and spacing adjustable right on the page.

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

The catalog

Eight gift lines, 21 products.

Each line has its own showcase, and each product its own price and lead time in the code. Videos and messages arrive in the customer area; letters, as a PDF or by mail.

Santa's invitation
3 productsR$ 49.90 to R$ 79.90
Santa calls the child by name to write the letter: simple, magical or premium.
Santa replies
3 productsR$ 69.90 to R$ 99.90
The reply to the letter, on video, for Christmas Day.
Christian messages
3 productsR$ 59.90 to R$ 74.90
A blessing for the child, a personalized Bible story or a message for the whole family.
Bible stories
3 productsR$ 54.90 to R$ 84.90
From the short tale to the full story of the birth of Jesus, with the child inside the story.
Bundles
3 productsR$ 99.90 to R$ 159.90
Invitation plus reply, the siblings pack and the family pack, for up to 3 children.
Digital letters
2 productsR$ 19.90
Santa's letter as a PDF: one asking for the letter and one replying at Christmas.
Letters by mail
2 productsR$ 29.90
The same letters printed, with the North Pole stamp, delivered by post.
Santa on WhatsApp
2 productsR$ 39.90 to R$ 59.90
Santa on the family's WhatsApp, with audio and stickers: before Christmas and on the day.

Prices from the catalog in the code, in Brazilian reais.

Personalization

Every order comes with a form.

The video calls the child by name because the order carries the child's details. Each product has its own form, checked before it goes into the cart.

One form per product
There are 21 forms: the simple invitation asks for name and age; the premium one asks for four more fields, like the special trait.
Six field types
Text, number, long text, list, choice and address, each with its own limit.
Checked before the cart
Required, maximum length, minimum and maximum, and format: the message says what to fix.
validateField()
The postcode fills the address
For letters by mail, the Brazilian postcode looks up the street, district, city and state.
viacep.com.br
The form travels with the item
The item goes into the cart with its form, and the orders service writes each field into the WooCommerce order.
_natal_nome · _natal_idade

Santa Video Premium Invitation

SKU 3-VPN-CONV-PRE · 7 business days

Child's nameText · up to 50Ana
AgeNumber · 1 to 126Age must be at most 12
Brother or sisterText · optionalPedro
How did they behave this year?ChoiceVery well behaved
Video settingListNorth Pole
A special traitText · up to 100Loves dinosaurs

Form checked · ready for the cart

An envelope of light under a starry sky, with the faith version of the store on a laptop beside it

02/Christmas of faith

Christmas is also a message of faith.

Personalized messages to celebrate the birth of Jesus with the family.

The store has two identities and a single toggle. The same screen swaps the logo, the colors, the top video, the color of the snow and the featured product, and the choice is kept in the browser.

Santa ClausThe top
Christmas of faithThe top
Santa ClausHow it works
Christmas of faithHow it works
Santa ClausThe catalog
Christmas of faithThe catalog
Santa ClausWhat you get
Christmas of faithWhat you get

1 toggleOne choice switches the whole identity, without leaving the page.
27 filesThe components that change their look with it.
Golden snowEven the snow falling on the page turns from white to gold.
RememberedThe choice stays in the browser and comes back on the next visit.

The delivery

The video arrives with rules.

After the order, the video lives in the customer area, with a deadline, a view limit and a watermark. The player checks every rule before it plays.

The store's sample videos screen — 3 days of access left

Access deadline
Once the date passes, the player closes and shows the expired-access notice. With 3 days or less, the countdown changes color.
expiresAt < now
View limit
Every time the video plays, the view is recorded; at the limit, it no longer opens.
currentViews >= maxViews
Plays only when active
While it is being produced, the video is pending; when ready, it is active; once due, it expires.
pending · active · expired
Order watermark
The order number stays over the video for the whole playback.
No downloading
No download button, fullscreen or floating window; right-click, Ctrl+S and dragging are blocked.
For the family to watch
The video link goes out by WhatsApp or by email.

The customer area

Overview
Orders
Videos
Profile
Settings

Levels by total spent

BronzeUp to R$ 149
SilverFrom R$ 150
GoldFrom R$ 300
DiamondFrom R$ 500

Inside

A whole store inside WordPress.

The app does not replace the website: it goes into a WordPress page, talks to WooCommerce and reaches the browser as a single bundle, with the version in the file name.

WordPress and WooCommerce
Products, orders, customers and coupons through the WooCommerce REST API; login goes through JWT. The store's own routes (videos, orders and personalization) have their client in the app.
/wc/v3 · /jwt-auth/v1 · /natal/v1
A page of the theme
The app mounts in a div on the page, and its own CSS forces full width inside the Astra theme.
#natal-root
A single bundle
Webpack builds a UMD bundle called NatalApp; React comes from the page itself, outside the bundle.
library: NatalApp · externals: react
The version in the file name
The version.json file goes into the name: natal.bundle.v208.js and main.v208.css. New version, new file, and the browser never uses the old copy.
version.json → v208
The visual editor
Shift+F turns on editing right on the page: 32 spots of text, image and spacing, with undo and redo, written into the code by a local server.
Tunable · element-styles.ts

The technologies

What it is made of, piece by piece

A store that runs inside a WordPress site: the storefront is built in React and talks to WooCommerce for orders and the customer account. Pick a piece to see what it does here and which file it is in.

11technologies, in 3 layers

Screen

Server

Build

1Re18

Layer: Screen

React 18

Draws the whole store (storefront, invitation forms, customer area) inside the WordPress page.

Where it is in the code

src/main.tsx

Layer: Screen

TypeScript 5.9

The store's language, which helps write the code with fewer mistakes.

Where it is in the code

tsconfig.json

Layer: Screen

Tailwind CSS 3.4

Gives the store its look and fits it to the phone.

Where it is in the code

src/styles/main.css

Layer: Screen

Embla Carousel 8.6

The invitation and testimonial carousels that slide on their own.

Where it is in the code

src/components/testimonials.tsx

Layer: Screen

react-snowfall 2.3

Makes snow fall on the page, white or gold, depending on the theme.

Where it is in the code

src/App.tsx

Layer: Screen

React Context React

Keeps the login and the visual editor's settings while the visitor browses.

Where it is in the code

src/context/tuner-context.tsx

Layer: Server

WooCommerce REST v3

Where the customer area's orders and coupons come from; the store lives inside WordPress.

Where it is in the code

src/api/config.ts

Layer: Server

JWT WP-API

Logs the customer in and keeps them connected securely.

Where it is in the code

src/api/services/auth-service.ts

Layer: Server

ViaCEP REST

Fills in the address on its own from the postal code.

Where it is in the code

src/api/services/personalization-service.ts

Layer: Build

Webpack 5.102

Bundles the store into a single file WordPress loads, with the version in the name so caches never get stuck.

Where it is in the code

webpack.config.js

Layer: Build

Babel 7.28

Translates modern code so it works in any browser.

Where it is in the code

.babelrc

The screens

The store, screen by screen.

Both identities and the account sign-in, as the customer sees them.

Next project03 / 51

GTA RP scripts and toolsBlackout SmartphoneA whole phone inside GTA RP: 46 apps, a control centre, notifications and real-time talk with the serverReact 18.3JavaScript (JSX)Vite 5.4Tailwind CSS 3.4

← PreviousBabyShoes

Home

A Christmas messagemade just forevery child.

A Christmas messagemade just forevery child.

A whole catalog behind every door.

Products in the catalog

Product lines

Personalization fields

Identities in one store

Tabs in the customer area

Spots in the visual editor

Eight gift lines, 21 products.

Santa's invitation

Santa replies

Christian messages

Bible stories

Bundles

Digital letters

Letters by mail

Santa on WhatsApp

Every order comes with a form.

One form per product

Six field types

Checked before the cart

The postcode fills the address

The form travels with the item

Christmas is also a message of faith.

The video arrives with rules.

Access deadline

View limit

Plays only when active

Order watermark

No downloading

For the family to watch

A whole store inside WordPress.

WordPress and WooCommerce

A page of the theme

A single bundle

The version in the file name

The visual editor

What it is made of, piece by piece

The store, screen by screen.