METHEM

SaaS pour musicien

Conception, design, intégration, mise en production et maintenance de mon SaaS au nom de metheM. Il s'agit d'une plateforme en ligne pour accompagner les artistes dans leur aventure: vente d'instrumentales sécurisée, processus de prospection, comptabilité, générations de licences... Un outil complet pour propulser sa carrière ! Je suis intervenu sur l'ensemble de la chaîne de création du site. Je suis très exigeant au niveau de mes processus de vente et souhaite quelque chose de très fluide et une UI/UX aux petits oignons.

Rôle

  • Graphiste
  • Lead dev fullstack
  • Architecte junior

Quand ?

2020 - 2024

Technologies

Icône de reactIcône de nextIcône de typescriptIcône de dockerIcône de gitIcône de mantineuiIcône de traefikIcône de strapiIcône de figma

Missions

  • Conception graphique & web design
  • Intégration web NextJS
  • Développement fullstack
  • Mise en place API + appels WebService
  • Création et maintenance de base de donnée
  • Architecture & optimisation de services
  • Système de paiement en ligne sécurisé avec Stripe et Paypal
  • Newsletter, automatisation de processus
  • Sécurité & audit
Séparateur de texte

Présentation générale

La vente d'instrumentales de rap en ligne est terriblement concurrentielle, aussi je voulais me démarquer en proposant ma propre plateforme de vente de prods en ligne. Je souhaitais offrir une expérience de navigation sobre et agréable, mêlant ma palette de couleurs à des composants facilement identifiables visuellement.

Hero banner du site de metheM

Hero banner du site de metheM

La présentation des prods et la possibilité de recherche pour l'utilisateur était cruciale, J'ai passé du temps sur les maquettes pour arriver à ce résultat, qui me semble satisfaisant.

Liste des instrumentales

Liste des instrumentales

