Supplier Back-Office - B2B Self-Service Portal
Multilingual SPA enabling European promotional product suppliers to manage their entire presence across the European Sourcing platform ecosystem - dashboard, profile, products, statistics, and commercial campaigns across 5 languages.
Lines of Code
18,711
CoffeeScript, SCSS, HTML
Source Files
185
Application files (excl. dependencies)
AngularJS Controllers
18
Controllers, directives, services, filters
Supported Languages
5
FR, EN, DE, ES, IT
API Endpoints
~35
Custom Directives
14
Presentation
Project definition and scope
supplierbo.europeansourcing.com (Supplier Back-Office) is a single-page application (SPA) serving as the supplier self-service portal for the European Sourcing platform. It provides a private, multilingual workspace where suppliers of promotional and advertising products can manage their entire presence across all European Sourcing Group websites (europeansourcing.com, tendanceobjet.com, etc.).
The application is part of a broader ecosystem of 15+ interconnected applications built by Medialeads, the technology company behind European Sourcing. The promotional product market is a specialized B2B sector where suppliers offer customizable items (pens, bags, textiles, gadgets) with various branding options (screen printing, engraving, embroidery) to resellers (advertising agencies, distributors).
Before this portal, suppliers had to rely on manual interventions from the European Sourcing team to update their profiles, products, and content. The Supplier BO gave them full autonomy over their commercial presence, directly impacting their visibility and sales performance on the platform.
B2B promotional & advertising products - sourcing, distribution, European marketplace
Sales managers, marketing managers, and product managers at promotional product suppliers across Europe (France, UK, Germany, Spain, Italy)
| Category | Technology | Role |
|---|---|---|
| Front-end Language | CoffeeScript | Primary front-end language, compiled to JavaScript |
| Framework | AngularJS ~1.2.0 | SPA framework (Single Page Application) |
| HTTP Client | Restangular ~1.4.0 | REST API communication |
| Server | Express.js ~3.4.7 | Static file server (production) |
| Build Tool | Grunt ~0.4.4 | Compilation, minification, watch |
| CSS | SCSS (Sass) + Compass | CSS preprocessor |
| CSS Framework | Bootstrap 3 (Sass) | Responsive CSS framework |
| Charts | Flot.js ~0.8.2 | Interactive statistics charts |
| Auth | WSSE (opensoft-wsse) | API request security |
| i18n | gettext (PHP) + JSON | 5-language translation system |
| Translation | Bing Translate API | Automatic content translation |
| Icons | Font Awesome ~4.0.3 | Icon library |
| Dates | Moment.js ~2.8.1 | Date manipulation and formatting |
| Upload | angular-upload ~1.0.10 | File and image uploads |
Objectives, Context, Stakes & Risks
Strategic vision and operational constraints
- Give suppliers full autonomy to manage 100% of their profile, products, news, and statistics without European Sourcing team intervention
- Deliver a complete multilingual interface in 5 European languages (FR, EN, DE, ES, IT) with automatic translation via Bing Translate
- Provide actionable analytics giving suppliers visibility on consultation statistics (visits, clicks, trends) across multiple platforms
- Support commercial campaign management including ES+ promotional products, advertisements, and featured placements
The Supplier BO is integrated into a complex existing ecosystem: the central REST API (api.europeansourcing.com built with Symfony/Propel), the public marketplace site, the extranet v2, the search engine, the translation platform, data feed services, export tools, and a mobile application.
The project is hosted under the medialeads GitHub organization (the technology company behind European Sourcing). Infrastructure runs on dedicated OVH servers (Kimsufi) with the application deployed to /var/www/es_suppliers/. The front-end is fully decoupled from the back-end, communicating exclusively via REST calls with WSSE authentication.
- Direct revenue impact - commercial options (ES+, Idea of the Week, Emailing, Leader Keyword) are paid offers. The Supplier BO is how suppliers activate and manage their commercial investment
- Supplier satisfaction - the quality of this tool directly impacts the commercial relationship with paying B2B clients
- European scalability - 5-language support with adapted date formats demonstrates continent-wide market ambition
- Network reach - 60+ reseller websites fed by supplier content managed through this portal
Security - WSSE + MD5
Client-side MD5 password hashing is cryptographically weak. WSSE authentication, while functional, lacks modern security standards like JWT or OAuth2
Technical Debt - AngularJS 1.2
AngularJS 1.2 (~2013) reached end-of-life in 2021. All dependencies (Bower, Express 3.x, jQuery 1.11) date from 2013-2014, creating maintenance risk
API Dependency
All business logic lives in the central API. The Supplier BO is fully dependent on the availability and correct functioning of api.europeansourcing.com
Zero Test Coverage
No test files identified (0 spec/test). For an application of this size with client-side business logic (validation, pricing, attributes), this represents significant regression risk
Implementation Phases
Concrete actions and personal contributions
- Designed and built the complete SPA architecture from scratch with AngularJS 1.2 and CoffeeScript
- Created 18 controllers organized by functional domain (Contact, Profile, Product, Statistics, News, Contract)
- Built 14 reusable custom directives forming a mini UI framework (minigeekDatatable, minigeekFlotChart, minigeekI18n, minigeekForm, minigeekDownload)
- Implemented WSSE authentication with multi-supplier contact management and cross-site SSO via RC4 encryption
- Engineered the hybrid i18n system: JSON labels generated by PHP/gettext for UI + multilingual API fields indexed by id_language
- Developed the complete SCSS theme with 97 style files based on Bootstrap 3
- Built the statistics module with 3 data sources (European Sourcing, TendanceObjet, Products ES+) with filterable Flot.js charts
- Implemented the ES+ product management module: CRUD with docs, tiered pricing, dynamic attributes, variants, bulk copy, YouTube videos
- Created the advertisement and media management sections (banners, photos, YouTube/Dailymotion/Vimeo integration)
- Migrated the entire codebase from SVN to Git (January 18, 2016)
- Refined statistics date range handling (min/max dates) and integrated the new translation interface
- Maintained stable production deployment via dedicated OVH servers with Express.js serving static files
- Application actively used by European suppliers until at least August 2019 (documented via screenshots)
- Branch-based deployment workflow: development branches merged to master, deployed via prod branch
Actors & Interactions
Team composition and collaboration dynamics
Analysis of the git history (28 commits total, all branches) reveals two contributors:
Jose DA COSTA (branches jose and master): author of 99.1% of the code (19,007 lines added out of 19,172 total). He performed the initial SVN import on January 18, 2016, which included the complete application codebase. This confirms that the entire application (architecture, modules, custom directives, i18n, styles) was developed by Jose before the Git migration. His subsequent commits focus on statistics module improvements.
Thomas C. (branch fancyweb): 21 commits representing 0.9% of the code (165 lines added). His contributions cover functional enhancements and bug fixes after initial deployment: translation interface changes, email recipient fixes, product selection features, and news management corrections.
- API Team (Symfony/Propel) - backend providing all business data
- Bing Translate API - external automatic translation service
- Suppliers (e.g., Plastoria S.A.) - end users managing their B2B presence
- Resellers - indirect beneficiaries (supplier content displayed on their sites)
Version control transitioned from SVN (~2013) to Git with GitHub in January 2016. The deployment workflow used branch-based progression: development branches merged into master, then deployed via the prod branch. The Medialeads team used a dedicated DokuWiki for shared technical documentation.
Results
Measurable impact for personal growth and business value
- Mastered SPA architecture patterns with AngularJS before the widespread adoption of component-based frameworks
- Built a complete reusable directive library (minigeek*) that served as a personal UI framework across projects
- Gained deep experience in complex B2B domain modeling: multi-language product catalogs, tiered pricing, variant management
- Developed skills in REST API integration patterns with WSSE security, handling 35+ endpoints
- Sharpened internationalization expertise with a hybrid system covering 5 European languages
- 100% supplier autonomy - complete self-service for profile, products, news, and statistics management
- 5 European markets covered - full i18n with FR, EN, DE, ES, IT support and localized date formats
- 60+ reseller websites fed by supplier content managed through this portal
- Direct revenue tool - commercial options (ES+, Idea of the Week, Emailing, Leader Keyword) managed through the BO
- ~5-6 years of stable production usage (~2014 to 2019) proving the durability of architectural choices
- 9 functional modules delivered: authentication, dashboard, contract, profile (7 sub-sections), products ES+, news, statistics (3 sources), i18n, media management
Project Aftermath
Life cycle beyond initial delivery
After deployment, the Supplier BO became the daily operational tool for all European Sourcing suppliers. Screenshots from August 2019 show a mature, fully functional application with active commercial contracts and real supplier data (contract options, publication dates, product listings). The tool was actively used for at least 5 years after initial deployment.
The application continued receiving enhancements through 2016 (product selection features, translation interface updates, news management improvements) before entering a stable maintenance phase. The branch-based deployment (master/prod) allowed controlled releases.
The application is archived in the "EUROPEAN SOURCING 2019" backup. The complete source code, database dumps, and 25+ detailed screenshots are preserved on the NAS. The codebase demonstrates that while the front-end technology (AngularJS 1.2) became obsolete, the decoupled REST API architecture remained reusable - proving that the front/back separation was the right architectural choice.
Critical Review
Honest retrospective and lessons learned
- Decoupled SPA architecture - clean separation between front-end and REST API allows independent evolution. The front-end makes no assumptions about backend technology
- Reusable directive framework - the minigeek* directives (DataTable, FlotChart, i18n, Form, Download) form a coherent mini UI framework that accelerated development significantly
- Polished internationalization - 5 languages with automatic translation, locale-adapted date formats, and browser language detection show genuine care for the European user experience
- Professional interface - screenshots from 2019 reveal a clean, modern (for its era) interface with clear navigation and consistent design across all modules
- Complex product management - the ES+ module handles products with variants, dynamic attributes, tiered pricing, and docs - significant functional complexity well-managed on the front-end side
- Zero test coverage - no spec/test files identified. For an application of this size with client-side business logic (validation, pricing calculations, attribute management), this is a significant risk
- MD5 password hashing - cryptographically weak and unsuitable for password hashing. bcrypt or argon2 would have been appropriate
- Outdated dependency versions - AngularJS 1.2 (2013), Express 3.x (2013), jQuery 1.11 (2014), Bower (deprecated since 2017). The entire stack was already obsolete by the time of the last screenshots
- Login code duplication - authentication pattern for multi-supplier selection is repeated identically in LoginCtrl and RedirectCtrl instead of being extracted to a shared service
- Direct DOM manipulation - some directives use jQuery DOM manipulation ($("body").append(...), $elem.find(...)) instead of AngularJS mechanisms, complicating testing and maintenance
- Add unit tests (Karma/Jasmine) for controllers and E2E tests (Protractor) for critical user flows from the start
- Plan a migration to Angular 2+ or React/Vue.js around 2017-2018 to extend the application lifespan
- Extract the minigeek* directive library into a versioned npm package shared across the European Sourcing ecosystem
- Replace WSSE+MD5 with JWT or OAuth2 and server-side bcrypt hashing
- Implement a shared authentication service to eliminate the login logic duplication between controllers
- Front/back decoupling pays off long-term - even with an obsolete front-end stack, the REST API remained reusable for a new front-end without modification
- Reusable components are an investment - the minigeek* framework probably accelerated development of every section considerably
- i18n must be designed from day one - the native integration of 5 languages into the architecture (filters, directives, localization service) makes i18n transparent for the developer
- Documentation and tests are insurance policies - the absence of tests and documentation (nearly empty README) makes project archaeology significantly harder years later
Related journey
Professional experience linked to this achievement
Skills applied
Technical and soft skills applied
Image gallery
Project screenshots and visuals