Web apps
Softness
A streetwear e-commerce platform with storefront, admin panel, cart, Stripe checkout, and account management.
Explore the project
The demo lets you explore the storefront and shopping experience. GitHub contains the application structure, development scripts, and instructions for connecting it to the dedicated API.
Technologies
Next.js and React form the application foundation, with TypeScript for front-end contracts and Tailwind CSS for the interfaces. Zustand organizes client state, while Stripe participates in payment flows and account payment methods. React Hook Form, Zod, and Axios complete the connection between forms, the interface, and the API.
- Next.js
- TypeScript
- Stripe
- Zustand
About the project
Softness brings the shopping experience and the operation of a streetwear store together in a full-stack application. The storefront lets visitors explore products and collections, search for items, read reviews, and build a cart. The journey continues through checkout and the account area, connecting product discovery with the steps that happen after a purchase.
The other side of the project is the admin dashboard, covering products, collections, banners, coupons, orders, and store settings. These areas share a dedicated Fastify API, while the front-end organizes catalog, authentication, checkout, and administration flows through Next.js routes. The project presents both the customer-facing experience and the tools needed to manage the store.
What it does
- 01
Product discovery through a catalog, collections, and search. Product pages also include reviews, bringing together information that helps visitors choose an item before adding it to the cart.
- 02
Cart and checkout with flat-rate or free shipping rules. Stripe integration is part of the payment experience, connecting the selected products to the completion of a purchase.
- 03
An account area with profile, addresses, orders, and payment methods. Authentication flows include registration and login, plus optional email verification and Google OAuth according to the API configuration.
- 04
An admin dashboard for products, collections, banners, coupons, orders, and settings. It complements the storefront with the tasks needed to maintain the catalog and manage the store.
How it's built
The front-end uses the Next.js App Router and React components to structure the storefront, account pages, and admin dashboard. Components, HTTP services, types, and state have their own areas in the codebase. Axios handles communication with the API, and Zustand organizes shared interface state, including the cart.
Forms use React Hook Form and Zod to combine field management with data validation. The API owns authentication and store resources; the front-end consumes those contracts and presents actions to the user. This separation also carries into deployment, where the application receives the public API URL through environment configuration.