HAM0UDA
Pricing
Back to projects
Case studyFashion / E-commerce Discovery

2moiselle

A modern shopping discovery experience bringing together fashion, beauty, accessories, and lifestyle products from Tunisian retailers.

Live Website2moiselle.tn
2moiselle home: “Tout ce que vous aimez. À un seul endroit.” hero with product search, category navigation, favorites, language switch and category tiles

Overview

2moiselle is a shopping-discovery platform for women in Tunisia, live at 2moiselle.tn. It brings fashion, beauty, shoes, bags, jewelry, accessories, kids and mom-and-baby products from Tunisian online stores into one bilingual French and English catalogue, with smart search, faceted filters, deals and a budget look builder. Shoppers save favorites and compare products without creating an account, then buy directly on the retailer’s own site.

Problem

Fashion, beauty and lifestyle products from Tunisian online stores are scattered across many separate shops. Comparing prices, discounts and options means visiting each store one by one.

Solution

One statically generated catalogue that gathers products from Tunisian retailers and makes them easy to explore: natural-language search, URL-synced filters, deal presets and budget-based outfit ideas. Favorites and comparison live in the browser with no sign-up, and every product page links straight to the exact product on the seller’s site, where the purchase is completed. 2moiselle itself takes no payments.

Features

  • Multi-category discovery

    Eight categories (Women, Beauty, Shoes, Bags, Jewelry, Accessories, Kids, Mom & Baby) with subcategory navigation and a curated homepage.

  • Smart natural-language search

    Free text is parsed into price limits, colours (including French colour words) and kids’ ages, shown back as “understood” chips, with FR/EN synonyms and relevance scoring.

  • Faceted filters and sorting

    Price range, minimum discount, in-stock only, store, brand, colour, size and age, with six sort orders. Filters live in the URL and open as a bottom sheet on mobile.

  • Favorites without an account

    Heart any product and find it on the Favorites page. Saved in the browser only: no login, no server sync.

  • Side-by-side comparison

    Add up to four products to a compare view, also stored in the browser.

  • Budget-oriented shopping

    A budget page builds complete looks for 100, 150, 200 or 300 TND across outfit pieces, and the deals page offers presets such as Under 50 TND or 30%+ off.

  • Direct retailer links

    Each product page names the seller, stock status and delivery note, and its main button opens the exact product page on the retailer’s site in a new tab to complete the purchase.

  • Store directory

    Browse participating Tunisian stores and every product each one carries.

  • Bilingual French / English

    French by default with a full English mirror under /en. The language switcher keeps the current page and filters; every page carries hreflang and canonical links.

  • Mobile-first layout

    Bottom tab navigation, a menu sheet, bottom-sheet filters and 44px touch targets.

  • SEO and social previews

    Product, offer and organization JSON-LD, a sitemap for both languages, robots, web manifest and generated Open Graph images.

  • Retailer partnership and contact forms

    Server Actions with validation, a honeypot, size caps and rate limiting, delivering email through Resend. Stores can apply to be listed.

Screens

  • Women category listing with subcategory chips, a filter sidebar (price range in TND, minimum discount, in-stock only, stores with counts), sort menu and product cards with discount badges and outbound store links
    Category listing with faceted filters
  • Product page with image, store, price in TND, stock status and colour, a “sold by” card with an outbound button to the retailer and a note that the purchase is completed on the retailer’s site
    Product page linking to the retailer
  • Budget look builder with a 100/150/200/300 TND selector and outfit cards combining items from different Tunisian stores, with total and remaining budget
    Budget look builder
2moiselle on mobile: header with menu, search, favorites and language, the hero, and a bottom tab bar for home, search, favorites, deals and stores
Mobile

Technical Stack

  • Next.js 16 (App Router)Static generation of product, category and store pages, Server Actions, route handlers and metadata
  • React 19Server and Client Components; useSyncExternalStore for browser-stored lists
  • TypeScriptApp, data layer and services
  • Tailwind CSS v4Styling
  • Base UI + class-variance-authorityAccessible primitives such as sheets and bottom sheets, and component variants
  • lucide-reactIcons
  • Cloudflare Workers + OpenNextHosting, with the Cloudflare Images binding for next/image
  • Static catalogue (repository pattern)Production data from a typed catalogue snapshot behind a repository interface, with no database
  • ResendContact and collaboration emails sent from Server Actions
  • Node test runnerUnit tests for catalogue integrity, search, forms and environment (part of the lint → typecheck → test → build check)

Engineering notes

  • Static-first: product, category and store pages are prerendered with generateStaticParams and dynamicParams disabled, so unknown slugs return a real 404.
  • Clean data boundary: pages call a catalogue service backed by a repository interface, with the production implementation reading a static, typed catalogue.
  • Honest data: the catalogue is generated from each store’s product pages with prices checked against the buy URL; unverifiable items are skipped and price history is never invented.
  • Custom search engine with no external service: normalization, a query parser, FR/EN synonyms, stopwords and popularity scoring with a per-product text cache.
  • Two root layouts (French and English) share page bodies, with a global bilingual 404.
  • Security headers and a Content Security Policy built from the origins actually used, an approved-hosts-only image optimizer and environment validation at build time.
  • Quality gate: lint, typecheck, unit tests, then build.

See it in production

2moiselle.tn

Live Website

Need a site like this?

I design and build websites and web apps for businesses: landing pages for €199, business websites for €499, custom projects by quote.

See packages & pricesRequest a quote
Back to projectsNext case studyHjema