Portfolio / Anata Store
Identité visuelle · E-commerce Django + Next.js · Mobile-first · Mise en production

Anata Store : identité visuelle créée en bonus, e-commerce mobile-first complet pour smartphones et accessoires premium en Côte d'Ivoire

Logo Anata Store conçu en bonus par Tech & Web — boutique e-commerce smartphones premium Abidjan
Logo Anata Store — création offerte par Tech & Web (le client ne disposait d'aucun logo avant la mission).

Tech & Web a conçu, développé et mis en production de bout en bout Anata Store (anatastore.ci), une plateforme e-commerce dédiée à la vente de smartphones, tablettes, montres connectées, écouteurs et ordinateurs au Marché Samsung de Treichville, à Abidjan. La mission a démarré par la création offerte du logo Anata Store (le client ne disposait d'aucune identité visuelle), puis a couvert l'architecture full-stack Django + Next.js 15, la conception d'un parcours d'achat Cash On Delivery (COD) mobile-first sans création de compte, l'optimisation visuelle (image proxy AVIF / WebP, sticky add-to-cart sur fiche produit, deep-link WhatsApp depuis le panier), le SEO technique structuré (JSON-LD Organization + WebSite + LocalBusiness Store), puis la mise en orbite production complète : DNS Netim, VPS Linux Debian chez LWS, Apache reverse proxy, HTTPS Let's Encrypt auto-renouvelé, services systemd dédiés, hardening (SSH par clé, fail2ban, ufw) et backups quotidiens automatisés.

  • MissionConcevoir, développer et déployer un e-commerce premium full-stack pour la vente de produits téléphoniques, gadgets et accessoires, avec une expérience d'achat COD optimisée mobile et un référencement SEO solide.
  • Livrables clésSite live HTTPS sur anatastore.ci, 100 produits actifs catalogués, parcours achat COD complet, sticky CTA mobile et deep-link WhatsApp panier, comparateur 2-4 produits, back-office /seller protégé JWT + RBAC, JSON-LD multi-entités, déploiement VPS reproductible, DEPLOYMENT.md + DEPLOY_NOTES.md, tag git v1.0-mvp.
  • ScopeDjango 5 · Django REST Framework · Next.js 15 App Router · TypeScript · sharp (AVIF/WebP) · Apache 2.4 reverse proxy · gunicorn · systemd · Let's Encrypt · certbot --apache · ufw · fail2ban · SSH par clé · cron backups · Schema.org JSON-LD · Mobile-first · Cash On Delivery
Visiter anatastore.ci Explorer notre expertise sites & e-commerce
Logo Anata Store conçu en bonus par Tech & Web — boutique e-commerce smartphones premium Abidjan
Logo Anata Store — création offerte par Tech & Web. Le client ne disposait d'aucune identité visuelle avant la mission.
100 produits actifs catalogués (60 smartphones, 12 tablettes, 10 montres, 10 ordinateurs, 8 écouteurs)
22 routes Next.js prébuiltes en production avec rendu AVIF/WebP via sharp
HTTPS auto certificat Let's Encrypt auto-renouvelé, redirect 301 HTTP→HTTPS, HSTS 1 an actif

Défis identifiés

  • Lancer en délai très court un e-commerce premium capable de présenter clairement un catalogue de produits téléphoniques, gadgets et accessoires sur le marché ivoirien.
  • Adapter le parcours d'achat à la réalité COD du marché (paiement à la livraison) sans imposer de création de compte client, ni demander de moyen de paiement en ligne.
  • Concevoir une expérience mobile-first pour des utilisateurs majoritairement sur réseau 3G/4G, avec un poids visuel maîtrisé sans sacrifier la qualité d'image produit.
  • Mettre en orbite le site en production publique HTTPS sur un domaine .ci avec un VPS dédié, en coexistence avec une stack ISPConfig préinstallée par l'hébergeur LWS.
  • Garantir un référencement SEO solide dès le démarrage : meta tags, JSON-LD Schema.org, attribution de paternité Tech & Web, sitemap, robots.

Solution Tech & Web

  • Architecture full-stack Django + Next.js 15 : backend REST en Python avec gunicorn, frontend Next.js App Router en TypeScript avec sharp pour le rendu AVIF/WebP, base SQLite pour le MVP avec migration PostgreSQL préparée.
  • Parcours d'achat COD sans friction : pas de compte client, panier persistant via session, deep-link WhatsApp pré-rempli depuis le panier (liste articles + total), confirmation de commande COD-friendly avec étapes de livraison.
  • Mobile-first et performance : sticky add-to-cart en bas de fiche produit, image proxy AVIF/WebP servi par sharp, lazy-loading des sections sous le fold, comparateur de produits 2 à 4 références.
  • Mise en production complète : DNS Netim avec A records, VPS Debian LWS bootstrappé, Apache reverse proxy en coexistence avec ISPConfig, services systemd dédiés pour gunicorn et next start, HTTPS Let's Encrypt auto-renouvelé toutes les 60 jours.
  • SEO technique structuré : JSON-LD Organization + WebSite + LocalBusiness Store avec @id stables, attribution de paternité Tech & Web (creator/publisher), meta author + designer + generator + copyright, sitemap, hreflang.
  • Hardening & opérationnel : SSH par clé uniquement, fail2ban actif, ufw avec règles précises (préserve le mail et l'admin LWS), backups BD quotidiens à 02:30 avec rotation 14 jours, garde-fou catalogue (commande check_media_quality).

Résultats obtenus

  • Site live publiquement sur https://anatastore.ci avec un certificat valide et un redirect 301 HTTP→HTTPS, HSTS 1 an actif.
  • Parcours d'achat COD complet validé de bout en bout : ajout au panier, sélection de la zone de livraison, validation, page de confirmation avec référence commande.
  • Expérience mobile premium : sticky CTA en bas de fiche produit, deep-link WhatsApp panier, vignettes produit AVIF servis sous 10 KB.
  • Catalogue de 100 produits actifs avec photos haute résolution, 0 visuel blacklisté, 0 image flou (script de promotion automatique de la photo principale en plus haute résolution).
  • Back-office /seller protégé par JWT + RBAC opérationnel pour la gestion des produits, des stocks et des commandes par l'équipe Anata.
  • SEO indexable dès le jour J : 4 blocs JSON-LD reliés par @id, attribution Tech & Web visible et structurée pour Google et les moteurs IA.
Bonus mission · Identité visuelle créée par Tech & Web

Le logo Anata Store : une création offerte par Tech & Web

Au démarrage de la mission, le client ne disposait d'aucun logo ni charte visuelle. Pour qu'Anata Store puisse se présenter avec une vraie présence de marque dès la mise en ligne, Tech & Web a conçu et offert l'identité visuelle complète en plus du périmètre initial : il fallait une signature graphique cohérente sur le site, le favicon de l'onglet, l'icône PWA mobile, les supports WhatsApp et toute communication future.

  • Conception graphique du logo avec palette adaptée à la cible CI (premium, accessible, lisible en très petit format).
  • Trois déclinaisons techniques livrées : PNG opaque pour fond clair (header site, factures), PNG à fond transparent pour fond sombre (footer, supports marketing), favicon ICO + JPG pour onglet navigateur.
  • Icônes PWA 192×192 et 512×512 intégrées au manifeste pour l'installation mobile (icône d'application home screen).
  • Apple touch icon 180×180 pour iOS Safari et l'ajout à l'écran d'accueil iPhone / iPad.
  • Crédit visible dans le footer du site et dans le code source via meta tags et JSON-LD creator / publisher reliant Anata Store à Tech & Web pour l'attribution moteurs et IA.

Pourquoi en bonus ? Une boutique en ligne sans identité visuelle perd immédiatement sa crédibilité. Plutôt que de livrer un site sans logo ou avec un placeholder, Tech & Web a choisi d'inclure cette création dans la mission — c'est notre standard pour les marques qui démarrent et veulent partir avec une image cohérente.

Parcours de transformation

Sept étapes pour passer d'une marque sans identité visuelle à un e-commerce public, performant et indexé.

00

Création de l'identité visuelle Bonus

Le client ne disposait d'aucun logo. Tech & Web a conçu et offert l'identité Anata Store : logo principal (PNG opaque), version transparente pour fond sombre, favicon onglet (ICO + JPG), icônes PWA 192/512 et apple-touch-icon 180. La marque arrive en ligne avec une signature graphique cohérente dès le jour J.

01

Cadrage produit MVP

Définition du périmètre Top 100 produits (60 smartphones, 12 tablettes, 10 montres connectées, 10 ordinateurs, 8 écouteurs) et des contraintes V1 non négociables : Cash On Delivery uniquement, mobile-first, pas de wishlist, pas de création de compte client, langue française CI, devise XOF.

02

Architecture full-stack

Backend Django 5 + Django REST Framework, frontend Next.js 15 App Router en TypeScript, base SQLite pour le MVP avec chemin de migration PostgreSQL préparé, JWT + RBAC pour le back-office vendeur, contrat OpenAPI versionné.

03

Catalogue & pipeline médias

Import des 100 fiches produits, garde-fou qualité (commande Django check_media_quality avec exit code), promotion automatique de la photo principale en plus haute résolution (commande promote_largest_media), image proxy AVIF/WebP via sharp.

04

UX achat sans friction

Sticky add-to-cart mobile sur fiche produit avec respect du safe-area iOS, deep-link WhatsApp depuis le panier avec liste articles + total pré-remplis, comparateur jusqu'à 4 références, page de confirmation COD-friendly avec étapes de livraison.

05

Mise en production VPS

Configuration DNS Netim (A records apex + www), bootstrap VPS Debian 13 chez LWS, installation runtime (Python 3.13, Node 20, sharp, Apache 2.4, certbot), vhost Apache reverse proxy en coexistence avec ISPConfig, services systemd dédiés pour gunicorn et next start, HTTPS Let's Encrypt auto-renouvelé.

06

Hardening & livraison

SSH par clé uniquement, désactivation de l'authentification par mot de passe, fail2ban sur sshd, ufw avec règles précises (préserve mail/DNS/ISPConfig), backups BD quotidiens à 02:30 avec rotation 14 jours, tag git v1.0-mvp, documentation reproductible DEPLOYMENT.md et DEPLOY_NOTES.md.

Stack technique

  • Django 5.2 + Django REST Framework servi par gunicorn, JWT + RBAC pour le back-office vendeur.
  • Next.js 15 App Router en TypeScript, rendu serveur avec hydratation client, sharp pour AVIF/WebP.
  • Apache 2.4 reverse proxy avec mods proxy_http, ssl, headers, http2, deflate.
  • HTTPS Let's Encrypt via certbot --apache, redirect 301, HSTS 1 an, auto-renew 2x/jour.
  • Systemd avec deux unités dédiées : anata-django.service (gunicorn 3 workers) et anata-next.service (next start).
  • SQLite en MVP, chemin PostgreSQL préparé pour la montée en charge.

Livrables clés

  • Site public live sur https://anatastore.ci avec www en alias et redirect 301.
  • Catalogue de 100 produits actifs avec photos haute résolution servies en AVIF/WebP.
  • Parcours d'achat COD validé bout en bout, sticky CTA mobile et deep-link WhatsApp panier.
  • Comparateur de produits 2 à 4 références avec stockage local persistant.
  • Back-office /seller protégé par JWT + RBAC pour gestion produits, stocks et commandes.
  • Documentation reproductible : DEPLOYMENT.md + DEPLOY_NOTES.md + tag git v1.0-mvp.

Valeur business

  • Mise en orbite rapide : du cadrage produit à un e-commerce HTTPS public livré dans les délais courts demandés par le client.
  • Conversion COD optimisée : zéro friction d'inscription, deep-link WhatsApp pour finir par chat, parcours mobile-first.
  • Visibilité moteurs & IA : 4 blocs JSON-LD Schema.org reliés par @id, attribution Tech & Web indexée pour Google et les moteurs LLM.
  • Autonomie back-office : l'équipe Anata gère ses produits, stocks et commandes sans dépendance technique récurrente.
  • Sécurité & reproductibilité : SSH par clé, fail2ban, ufw, backups auto, documentation versionnée — le site se restaure ou se redéploie sans perte.
Je n'avais même pas de logo en démarrant la mission. Tech & Web a créé l'identité Anata Store en bonus, puis livré un site rapide sur mobile, simple à utiliser pour mes clients et solide en back-office. Le parcours COD fonctionne sans qu'on ait à demander un mot de passe à personne, et je peux finaliser une commande directement sur WhatsApp. Aujourd'hui anatastore.ci tourne tout seul, avec HTTPS, des sauvegardes et un design qui inspire confiance.
Logo Anata Store conçu par Tech & Web — e-commerce smartphones premium à Abidjan

Identité visuelle & e-commerce premium full-stack

Logo Anata Store (bonus) · Django · Next.js 15 · Apache · Let's Encrypt · AVIF · livré pour Anata Store, Treichville, Abidjan

Vous voulez lancer un e-commerce mobile-first pour votre commerce ?

Nous concevons, développons et mettons en production des sites e-commerce performants en Côte d'Ivoire, du cadrage MVP au déploiement HTTPS public sur VPS dédié — exactement comme nous l'avons fait pour Anata Store.

Planifier un Strategic Portfolio Call Voir le site réalisé contact@tech-and-web.com

Leviers Tech & Web mobilisés

Les expertises mobilisées pour transformer Anata Store en e-commerce public, performant, indexé et facile à exploiter au quotidien.

Sites web & e-commerce — Django Next.js par Tech and Web

Sites web & e-commerce

Conception et développement full-stack Django + Next.js, parcours d'achat COD/Mobile Money/Carte, AVIF/WebP, JSON-LD SEO.

Accélérer
Design graphique & identité — création de logo Anata Store

Design graphique & identité

Création de logo, déclinaisons techniques (PNG opaque, transparent, favicon, icônes PWA), palette et charte visuelle pour un démarrage de marque cohérent.

Imaginer
Logiciels métiers — back-office vendeur RBAC

Logiciels métiers & back-office

Back-office vendeur sécurisé JWT + RBAC, gestion catalogue, stocks et commandes, audit log, exports CSV/Excel.

Structurer
Cloud & infogérance — VPS Linux Apache Let's Encrypt

Cloud & infogérance

Mise en orbite production sur VPS Linux dédié, Apache reverse proxy, HTTPS Let's Encrypt auto-renouvelé, monitoring, backups.

Déployer
Sécurité informatique — SSH par clé fail2ban ufw

Sécurité informatique & SOC

Hardening serveur (SSH par clé, fail2ban, ufw), HSTS, audit log applicatif, rotation de secrets, recovery documenté.

Protéger

Lancer votre e-commerce comme Anata Store ?

Du cadrage produit à la mise en orbite HTTPS publique sur VPS dédié, nous livrons des sites e-commerce robustes pour les commerces en Côte d'Ivoire et en Afrique de l'Ouest.

Redéfinissons votre succès par la technologie