A live digital-products store for a Tunisian client, with a bilingual catalog, game and gift-card collections, a multi-item basket, manual-payment checkout, and an owner-managed admin workspace.
My role
Product designer & full-stack engineer
Scope
Live client website · Storefront, admin & deployment
I designed, built, and deployed Sobly from the customer-facing storefront to the tools used by the shop owner. French and English shoppers can browse games, subscriptions, game-credit packs, and gift-card amounts, then combine products into one order. The admin manages products, images, prices, collections, payment recipients, and order verification. I also prepared the Ubuntu VPS deployment with Docker Compose, Caddy-managed HTTPS, persistent SQLite storage, backups, and a GitHub-based update workflow so the client can maintain the business as the product evolves.
Client digital-commerce project in Tunisia02 /Product experience
What the product does.
01Customer Experience4 capabilities
Bilingual Discovery
Search, category navigation, platform filters, favorites, and product details across French and English storefronts.
Game & Brand Collections
Choose a game or gift-card brand first, then compare its amounts, prices, and product images.
One Basket, One Order
Persistent quantities and platform selections combine several products into one server-validated checkout total.
Local Payment Workflow
D17 is presented first; IZI Payment and Wafacash are configurable. The customer submits a transfer reference for manual verification.
02Owner Workspace3 capabilities
Catalog & Image Management
The owner edits prices, availability, featured offers, game groups, gift-card brands, and artwork without changing code.
Payment Recipients
Enable or disable recipients, choose a destination manually, or rotate enabled destinations automatically between new orders.
Verification & Fulfilment
An order queue records customer details, products, total, assigned recipient, and transfer reference for the owner to review and deliver.
03Production Operations1 capabilities
Deployed & Maintainable
HTTPS, persistent data volumes, backups, container health checks, and a GitHub update script support ongoing client improvements.
03 /System design
How the pieces connect.
System workflow
From a GitHub change to a live client store
The client VPS runs the storefront and admin behind Caddy. Application releases can change while catalog data, images, orders, and certificate storage remain in persistent volumes.
Release & hosting
Version the change
GitHub repositoryReviewed source and a dependency lockfile
Run the VPS update script
Build & run
Ubuntu + Docker ComposePull, backup, build, and check container health
Serve through HTTPS
Public website
Caddy → Next.jssobly.tn with managed TLS certificates
Read and write
Keep business data
Persistent Docker volumeSQLite database and uploaded artwork; backup scripts
Customer & owner
Browse & select
ShopperGame or brand → amount → basket
Create one order
Prepare payment
Validated checkoutStored prices, exact total, and assigned recipient
Submit transfer reference
Review & deliver
Owner adminManual transfer verification and fulfilment
Track the order
Customer follow-up
Private tracking linkOrder status without exposing the admin workspace
01A Complete Client Product
The same catalog powers the bilingual storefront, grouped product pages, basket, and owner workspace. Server-side validation uses current stored prices before an order is accepted; the order keeps an immutable product and payment snapshot.
Storefront
Fast product browsing, search, filters, brand and game navigation, and a persistent basket.
Admin
Protected catalog, image, shop, payment, and order management.
Data
SQLite migrations preserve owner edits as product features evolve.
02Deployed on the Client’s VPS
A multi-stage Docker build produces the standalone Next.js application. Docker Compose runs it on an Ubuntu OVH VPS alongside Caddy, which serves the public domain over HTTPS and redirects the www address to the canonical domain.
HTTPS
Caddy handles certificates and proxies requests to the application container.
Persistence
Named volumes retain the database, uploaded media, and Caddy state when containers are recreated.
Maintenance
Health checks, restart policies, and data backup scripts are included in the deployment.
03A Repeatable GitHub Update Workflow
The project moved from ZIP-based delivery to a Git checkout on the VPS. A repository-scoped, read-only SSH deploy key lets the update script fetch releases; the script checks for local changes, backs up data, rebuilds the image, and starts the updated services. Deployment is deliberately initiated on the VPS after a GitHub push.
04 /In action
A closer look at the build.
Actual project screens and documented visuals. Open any image for the full view.
Flattened currency and gift-card offers became difficult to browse. Grouping offers by game or brand gives customers a clear first choice while preserving each pack’s price, image, and admin editability.
02
Reliable Manual Payments
A submitted reference is a request for verification, not proof of payment. Durable order snapshots, transactional recipient rotation, and idempotent request handling preserve the assigned destination across retries and refreshes.
03
Updating Code Without Losing Shop Data
Application code, environment secrets, and business data have separate lifecycles. GitHub carries source changes; the VPS keeps its environment configuration and persistent volumes, with backups before updates.
06 /The toolkit
Each tool has a job.
Open a technology to see its role in this project.
Storefront & Admin
Next.js 16 + React 19 +
Bilingual storefront, customer checkout, and protected admin routes
TypeScript + Zod +
Shared catalog contracts and validated server inputs
Responsive CSS +
Burgundy and cream identity across desktop and mobile
Sharp +
Owner-uploaded product images converted to WebP
Commerce & Persistence
SQLite +
Durable catalog, settings, payment configuration, and order snapshots
Integer millimes +
Precise Tunisian-dinar basket totals
Atomic transactions +
Consistent payment-recipient rotation and duplicate-request handling
Node test runner +
Catalog, basket, migrations, payment rules, and deployment checks
Production Delivery
OVH Ubuntu VPS +
Self-hosted production environment for the client
Docker Compose +
Standalone Node application and reverse proxy with restart policies
Caddy +
HTTPS certificates, canonical-domain redirects, and reverse proxy
GitHub + SSH deploy key +
Versioned releases pulled by a guarded VPS update script
07 /Delivery notes
The documented scope.
A Live Client Website
Sobly is deployed at sobly.tn over HTTPS on an Ubuntu VPS, with the application and reverse proxy managed through Docker Compose.
Owner-Controlled Operations
Products, images, groups, shop settings, payment recipients, and order verification can be managed from one admin workspace.
Maintainable Delivery
Versioned GitHub updates, persistent storage, and backup tooling support continued improvements after the initial client handoff.
Explore further
Want to go deeper?
Explore the available resources or talk with me about the design and engineering behind this project.
