Baillows — Headless Ecommerce Storefront
A Next.js 16 customer storefront consuming the Sellino Laravel API with checkout, authentication, dashboards, wishlist, wallet, affiliate, and real-time updates.
16
Next.js version
v10
Laravel API
HTTP-only
session cookies
The brief.
-
problem
The frontend needs secure client authentication and a consistent experience across shopping, account, and checkout flows.
-
overview
Built a customer-facing storefront that separates presentation from the Laravel commerce backend.
-
solution
Built the Next.js App Router implementation with typed API utilities, HTTP-only token cookies, protected customer routes, and Laravel Reverb-backed updates.
-
role note
I focused on API integration, authentication flows, checkout, protected account pages, and real-time features.
-
business goal
Deliver a responsive shopping experience without duplicating commerce logic in the frontend.
Modules I worked on
Stack
Next.js 16 React 19 TypeScript Tailwind CSSCase study.
Personal project — built as a core product. The notes below describe the product and what I built.
Project Overview
Baillows is a customer-facing ecommerce frontend for a Laravel backend. It provides product discovery, cart and checkout, account features, wishlist, wallet, affiliate tools, deals, and seller-customer chat.
What I Built
I built API integration, authentication flows, checkout, protected account pages, and real-time features as a core product.
Secure Authentication
The storefront uses a shared authentication context and routes login responses through Next.js endpoints that store tokens in HTTP-only cookies. OTP, registration, password reset, and social-login flows synchronize the active session without relying on local storage.
Frontend Architecture
Next.js App Router separates public server-rendered product and navigation data from client-side account and checkout interactions. A typed API layer centralizes calls to the Laravel API, while protected layouts gate customer-only dashboards, wallet, affiliate, and reward-point routes.
Real-Time Features
Laravel Reverb integration supports chat and order-status updates, while the frontend keeps navigation and CMS-managed sections connected to the backend.
Implementation notes
Session handling routes every login response through a Next.js route handler that sets an HTTP-only cookie and immediately refreshes the shared auth context, so OTP, password, and social-login paths converge on one code path. Server components fetch catalog and navigation data directly, while account, wallet, and checkout interactions run client-side against a typed API client with per-route error envelopes, which keeps expired-token handling in one interceptor rather than scattered across pages.
Protected areas sit behind layout-level guards that validate the session before rendering any account UI, so dashboard, wallet, wishlist, and affiliate pages share a single gate. Real-time chat and order-status updates subscribe through Laravel Reverb-backed channels with graceful fallback to polling on reconnect. Products and CMS-managed sections are server-rendered for first paint and SEO, while cart mutations are optimistic and reconciled against the API response, so the cart never shows a state the backend did not confirm.