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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fhero.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Finstrumentales.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Flicences.png&w=3840&q=75)
Liste des licences qu'il est possible d'acheter
![Formulaire de demande d'exclusivité](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fexclusivite.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fbeat.png&w=3840&q=75)
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 📚](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-home.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-connexion.png&w=3840&q=75)
Page de connexion du backoffice
Génération de licences à la volée
![Page de génération de licences, simple d'utilisattion](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-licences.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-televerser.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-instrumentales.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-placements.png&w=3840&q=75)
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 !](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-logs.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-comptabilite.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-laboratoire.png&w=3840&q=75)
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](/_next/image?url=%2Fimg%2Fprojects%2Fmethem%2Fmonitor-ordonnanceur.png&w=3840&q=75)
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 !