Sneakers

Story

I wanted to build a store a business could make its own.

When I thought about selling products online, I kept coming back to the storefront itself. Amazon was a familiar reference for inspecting a product, reading about it and choosing what to buy. I wanted to understand those interactions well enough to build a store where a business could control its own branding and customer experience.

That gave a set of e-commerce designs a purpose beyond practice. I chose several outside my day job because each concentrated on a different part of shopping. One focused page would not give me all the references I wanted. Together, they could help me learn how the pieces fit and prepare templates I could later tailor to actual products.

Sneakers gave me the product-page part of that work. The gallery, product text, size and quantity choices, and cart were small enough to examine closely. I wanted to get familiar with the details behind an interaction I had used many times as a shopper.

I expected to do more of the implementation from scratch myself. This became one of the projects where I used agents much more heavily. Their involvement surprised me. AI coding agents turned the supplied design into a working interface in Next.js with TypeScript, and I was happy with the result and the process we had built around it.

My work was directing the adaptation, getting it deployed and thinking through how it could become a reusable base for a business. The page lets someone inspect the product, select a size and quantity, and keep that selection in a cart across refreshes.

Payments were the part I felt less familiar with. I researched options and contacted providers, using my own shopping habits as a starting point. I often choose Apple Pay or the Google payment option because they make paying easier for me. I wanted that kind of familiar experience in a store I built, too.

That clarified the next question. A wallet button is part of the customer's checkout experience, and it needs a payment provider and a working integration behind it. My preference gives that search a direction.

Where it stands: the demo stops at the cart, before an order. Next is tailoring this work and the other e-commerce references to real businesses and products, then connecting the services needed to sell them.

I started with a design I wanted to build. I came away with a working reference for a storefront a business could make its own, experience collaborating heavily with agents, and a clearer view of the payment work still ahead.

Design: Frontend Mentor's E-commerce product page (opens in a new tab). Build and adaptation: Royer Adames, working heavily with AI agents.