Visimags

Multi-tenant field sales management platform for FMCG companies — plan store visits, run merchandising tours, capture photo reports, and track shipments from a single dashboard.

Live Product · API

Overview

Visimags helps fast-moving consumer goods (FMCG) companies — and the distributors, sales managers and merchandising teams that serve them — plan and control field operations. It replaces spreadsheets and phone-based reporting with a structured workflow: plan a route (tournée), visit the store, record the shelf state with photos, log articles/stock and shipments, and escalate issues as alerts.

It is a multi-tenant SaaS: each company gets its own isolated tenant (e.g. sem-production), its own users, stores, products and reports. Access is role-based with three roles — Admin, Supervisor, Commercial — and a dedicated mobile-first visit execution flow.

Problem

Field sales teams in emerging markets run on paper reports and WhatsApp photo exchanges. Managers can't reliably know, day to day:

• which stores were actually visited;
• what the shelf state was (stock-outs, empty shelves, broken displays);
• whether shipped products reached the right stores;
• which issues need escalation and follow-up.

Visimags converts ad-hoc field reporting into structured, reviewable data — with photographic evidence per visit — so commercial directors and category managers can act on real coverage and compliance.

Product

Main workflows:

• Dashboard — coverage, visits completed, active alerts, tour calendar.
• Tours (tournées) — plan routes per day; assign a commercial; execute store-by-store.
• Visit execution — check in at a store, answer the visit checklist, take and attach photos, log feedback.
• Stores & chains — store directory with type, chain, city and stock threshold.
• Products & articles — product catalog with EAN, category and low-stock thresholds.
• Shipments & deliveries — track product shipments to stores and their delivery status.
• Alerts — automatic low-stock alerts, resolved and tracked over time.
• Reports — per-visit photo reports with history and gallery view.
• Notifications — email notifications for key events.
• Analytics — coverage and activity metrics.
• Users & settings — role management, tenant settings.

My Role

End-to-end product engineering: product thinking and workflow design, full frontend implementation (React SPA, design system, mobile-first visit flow), backend implementation (Django REST API, multi-tenant data model, JWT auth), and production deployment (cPanel / LWS + Phusion Passenger) including tenant data migration tooling.

Architecture

React SPA (app.visimags.com)
        │  HTTPS / JSON
        ▼
Django REST Framework API (api.visimags.com)
   ├── Multi-tenant middleware + scoped models
   ├── JWT auth (access + rotating refresh cookie)
   ├── Celery (filesystem broker fallback)
   └── MySQL database

See docs/ARCHITECTURE.md for details.

Tech Stack

Frontend

• React 19 + TypeScript
• Vite 7 build tooling
• MUI 9 + Tailwind CSS + shadcn/ui components
• React Router 7, Zustand (state), Axios (HTTP)
• Recharts (analytics), date-fns
• Photo lightbox + gallery for visit reports

Backend

• Django 5 + Django REST Framework
• SimpleJWT auth (short-lived access token + rotating refresh token in secure cookie)
• Multi-tenant scoping middleware and models
• Celery for notifications (filesystem broker fallback for shared hosting)
• AES field encryption (cryptography)
• MySQL via PyMySQL; django-environ for configuration

Data

• MySQL (production), multi-tenant by company with tenant-scoped queries
• seed_data management command for demo tenants (fictional Danone / Nestlé sample data)

Infrastructure / Integrations

• LWS cPanel + Python App + Phusion Passenger
• Static frontend on app.visimags.com, Django API on api.visimags.com
• SMTP email notifications (mail.visimags.com)
• Tenant export/import tooling for data migrations (scripts/)

Key Features

• Multi-tenant isolation per company
• Role-based access (Admin / Supervisor / Commercial)
• Photo-backed visit reporting
• Tour planning with daily calendar
• Low-stock alerting pipeline
• Shipment → delivery tracking
• Notifications on key events
• Offline-tolerant, PWA-style service worker
• French-first UI (fr-fr, Africa/Douala timezone)

Engineering Challenges

• Multi-tenancy on shared hosting: tenant resolution via middleware/subdomain without a heavyweight SaaS stack, with a filesystem-based Celery fallback so background jobs run where Redis is unavailable.
• Persistent auth across hosts: app and API on separate subdomains, using rotating refresh tokens in httpOnly cookies with CSRF-safe cookie settings — verified against the real production pair (see docs/).
• Field data with photos: efficient media handling and per-visit photo reports in a constrained mobile-first flow.
• Tenant data migration: export/import bundle tooling (export_tenant_bundle / import_tenant_bundle) that moved a live production tenant into the new stack.

Screenshots

Available on request — or explore the live product at https://app.visimags.com.

Local Development

Requirements

• Node.js 20+
• Python 3.12+
• MySQL 8 (or SQLite for a quick start)

Installation

# Backend
cd backend
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
cp .env.example .env          # configure DATABASE_URL
python manage.py migrate
python manage.py seed_data    # optional demo tenants (Danone / Nestlé)

# Frontend
cd ../frontend
npm install
cp .env.production.example .env.production
npm run dev

Environment Variables

Copy .env.example → .env (backend) and .env.production.example → .env.production (frontend), then set local values. See docs/DEPLOYMENT.md for the full production variable reference.

Testing

cd backend && venv/bin/python manage.py test core.tests

cd frontend && npm run build && npm run lint

Deployment

Static frontend (Vite build) is published at the web root of app.visimags.com; the Django API runs as a Python app behind Phusion Passenger and is served on api.visimags.com. Production secrets live in environment variables on the server only — never in Git. See docs/DEPLOYMENT.md.

Security

• Production secrets (Django SECRET_KEY, database URL, SMTP credentials, encryption key) are managed through environment variables and are not committed to Git.
• Access tokens are short-lived; refresh tokens rotate and are stored in httpOnly, Secure cookies.
• See SECURITY.md for details.

Status

Production — live since 2026 at https://app.visimags.com with an active tenant.

Author

Songnia Wilfried Tresor — Product Engineer / Full-Stack Developer

• GitHub: https://github.com/Songnia
• Org: https://github.com/wscale2026