BORMLINE.

Premium Modest Fashion Affiliate Platform

A full-featured, production-grade affiliate e-commerce platform for premium modest fashion — built with React, TypeScript, Tailwind CSS, and Vite.

Features • Tech Stack • Getting Started • Project Structure • Screenshots • License

✨ Premium storefront with hero carousel, category grid, and editorial lookbook

Overview

BORMLINE. is a curated affiliate marketplace designed for the Gulf region's modest fashion industry. It connects consumers with premium abaya, sheila, and hijab brands through an elegant storefront experience — while providing brands with a complete affiliate tracking, analytics, and partner management system behind the scenes.

The platform demonstrates a real-world Server-to-Server (S2S) postback affiliate tracking workflow, making it ideal for learning, portfolio showcase, or as a starting point for production affiliate platforms.

Features

🛍️ Storefront (Consumer-Facing)

Premium Homepage — Hero carousel, visual category grid, trending products, deal-of-the-day countdown, best sellers, Instagram-style lookbook, and newsletter signup
Product Catalog — Full product listing with category filtering, search, and sorting
Product Detail Pages — Detailed product view with affiliate click-through tracking
Brand Directory — Browse and discover partner brands with individual brand pages
Product Comparison — Side-by-side product comparison tool
Wishlist — Save and manage favorite products (persisted via localStorage)
Global Search — Real-time search across products, brands, and categories
Contact Page — Full contact form with office location details

🔗 Affiliate Tracking System

Click Tracking — Every outbound affiliate click is logged with a unique click_id, referrer, user agent, and timestamp
S2S Postback Simulation — Simulates server-to-server conversion postbacks with realistic order data, commission calculation, and status tracking (completed/pending/failed/refunded)
S2S Journey Page — Interactive educational walkthrough explaining the full S2S tracking lifecycle with animated diagrams and live demo capabilities
Retargeting Engine — Detects abandoned clicks (no conversion) and surfaces personalized re-engagement banners with discount offers

📊 Admin Dashboard

Analytics Dashboard — Real-time metrics: total clicks, conversions, revenue, commission earned, conversion rates, and performance charts (powered by Recharts)
Product Management — Full CRUD for products with image URLs, pricing, categories, and affiliate links
Brand Management — Add, edit, and delete partner brands with commission rates, API secrets, and integration types (S2S / CSV)
Tracking & Postback Logs — Detailed click and postback log viewer with CSV export
CSV Import/Export — Bulk product import via CSV and data export capabilities
Brand Applications — Review, approve, or reject incoming brand partnership requests
Settings — Admin profile management and data reset controls
Activity Log — Audit trail of all admin actions (add/edit/delete/import operations)
Auth Guard — Protected admin routes with demo login system

🌐 Internationalization & Theming

Bilingual Support — Full English ↔ Arabic translation with RTL layout support
Dark / Light Mode — System-aware theme switching with manual override
Responsive Design — Mobile-first with premium bottom navigation bar, mega dropdown menus, and touch-optimized interactions

🎨 UI & UX

49 Radix UI Components — Fully accessible component library (shadcn/ui)
Premium Animations — Scroll reveal, marquee banners, hover accordion lookbook, staggered loading
Glassmorphism & Modern Design — Trust strips, bento grids, gradient overlays, and editorial layouts
Live Chat Widget — Floating support chat bubble (demo mode)
Scroll-to-Top — Floating button appears on scroll
Payment Badges — mada, Visa, Mastercard, Tabby, Tamara icons in footer
SEO Optimized — Open Graph, Twitter Card meta tags, semantic HTML, and robots.txt

Tech Stack

Layer	Technology
Framework	React 18 + TypeScript
Build Tool	Vite 5 (SWC plugin)
Styling	Tailwind CSS 3 + CSS Variables
Components	shadcn/ui (Radix UI primitives)
Routing	React Router v6
State	React Context + localStorage persistence
Charts	Recharts
Data Fetching	TanStack React Query
Forms	React Hook Form + Zod
Icons	Lucide React
Typography	DM Sans (Google Fonts)
Testing	Vitest + Playwright
Linting	ESLint 9 (flat config)

