Beauty
Care BD

Beauty Care BD is a production-ready single-vendor e-commerce storefront for beauty.com.bd. It delivers a full shopping experience-product discovery, campaigns and flash sales, cart and checkout, bKash and cash-on-delivery payments, customer accounts, order tracking, and SEO/analytics-powered by a headless REST API and CMS-driven site settings.

Visit Site

Project Overview

Beauty Care BD is the customer-facing storefront for a single-vendor beauty retailer in Bangladesh. The site covers the full commerce journey: homepage merchandising (hero sliders, campaigns, brand carousels, new arrivals, popular, discounted, and flash-sale sections), nested category and brand browsing, product detail pages with variations and reviews, search, blogs, and CMS policy pages (terms, privacy, refund).

Checkout is built around a slide-out cart with address selection, coupon application, delivery options, and payment via Cash on Delivery or bKash (with redirect flow and success/fail result pages). Customer accounts support OTP phone login, guest checkout, Google/Facebook social sign-in (NextAuth bridged to the backend), profile management, wishlist, saved addresses, order history, and shipment tracking. Site branding, metadata, and legal content are driven by backend settings and CMS pages.

Design & Frontend Approach

The app is a Next.js 16 App Router storefront with React 19, Tailwind CSS v4, shadcn/ui (New York style) on Radix UI primitives, Motion and Swiper for motion/carousels, and Lottie for payment feedback. A semantic design system uses teal primary (#0d9488), success/warning/danger palettes, custom radius tokens, and dark-mode-ready CSS variables in globals.css. Layout combines a sticky navbar with category bar, mobile bottom navigation, account sheet, and dynamically loaded cart/auth modals for a fast, app-like mobile experience.

Mobile-first commerce UI - Responsive breakpoints including xs (390px), fluid product grids and carousels, sticky product bar on scroll, mobile bottom nav, and account/cart sheets optimized for one-handed shopping.
Component-driven storefront - Shared src/components/ui/ primitives (dialogs, sheets, tabs, forms), feature components for products, cart, auth, and account flows, and route-co-located page content (e.g. category and product pages) for maintainable, consistent UI.
Performance-oriented UX - Optimistic cart updates, TanStack Query with localStorage persistence for global data, dynamic imports for heavy client modules (cart, auth, campaigns), and skeleton/loading states across homepage, search, and product routes.

01/06

Architecture-Level Description

The storefront is organized as a feature-domain Next.js App Router application: catalog routes (category, brand, product, search), marketing routes (campaign, flash-sale, blogs), account routes under (account)/, and payment result pages. Shared shells-navbar, category bar, footer, providers-live in src/components/global/, while API access is centralized in src/lib/api/ with typed modules for products, cart, checkout, orders, campaigns, and settings.

Client requests go through a Next.js BFF layer: browser calls /api/v1/* which proxies to NEXT_PUBLIC_API_BASE_URL, while dedicated route handlers cover cart mutations, checkout summary, coupons, and auth. State is split between Zustand stores (cart, addresses, coupons, auth modal) and TanStack Query hooks for server data. NextAuth handles Google/Facebook OAuth and exchanges provider tokens with the backend social-login endpoint.

SEO and growth are first-class: dynamic metadata from CMS settings, JSON-LD for Organization, WebSite, Product, Article, Event, and CollectionPage, a Google Merchant product feed at /merchant-feed.xml, GA4/GTM ecommerce events (view_item, add_to_cart, begin_checkout, purchase), and Facebook Pixel. This keeps the storefront scalable as new merchandising, payment, or account features are added without rewriting the core shell.