L'utilisateur sait instinctivement ce qu'il peut faire et comment le faire. Il peut commander une licence d'exploitation pour l'instrumentale de son choix (les prix varient selon l'étendue des droits octroyés), et peut même faire une demande d'exclusivité au musicien en remplissant un petit formulaire qui apparaît en popup, et dont la soumission envoie un mail à l'artiste directement.

Liste des licences qu'il est possible d'acheter

Liste des licences qu'il est possible d'acheter

Formulaire de demande d'exclusivité

Formulaire de demande d'exclusivité

J'ai également développé une page spécifique par prod, dans le cas où l'artiste voudrait envoyer un lien direct vers une instrumentale. Cette page résume l'ensemble des informations qu'on souhaite présenter au client, et même une petite liste de prods susceptibles de plaire à l'utilisateur qui a déjà apprecié celle qu'il consulte !

Page spécifique d'une instrumentale

Page spécifique d'une instrumentale

Le backoffice

Durant ma phase de réflexion pour mon SaaS, j'ai décidé de concocter un backoffice permettant aux utilisateurs inscrits de gérer leur activité commerciale, et vous le verrez j'ai sorti les grands moyens.

Introduction

Page principale du backoffice - amateur d'histoire antique et de citations galvanisantes, je lui ai proposé de les afficher aléatoirement directement sur la page d'accueil 📚

Page principale du backoffice - amateur d'histoire antique et de citations galvanisantes, je lui ai proposé de les afficher aléatoirement directement sur la page d'accueil 📚

Avec le temps, je me suis rendu compte que j'avais besoin d'un ensemble de services en ligne pour optimiser mon offre commerciale et mieux gérer mon entreprise. Je vais vous présenter les différents outils que j'ai développés pour mon utilisation mais aussi celles de mes utilisateurs.

Ce backoffice, en vérité le cœur de l'activité entrepreunariale, est protégé par une connexion robuste gérée côté Strapi et cadenassée par cookies httpOnly.

Page de connexion du backoffice

Page de connexion du backoffice

Génération de licences à la volée

Page de génération de licences, simple d'utilisattion

Page de génération de licences, simple d'utilisattion

Lorsqu'un client achète une prod hors du processus en ligne, ou bien pour une autre situation équivalente, l'utilisateur a accès à un générateur de licences en PDF entièrement customisé. Ce générateur incorpore au document la date du jour, le nom du client et même la signature manuscrite de l'artiste !

Ajout de prods dans le store

Naguère, je devais ajouter manuellement chaque prod dans le store, ce qui me prenait un temps fou: je remplissais un fichier JSON à la main, puis le téléversais sur mon serveur via FTP avec les fichiers et les metadonnées associées. J'ai choisi d'implémenter un formulaire d'ajout de prod qui permet de gagner un temps précieux. L'artiste peut maintenant choisir la pochette de sa prod, récupérée à partir des images qu'il a déjà téléversées sur son serveur ou bien décider d'en envoyer une nouvelle. Tout est géré proprement côté Strapi.

Formulaire d'ajout de prod, en choisissant un nom, un style, une image et un fichier audio

Formulaire d'ajout de prod, en choisissant un nom, un style, une image et un fichier audio

Consultation des prods

La liste de toutes les prods, avec possibilité de les télécharger en mp3 ou wav

La liste de toutes les prods, avec possibilité de les télécharger en mp3 ou wav

Il peut arriver de vouloir vérifier si une prod a déjà été vendue, ou bien d'avoir besoin de la télécharger pour l'envoyer rapidement à un prospect. Cette page sert exactement à cela.

Placements en labels

Avec le temps, la clientèle principale d'un artiste peut se tourner vers les labels, qui n'ont pas la même éthique de travail que dans l'informatique. J'appelle cela un monde de requins, et d'aucuns aura besoin de savoir si une prod a déjà été placée dans un label; le cas échéant, à quel stade de la négociation elle se trouve.

Les placements en cours de metheM - on peut apercevoir JUL, numéro un français du rap, dans la liste

Les placements en cours de metheM - on peut apercevoir JUL, numéro un français du rap, dans la liste

Logs de serveur

Les logs serveurs - info et erreur. Au moment du screen, tout allait bien visiblement !

Les logs serveurs - info et erreur. Au moment du screen, tout allait bien visiblement !

Pour permettre aux utilisateurs de vérifier que tout va bien, tout simplement. Chacun apprécie son autonomie !

Documents comptables

Cette partie a été un vrai défi pour moi: générer des documents comptables professionnels esthétique et à valeur légale. J'ai développé un générateur de PDF dynamique avec une interface de personnalisation directement dans le backoffice: pour une facture par exemple, l'artiste peut ajouter chacune des prestations, leur prix, choisir le montant de la TVA, choisir un client... Cela a représenté un énorme développement pour moi, mais je suis très fier du résultat.

Page de création de documents comptables - ici une facture

Page de création de documents comptables - ici une facture

Laboratoire

Laboratoire du SaaS - grâce à lui, on peut convertir des fichiers, télécharger des mp3 depuis Youtube, ou tester son ordonnanceur

Laboratoire du SaaS - grâce à lui, on peut convertir des fichiers, télécharger des mp3 depuis Youtube, ou tester son ordonnanceur

Il s'agit d'une petite partie un peu à part du site, dans le sens où elle regroupe toutes les fonctionnalités que certains artistes m'ont soumises et que j'ai trouvées pertinentes, mais qui ne rentrent pas dans les catégories précédentes. Dans cette boîte à outils, sont regroupées des fonctionnalités de conversion de fichiers vers un autre format (par exemple mp3 vers wav, ou jpg vers png), téléchargement de mp3 depuis Youtube, ou encore de test d'ordonnanceur.

La prospection

Voilà la plus grosse partie de mon SaaS: un outil d'envoi de mails automatique hebdomadaire, qui permet à chaque artiste de contacter très régulièrement l'ensemble de ses prospects (qui se comptent souvent par centaines) pour leur proposer des exclusivités. Beaucoup de technologies ont été exploitées pour arriver à mes fins: Google SSO, Gmail API, ffmpeg (conversion de fichiers audio), react-mail, tracking-pixel et même un algorithme de découpage de pièces jointes pour contourner la limite de 25Mo de Gmail.

Le développement a été un véritable casse-tête pour moi, car il m'a fallu m'assurer que les mails s'envoyaient correctement, en anglais si le prospect à qui il est destiné est anglophone, et surtout à envoyer des prods en pièces jointes à chaque mail pour que le prospect puisse écouter ce que l'artiste leur envoie. Gmail limitant la taille totale des pièces jointes à 25Mo, j'ai dû créer un algorithme complexe pour l'envoi global, qui fonctionne désormais à merveille et se lance automatiquement chaque lundi: le musicien choisit les prods qu'il veut voir envoyées, et le reste est géré par l'alogrithme.

Page de prospection du Saas - on voit le récapitulatif des derniers envois et le début de la liste des prods à envoyer

Page de prospection du Saas - on voit le récapitulatif des derniers envois et le début de la liste des prods à envoyer

Conclusion

J'accompagne les musiciens depuis 4 ans dans leur développement, activité que j'apprécie tout particulièrement car chaque artiste a toujours de nouveaux besoins tous plus exigeants les uns que les autres. J'apprends énormément avec ce projet, je teste beaucoup de choses et pour le moment je suis arrivé à tout faire.

Ce fut le projet le plus complet et ardu que j'ai eu à livrer depuis un moment. Je suis absolument ravi du résultat, et mes retours clients me le confirment. C'est une franche réussite et une fierté pour moi !