Getting Started

Prerequisites

Node.js ≥ 18
npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/abdirizak-30/bormline.git
cd bormline

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:3000

Available Scripts

Command	Description
`npm run dev`	Start Vite dev server with HMR
`npm run build`	Production build
`npm run preview`	Preview the production build locally
`npm run lint`	Run ESLint
`npm run test`	Run unit tests via Vitest
`npm run test:watch`	Run tests in watch mode

Admin Access (Demo)

Navigate to /admin/login and use the demo credentials:

Field	Value
Email	`admin@bormline.com`
Password	`admin123`

⚠️ Note: This is a client-side demo with localStorage persistence. No real backend or database is used. All data resets on localStorage.clear().

Project Structure

BORMLINE./
├── public/                     # Static assets & favicons
│   ├── bormline-favicon.svg
│   ├── favicon.ico
│   └── robots.txt
├── src/
│   ├── components/             # Reusable UI components
│   │   ├── ui/                 # 49 shadcn/ui primitives
│   │   ├── Layout.tsx          # Global layout (header, footer, nav, chat)
│   │   ├── ProductCard.tsx     # Product card component
│   │   ├── BrandCard.tsx       # Brand card component
│   │   ├── FilterBar.tsx       # Product filter sidebar
│   │   ├── AdminShell.tsx      # Admin dashboard shell
│   │   ├── AdminGuard.tsx      # Route protection for admin
│   │   ├── TrackingButton.tsx  # Affiliate click-through button
│   │   └── ThemeToggle.tsx     # Dark/light mode switcher
│   ├── hooks/                  # Custom React hooks
│   │   ├── use-auth.tsx        # Authentication context
│   │   ├── use-language.tsx    # i18n context (EN/AR)
│   │   ├── use-wishlist.ts     # Wishlist state management
│   │   ├── use-data-store.ts   # Store event listener hook
│   │   ├── use-mobile.tsx      # Mobile breakpoint detection
│   │   └── use-toast.ts        # Toast notification hook
│   ├── lib/                    # Core utilities & data
│   │   ├── data-store.ts       # In-memory data store + localStorage
│   │   ├── data-translations.ts# Arabic product translations
│   │   ├── translations.ts     # Full UI translation dictionary
│   │   ├── types.ts            # TypeScript interfaces
│   │   └── utils.ts            # Utility functions
│   ├── pages/                  # Route-level page components
│   │   ├── HomePage.tsx        # Landing page (13 sections)
│   │   ├── ProductsPage.tsx    # Product catalog
│   │   ├── ProductDetailPage.tsx # Single product view
│   │   ├── BrandsPage.tsx      # Brand directory
│   │   ├── BrandPage.tsx       # Individual brand page
│   │   ├── SearchPage.tsx      # Search results
│   │   ├── ComparePage.tsx     # Product comparison
│   │   ├── WishlistPage.tsx    # Saved items
│   │   ├── ContactPage.tsx     # Contact form
│   │   ├── S2SJourneyPage.tsx  # S2S tracking explainer
│   │   ├── LegalPage.tsx       # Legal pages (terms, privacy, etc.)
│   │   ├── BrandApplyPage.tsx  # Brand partnership application
│   │   ├── AgreementPage.tsx   # Partner agreement
│   │   ├── AdminPage.tsx       # Admin analytics dashboard
│   │   ├── AdminProductsPage.tsx   # Admin product CRUD
│   │   ├── AdminBrandsPage.tsx     # Admin brand CRUD
│   │   ├── AdminTrackingPage.tsx   # Click & postback logs
│   │   ├── AdminImportPage.tsx     # CSV import tool
│   │   ├── AdminBrandRequestsPage.tsx # Brand application review
│   │   ├── AdminSettingsPage.tsx   # Admin settings
│   │   ├── AdminLoginPage.tsx      # Admin authentication
│   │   └── NotFound.tsx            # 404 page
│   ├── App.tsx                 # Root app with routing
│   ├── main.tsx                # Entry point
│   └── index.css               # Global styles + CSS variables
├── index.html                  # HTML entry point
├── vite.config.ts              # Vite configuration
├── tailwind.config.ts          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
├── eslint.config.js            # ESLint flat config
├── vitest.config.ts            # Vitest configuration
├── playwright.config.ts        # Playwright E2E config
└── package.json                # Dependencies & scripts

