First steps,a purchasemade extraspecial.

Baby shoes, with a little box the family puts together their own way.

A complete baby shoe store, from storefront to payment, from shipping to admin.

Live storeLight and darkPT · EN · ES

Next.js 16
React 19
TypeScript
Prisma
MySQL
Mercado Pago

First steps,a purchasemade extraspecial.

Baby shoes, with a little box the family puts together their own way.

Next.js 16
React 19
TypeScript
Prisma
MySQL
Mercado Pago

A complete baby shoe store, from storefront to payment, from shipping to admin.

Live storeLight and darkPT · EN · ES

Next.js 16
React 19
TypeScript
Prisma
MySQL
Mercado Pago

PortfolioBabyShoes

The box

The more pairs, the less each one costs.

The heart of the store isn't the single pair, it's the box. The family picks up to four pairs, any color, model and size, and the price of each one drops with every slot filled. The same math runs on the storefront, in the cart, at checkout and in the order e-mail.

1 pairR$ 39,90R$ 39,90
2 pairsR$ 34,95R$ 69,90
3 pairsR$ 31,63R$ 94,90
4 pairsR$ 29,98R$ 119,90

R$ 39,90 per pair

Total —You save —

Box closed

Mix freely
Boy, girl, high-top, velcro: every pair in the box can be a different model and a different size.
A fair split
With more than four pairs, the cart splits into boxes at the lowest price, a rule checked against the exact calculation from 1 to 24 pairs.
Special models
If a pair costs more than the standard one, the box only charges the difference, and the bundle discount still applies.

Scale

A sweet storefront, a whole system behind it.

Behind the little shoes is a complete store: catalog, stock, payments, shipping, e-mails and a management panel, all in three languages, with tests that run across ten screen sizes.

Lines of code
TypeScript and CSS, libraries not included
Screens
20 in the store and 22 in the admin
API routes
Payment, shipping, coupons, customers and admin
Database tables
MySQL with Prisma: orders, stock per size, coupons, history
Shoes in 3D
Each model with its own 3D file, on the box stage
Test runs
31 browser tests across 10 screen sizes

Next.js 16.3
React 19.2
TypeScript 5.9
Tailwind CSS 4.3
Prisma 6.19
MySQL
next-intl 4.14
three.js 0.180
React Three Fiber 9
GSAP 3.15
Motion 13
Zustand 5
Mercado Pago SDK 3.6
Zod 3
Nodemailer
Playwright 1.56

Which size?

Measure the little foot right on the screen.

The biggest fear when buying baby shoes online is getting the size wrong. The store answers with a ruler: measure from heel to the tip of the big toe, drag the ruler and it suggests the right size from the store's own chart. This one runs the same math, drag it, or just scroll the page.

One chart, three places
The size buttons, the ruler and the true-size view all read the same store chart.
True size, calibrated
So the drawing is life-size, the screen is calibrated with a standard card (ISO ID-1).
Buzzes every half centimeter
On Android, the ruler gives a short vibration every 0.5 cm, so you can measure without looking.

9.5 cm

139.0 cm
1410.0 cm
1510.5 cm
1611.0 cm
1711.5 cm

Size 14 · between two sizes, the suggestion is the larger one, so it won't pinch.

Four phones and a monitor showing the BabyShoes store screens, in a baby's room at night

The journey on the phone

Every choice, a new little step.

From discovering the models to the personalized box, an experience designed for touch.

Discover
The storefront splits boy and girl without hiding anything: the filter lights up each one's models and dims the rest.
Choose
Every model shows up in 3D inside the box, with the real photos alongside, and the size comes from the ruler.
Imagine
A stroll, a party, every day or as a pair: the occasions show the shoe on the feet that will wear it.
Build your box
Up to four pairs in the same box, and the cart is still there even if the page closes.

Day and night

The same store, by day and by night.

Every screen was designed twice: in light, for the morning, and in navy, for whoever shops with the baby already asleep. Scroll the page and the day breaks.

The store on a monitor and a phone, Night

No flash
The theme is applied before the page paints: whoever chose dark never sees a white flash on opening.
It stays
The choice is saved on the device and comes back on the next visit, an automated test checks it.
Tested in both
The layout tests run across the ten screen sizes in both themes.

A real purchase

From click to payment, nothing is for show.

The storefront is the part you see. Underneath, every order travels the path of a real store, and that path was audited with the store running, purchase by purchase.

27/27Sales and stock tests passing in the audit
5 → 1Five purchases of the last pair at once: only one goes through
0Broken links across 93 pages and 20 admin screens
1×Cancelling twice returns the pairs only once

BabyShoes · orderThe path of an order, step by step

01
Stock reserved
The pairs leave the stock at once, size by size; two orders never take the same pair.
Instantly
02
Shipping quoted
Melhor Envio or SuperFrete, with quotes cached in the database and the store's own table if the API is down.
PAC · SEDEX
03
Coupon checked
Percentage or fixed value, cap, minimum order, usage limit and use per e-mail.
Rules
04
Payment
Pix with QR and copy-paste code, or card in up to 12 installments, through Mercado Pago's orders API.
Pix · card
05
Safe confirmation
Mercado Pago's notice has its signature verified, and the payment is checked again at the source.
Webhook
06
E-mail in the right language
Order received, paid, shipped, exchange: eight templates, in Portuguese, English and Spanish.
8 × 3
07
Pick, ship, deliver
With a tracking code; an order not paid in time cancels itself and returns the pairs.
Tracking
08
Exchanges and returns
Refund through Mercado Pago, the pair back in stock and the new size reserved on an exchange.
Refund

All in the history logRecorded

The helper

