Back to projects

Online Store

Stylos

A full online clothing store: filter by colour, size, brand and price, real freight quotes to the address, card and Pix payment, and a cart kept on the server so it follows the shopper between devices.

Next.jsNestJSTypeScriptPostgreSQLPrismaMercadoPagoNextAuthZustandSendGridGSAP

Some details omitted under NDA

Stylos

The problem it solved

A clothing shop selling by message: every question about colour, size and availability answered by hand, freight guessed, payment by bank transfer and no record of what went out.

That caps the shop at the hours somebody is on their phone, and it makes every order a matter of trust: the message says the money was sent, but the shop has no way to check that itself.

What the store does

Browse by filter

By category, brand, colour, size and price range, plus text search.

Colour and size variants created for you

Enter the item once and the system creates a variant per colour and size, each with its own code, stock, price and photos.

Real freight to the address

Quoted from a carrier aggregator using each item's actual weight and dimensions, with the chosen option saved on the order.

Card and Pix

Payment through MercadoPago, with the approved, pending and declined paths all handled.

A cart that follows the shopper

The cart lives on the server, so it is still there when someone moves from phone to desktop.

Customer accounts

Sign in by email or Google, password reset and the store's automatic emails.

Customer area

Several saved addresses, order history and a favourites list.

Sales dashboard

Revenue for the day, week and month against the previous period, with 7-day, 7-week and 7-month trend lines.

Best sellers

Reports on what sells best by product, by category and by brand.

Catalogue management

Full product editing including the SEO fields, plus categories, colours, sizes and brands.

A product page worth sharing

Its own address per product, with the right preview when the link is posted on social media.

Product page
01

Product page

Product with variants (colors and sizes), image gallery and add-to-cart.

How it turned out

  • Shoppers answer their own colour, size and freight questions, at any hour.
  • An order is only written after the payment has been re-fetched from MercadoPago, not by believing the notification that arrived. That is exactly where most stores are exposed.
  • The owner sees what sold without asking anyone, by day, week and month, and knows which item, category and brand pull the sales.
  • Listing one item stopped meaning listing fifteen: the colour and size variants come out in one go.
  • What is still missing, said plainly: freight is wired to the carrier's test environment, so label purchase and tracking codes are not finished. And a catalogue sync to the ConnectPlug ERP is built and waiting for the client's real credentials.

In numbers

2

ways to pay: card and Pix

18

screens

91

API operations

For technical visitors

The rest of this page is written for whoever decides the purchase. This block is for whoever has to maintain the store.

  • NestJS backend with 19 Prisma models and 3 enums, 91 HTTP endpoints across 15 controllers, 87 use cases in 4 bounded contexts, 245 TypeScript files and 46 spec files (38 use-case unit, 9 e2e).
  • The payment webhook has its x-signature validated with HMAC-SHA256 and, before the order is written, the payment is re-fetched from MercadoPago's API. Validating the signature and re-fetching instead of trusting the webhook body is where most stores are insecure.
  • Automatic colour x size variant generation on product creation, each variant with its own SKU, stock, price and images.
  • Freight from Melhor Envio, currently pointed at the sandbox endpoint. Label purchase and tracking codes are unfinished.
  • Server-side cart, archived only after an approved payment. There is no abandoned-cart detection and no recovery email, and we do not claim otherwise.
  • Email verification sends the message and the endpoint flips the flag, but the verify page reads a field the backend never returns and login never checks the flag. Today it gates nothing.
  • Image upload with a path-traversal guard, role-based API guards and 2,748 lines in the admin panel.
  • A ConnectPlug ERP catalogue sync is built, with the token still a placeholder.

Ready to build your project?

Let's turn your idea into a tailored digital solution.

Get in touch