Data Model

The platform operates on five core entities:

Entity	Key Fields
Brand	`id`, `name`, `logo_url`, `website_url`, `integration_type` (s2s/csv), `commission_rate`, `api_secret`, `country`
Product	`id`, `brand_id`, `name`, `price`, `original_price`, `image_url`, `affiliate_url`, `category`, `is_new`
ClickLog	`id`, `product_id`, `brand_id`, `referrer`, `user_agent`, `clicked_at`
PostbackLog	`id`, `click_id`, `brand_id`, `product_id`, `order_id`, `amount`, `commission`, `currency`, `status`
BrandRequest	`id`, `name`, `contact_name`, `contact_email`, `category`, `company_size`, `status` (pending/approved/rejected)

S2S Affiliate Tracking Flow

┌──────────┐    click     ┌───────────┐   redirect    ┌──────────────┐
│  User    │ ──────────►  │ BORMLINE  │ ───────────►  │ Brand Store  │
│ (Browser)│              │  (Track)  │               │  (Merchant)  │
└──────────┘              └───────────┘               └──────┬───────┘
                               │                             │
                          Log click_id                  User purchases
                               │                             │
                               ▼                             ▼
                     ┌──────────────────┐          ┌─────────────────┐
                     │  Click Logs DB   │◄─────────│ S2S Postback    │
                     │  (localStorage)  │  match   │ (click_id +     │
                     └──────────────────┘ click_id │  order data)    │
                                                   └─────────────────┘

User clicks an affiliate link on BORMLINE
BORMLINE logs the click with a unique click_id and appends it to the redirect URL
User lands on the brand's website and (optionally) makes a purchase
Brand sends a postback to BORMLINE with the click_id, order ID, amount, and commission
BORMLINE matches the postback to the original click and records the conversion

Product Categories

Category	Description
Everyday Abayas	Classic, comfortable daily wear
Evening Abayas	Silk, embellished, and occasion wear
Modern Abayas	Contemporary cuts and trending styles
Winter Abayas	Warm, lined abayas for cold weather
Bridal Abayas	White and beaded bridal collections
Sheilas & Hijabs	Chiffon, silk, and jersey head coverings
Under Abayas	Inner dresses and slips

Partner Brands (Seed Data)

Brand	Country	Integration	Commission
Elegance Abaya	UAE	S2S	15%
Dar Al Abaya	Kuwait	CSV	10%
Silk & Stitch	Bahrain	S2S	12%
Modest Crown	Saudi Arabia	CSV	10%
Nova Abayas	Saudi Arabia	S2S	8%

Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project is licensed under the MIT License — see the LICENSE file for details.

Author

Abdirizak — @abdirizak

BORMLINE. — Where Modest Fashion Meets Modern Technology

Navigation Menu

Repository files navigation

BORMLINE.

Overview

Features

🛍️ Storefront (Consumer-Facing)

🔗 Affiliate Tracking System

📊 Admin Dashboard

🌐 Internationalization & Theming

🎨 UI & UX

Tech Stack

Getting Started

Prerequisites

Installation

Available Scripts

Admin Access (Demo)

Project Structure

Data Model

S2S Affiliate Tracking Flow

Product Categories

Partner Brands (Seed Data)

Contributing

License

Author

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Latest commit

History

Folders and files

Repository files navigation

BORMLINE.

Overview

Features

🛍️ Storefront (Consumer-Facing)

🔗 Affiliate Tracking System

📊 Admin Dashboard

🌐 Internationalization & Theming

🎨 UI & UX

Tech Stack

Getting Started

Prerequisites

Installation

Available Scripts

Admin Access (Demo)

Project Structure

Data Model

S2S Affiliate Tracking Flow

Product Categories

Partner Brands (Seed Data)

Contributing

License

Author

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages