Back to Portfolio

Custom System · Full-Stack Build

E-commerce,
Affiliate & Order System

A private internal business system built for real e-commerce operations — covering customer ordering, manual order creation, affiliate tracking, partner and manager workflows, employee portals, admin controls, order status tracking, analytics, and mobile-ready access.

Next.js React Supabase Affiliate System Multi-Role Portals AI-Assisted Dev

🔒 Private project — selected anonymized screenshots shown below.

Admin dashboard overview — anonymized screenshot
Private Project
Custom E-commerce & Affiliate System
Internal operations system with multi-role portals, affiliate tracking, order management, and analytics.
Confidential systemLive URL and real business data are not shared publicly.
View Anonymized Screenshots →
Project Overview

More than a storefront — a full operations system.

This project was built as an internal e-commerce operations system for a real product-based business. The business needed more than a normal storefront — its workflow involved manual payments, uploaded receipts, affiliate codes, partner groups, first-time vouchers, repeat customers, manual orders, order status updates, commissions, and role-based access.

I created a custom system that supports the way the business actually operates. Customers can place orders, affiliates can track earnings and referrals, partners can monitor team performance, employees can help process manual orders, and admins can manage the full workflow from one dashboard.

The Challenge

Off-the-shelf tools weren't enough

The business had workflows that standard Shopify or simple SaaS tools couldn't handle — manual payments, affiliate crediting, partner group ownership, employee-assisted ordering, and admin-level commission corrections all needed to work together.

The Solution

A custom system for real operations

I planned and built a full-stack web application with separate portals for customers, affiliates, partners, employees, and admins — each with only the access and actions relevant to their role.

Selected Anonymized Screenshots

10 screens across 5 portals.

Brand identity, product details, customer information, URLs, order records, affiliate details, and private business data have been blurred or replaced with sample data for confidentiality.

What I Built

Five portals, one connected system.

Each portal was designed for a different type of user, so the right person can access the right information and actions — without seeing anything they shouldn't.

Customer Side

Storefront & Order Flow

Customer-facing ordering with affiliate codes, eligible discounts, uploaded payment receipts, and order status tracking.

Affiliate Portal

Referrals & Commissions

Earnings visibility, payout tracking, referral links, discount codes, commission rates, marketing materials, and team bonus.

Partner Portal

Team & Group Oversight

Group-level visibility of affiliate activity, team orders, revenue, customers, and top affiliate performance.

Employee Portal

Manual Order Workflow

Role-based workflow for employees creating manual orders from chat, phone, Viber, walk-in, or assisted purchases.

Admin Portal

Business Control Center

Full system control — orders, affiliates, partner groups, customers, commissions, content, notifications, and activity logs.

Mobile Access

Installable Web App

Mobile-ready and installable to the phone home screen for app-like access — no App Store or Play Store required.

See the portals in the screenshots Anonymized previews of the admin, partner, affiliate, employee, and mobile experiences above.
View Screenshots →
Manual Orders & Order Tracking

Handling orders the way the business actually works.

Since the business handles manual payments, uploaded receipts, affiliate-assisted purchases, chat orders, phone orders, and repeat customers, the system needed a clear way to create, review, update, and track orders outside of a standard checkout.

Manual Orders

Employee-Created Orders

Employees can create orders manually for customers who order through chat, phone, Viber, repeat purchase messages, affiliate assistance, or other manual sales channels.

Order Tracking

Status-Based Workflow

Orders move through clear statuses — pending, paid, processing, shipped, completed, cancelled — so the team always knows where an order stands.

Affiliate, Referral & Commission Logic

Credit the right person every time.

The business needed a way to track which affiliate or partner group should receive credit when customers use referral links, discount codes, or order manually. I designed the logic around affiliate codes, referral links, recruitment links, repeat purchases, partner groups, commission rates, payout status, and team bonus tracking.

Commissions

Auto & manual commission records

Auto commissions triggered from referral links, manual commissions assigned by admin, confirmed payout tracking, released commission records, and commission filters by status and source.

Referral Tools

Links, codes & recruitment

Each affiliate has a referral link, discount code, and recruitment link. Copy buttons, commission rate display, team bonus visibility, and marketing materials are all accessible from the affiliate dashboard.

See the affiliate and referral screens Screenshots 8 and 9 in the carousel show the affiliate dashboard and referral tools.
View Screenshots →
Analytics & Business Insights

Traffic, clicks, orders — all in one view.

The system includes analytics and business visibility tools so admins and partners can understand traffic, clicks, orders, revenue, customer activity, and partner group performance.

Click & Visit Tracking

Traffic visibility

Total clicks, referral link clicks, group link clicks, direct visits, live visitor activity, and visits by hour.

Filters

Date & group views

Filter performance by date range and partner group to understand activity across different time periods and teams.

My Role

System planning, design, and directed development.

System Planner

Business workflow design

I mapped the full business workflow into system features — customer ordering, manual payments, receipt uploads, affiliate codes, partner groups, managers, employees, admins, vouchers, order statuses, analytics, and commission rules.

AI-Assisted Builder

Custom web app development

I used AI-assisted development to build and refine the system using Next.js, React, Tailwind CSS, Supabase, Vercel, GitHub, and VS Code — directing the architecture, reviewing every decision, and handling all testing and QA.

Technical Stack

Built with modern tools, directed by business logic.

I used AI-assisted development to help generate, debug, and improve code while I controlled the business logic, feature decisions, testing, and system direction.

Next.js React Tailwind CSS Supabase Vercel GitHub VS Code AI-Assisted Development Claude / Cursor Workflow Database Planning Role-Based Access Affiliate System Logic Order Management Manual Payment Flow Upload Receipt Checkout Analytics Dashboard Click Tracking Content Management Mobile-Ready Web App Progressive Web App QA Testing & Troubleshooting
Why This Project Works

Not just a website — a real operations tool.

This project works as a portfolio piece because it shows both business and technical problem-solving. It connects customer ordering with the back-office workflow: manual order creation, receipt checking, order tracking, affiliate crediting, partner group ownership, manager access, employee tasks, analytics, and admin control.

The hardest part was not the design — it was the business rules.

The system needed to handle real situations: first-time customers, repeat customers, affiliate codes, referral links, partner groups, team bonuses, manual payments, uploaded receipts, manual orders, order tracking, commission adjustments, and role-based access. This project shows that I can think through messy operational workflows and turn them into clearer, more manageable system behavior.

Need something built for how your business actually works?

Whether it's a Shopify storefront, a custom workflow, or a system that handles the messy parts — let's talk about what you need.