Still have a question? Passinho answers.

The store's mascot lives in the corner of the screen. He knows the way through the most common questions, size, box, models, and, when a person is needed, hands the chat over to WhatsApp with the message already written.

Answers written by the store
A tree of answers made by the store itself: Passinho never makes up a deadline or a price.
Six poses
Waves, points, holds the little shoe, cheers, waits, naps: a whole character, not an icon.
Ready-made messages
In the admin, the store edits the WhatsApp texts for paid, shipped, pickup and reminder.

The admin

The whole store in the palm of your hand.

Whoever sells doesn't need a developer day to day: there are 21 management screens, all wired to the database, from the order to the price, from the e-mail to the site's colors. And the admin speaks three languages too.

Sales 6 screens

Dashboard
Orders
Customers
Coupons
Reports
Trash

Access that protects itself
8-hour sessions, attempt limits per address and an allow-list of addresses.
Encrypted keys
Payment and shipping credentials are stored encrypted in the database (AES-256-GCM), never in plain text.
Translation right there
Products, home page and menu get English and Spanish from the admin itself.
Reports that compare
Sales in Brasília time, side by side with the previous period.

The store admin on a phone, with the day's summary

The technologies

What it is made of, piece by piece

A real store: the storefront with the shoes in 3D, the cart, the payment and the owner's panel. Pick a piece to see what it does here and which file it is in.

16technologies, in 4 layers

Screen

Server

Data

Payment and tests

1Nx16.3

Layer: Screen

Next.js 16.3

Builds the store and panel pages and delivers everything fast to shoppers.

Where it is in the code

app/[locale]

Layer: Screen

React 19.2

Draws every part of the screen (storefront, cart, panel) as reusable pieces.

Where it is in the code

components/caixinha/Caixinha.tsx

Layer: Screen

TypeScript 5.9

Checks the code before it runs, so no silly mistake goes live.

Where it is in the code

tsconfig.json

Layer: Screen

Tailwind CSS 4.3

Gives the store its look: colors, spacing and the fit to every screen size.

Where it is in the code

app/globals.css

Layer: Screen

GSAP 3.15

Makes the texts appear as the visitor scrolls down.

Where it is in the code

components/fx/Revelar.tsx

Layer: Screen

Motion 13.4

Animates the box and the little feet when the customer picks the pairs.

Where it is in the code

components/caixinha/Caixinha.tsx

Layer: Screen

Three.js + R3F 0.180

Shows each little shoe in 3D, spinning, with light and shadow.

Where it is in the code

components/caixinha/Cena3D.tsx

Layer: Screen

next-intl 4.14

Puts the store in more than one language, switching texts and addresses.

Where it is in the code

i18n/routing.ts

Layer: Screen

Zustand 5.0

Keeps the cart while the customer browses the store.

Where it is in the code

stores/cart-store.ts

Layer: Server

Zod 3.25

Checks that an order's or coupon's data arrived right before accepting it.

Where it is in the code

app/api/checkout/route.ts

Layer: Server

jose 6.2

Creates and checks the digital badge that lets the owner into the panel.

Where it is in the code

lib/admin-auth.ts

Layer: Server

Nodemailer 10.0

Sends the store's emails on its own: order received, contact.

Where it is in the code

lib/email.ts

Layer: Data

Prisma 6.19

Reads and writes products, customers and orders without hand-written SQL.

Where it is in the code

lib/prisma.ts

Layer: Data

MySQL SQL

The database holding products, stock, customers and orders.

Where it is in the code

prisma/schema.prisma

Layer: Payment and tests

Mercado Pago 3.6

Takes the card payment and tells the store when it is approved.

Where it is in the code

app/api/webhooks/mercadopago/route.ts

Layer: Payment and tests

Playwright 1.56

Opens the store on its own at several screen sizes and checks nothing broke (6 test files).

Where it is in the code

tests/regressao/carrinho.spec.ts

The screens

The store, screen by screen.

Desktop and phone designed separately, each at its own pace: 23 screens in four groups, from the storefront to the closed box.

Opening: first little steps
Moms' favorites
The 19 models on the storefront

Boy filter: the rest dim, none disappear
For every moment
Why little feet love them

Live

All 19 models, each at its own address.

The store is published. Every little shoe has its own page, with its photos, sizes and stock for each size, pick one and it opens in the real store.

Visit the store

Next project02 / 51

Stores and e-commerceMeu Natal DigitalSanta videos, faith messages and letters, with a personalization form per product and rule-based delivery, in React inside WordPressReact 18.3TypeScript 5.9Tailwind CSS 3.4Embla Carousel 8.6

← PreviousVisionAI Studio

Home

First steps,a purchasemade extraspecial.

First steps,a purchasemade extraspecial.

The more pairs, the less each one costs.

Mix freely

A fair split

Special models

A sweet storefront, a whole system behind it.

Lines of code

Screens

API routes

Database tables

Shoes in 3D

Test runs

Measure the little foot right on the screen.

One chart, three places

True size, calibrated

Buzzes every half centimeter

Every choice, a new little step.

Discover

Choose

Imagine

Build your box

The same store, by day and by night.

No flash

It stays

Tested in both

From click to payment, nothing is for show.

Stock reserved

Shipping quoted

Coupon checked

Payment

Safe confirmation

E-mail in the right language

Pick, ship, deliver

Exchanges and returns

Still have a question? Passinho answers.

Answers written by the store

Six poses

Ready-made messages

The whole store in the palm of your hand.

Access that protects itself

Encrypted keys

Translation right there

Reports that compare

What it is made of, piece by piece

The store, screen by screen.

All 19 models, each at its own address.