Jellysmack

Des workflows pour créateurs de contenus plus rapides et moins manuels

Développement d’outils de financement, de parcours d’authentification et de signature électronique, ainsi que d’une application créateur cross-platform.

Contexte

Jellysmack est une licorne française spécialisée dans la création et la monétisation de contenus sur les plateformes sociales. L'équipe que j'avais rejoins avait pour but d'explorer des business models et ainsi de livrer rapidement des outils et des applications aux créateurs de contenus et aux équipes opérationnelles.

Responsabilités

Qualité du code et des livrables pour les outils internes et les applications créateurs.
Assurer la maintenance et l'évolution des outils internes et des applications créateurs.
Participer à la conception et à l'amélioration des workflows pour les créateurs de contenus.
Collaborer avec les équipes produit et design pour définir les besoins et les priorités des créateurs de contenus.
Participer à l'intégration des nouvelles technologies et outils pour améliorer les workflows des créateurs de contenus.
Livrer la première application mobile dans la boite.
Collaboration étroite avec l'équipe (produit, design, engineering, architecture) pour aligner l'implémentation avec leur vision.

Problèmes adressés et solutions apportées

Création d'une nouvelle page d'authentification interne

Problème: L'application nécessitait une nouvelle page d'authentification interne pour améliorer la sécurité et l'expérience utilisateur.
Solution: J'ai conçu et implémenté une nouvelle page d'authentification interne, intégrée avec Okta pour le SSO et Google One Tap, en Vue 3 afin d'améliorer la sécurité et l'expérience utilisateur.
Effet: Plus de 600 personnes utilisaient quotidiennement la nouvelle page d'authentification interne, améliorant ainsi la sécurité et l'expérience utilisateur.

Jellysmack Creator program: Dashboard ops

Problème: Les créateurs sur youtube avaient besoin de revenus supplémentaires pour leur projets futurs, Jellysmack permettait d'avancer les revenus futurs.
Solution: J'ai intégré le projet alors qu'il était en cours de développement, et nous avons mis en place un système permettant à nos ops/sales de voir les statistiques de revenus futurs des créateurs en étudiant leur métriques. En collaboration avec le back/front/produit/design, avec côté front un SPA React/Redux/Tanstack Query/React Router
Effet: Nos sales pouvait donc contacter des createurs de contenu ayant des revenus futurs anticipés, facilitant ainsi la planification et le financement de leurs projets.

Jellysmack Creator program: Dashboard sales

Problème: Les sales devant vendre notre service ils avait besoin d'un support pour présenter au créateur, tel que Amixem.
Solution: Via un micro-service API, design des endpoints et en collaboration avec l'équipe front/produit/design, utilisation de React/Spectacle/Nivo, afin de permettre au sale via des lien protégers de présenter les statistiques de revenus futurs aux créateurs, avec des charts animés et interactifs.
Effet: Les sales pouvaient ainsi présenter efficacement les statistiques de revenus futurs aux créateurs et les exporter en format PDF, améliorant la communication et la planification des projets.

Jellysmack Creator program: Acquisition de données

Problème: Le programme JCP manquait de donnée afin d'améliorer le LLM de forecast des revenus futurs des créateurs.
Solution: En collaboration avec la data team, j'ai dû intégrer un système de waitlist pour collecter les données manquantes, via un systeme d'authentification via google OAUTH2 + Youtube scope, permettant ainsi d'avoir des tokens donnant des informations sur les créateurs afin d'améliorer le forecast des revenus futurs des créateurs.
Effet: Par ce biais nous avons détecter de nouveau créateurs et collecté des données précieuses pour améliorer le LLM de forecast des revenus futurs des créateurs.

Jellysmack Creator Universe: Acquisition de données

Problème: Le programme JCP n'étant pas un succès commercial, il fallait trouver une alternative plus séduisante.
Solution: L'équipe produit à donc trouver l'idée de racheter au createur des vidéos existantes afin de collecter les rénumérations futures de celles-ci. Utilisant micro service python + Front + Google Authentication.
Effet: Nous avons ainsi pu collecter les rénumérations futures des vidéos existantes, enrichissant notre base de données et améliorant la précision du forecast des revenus futurs des créateurs.

Jellysmack Creator Universe: Signature du contrat

Problème: Après avoir identifié les vidéos existantes à racheter, il fallait formaliser les accords avec les créateurs.
Solution: Mise en place d'un processus de signature électronique via Docusign et d'un suivi des contrats via un micro-service Python, intégration avec le front-end pour faciliter la gestion des signatures. Vérification de la conformité des formulaires et des interactions pour garantir une expérience utilisateur accessible à tous (WCAG, A11y linter).
Effet: Les contrats ont été signés efficacement, assurant la légalité des acquisitions et permettant de collecter les rénumérations futures des vidéos existantes.

Jellysmack Creator Universe: Performance optimisation

Problème: Après analyse sur datadog, des latences de chargement se faisaient ressentir sur le continent Américain notamment, nécessitant une optimisation pour offrir une expérience utilisateur fluide et rapide.
Solution: Seul j'ai identifié les goulots d'étranglement et mis en œuvre des optimisations. Utilisation de fonctionnalités de Next.js comme la génération de site statique (SSG) et le rendu côté serveur (SSR) pour améliorer la vitesse. Implémention de lazy loading pour les images et videos, minimisation des dépendances tierces pour réduire la taille du bundle et améliorer les temps de chargement.
Effet: L'application web a été optimisée, offrant une expérience utilisateur plus fluide et rapide à l'échelle mondiale passant de 30 secondes de temps de chargement à moins de 5 secondes.

Jellypush: Sécurisation de l'application

Problème: L'application étant gratuite, mais offrant des fonctionnalités sensibles, il était crucial de sécuriser les données des utilisateurs et de prévenir les accès non autorisés.
Solution: Seul côté mobile j'ai mis en place des mesures de sécurité robustes via OAuth2 (avec refresh token), y compris l'authentification à deux facteurs via de l'OTP via email, le chiffrement des données sensibles dans le storage du device via MMKV + Encryption.
Effet: Les données des utilisateurs ont été sécurisées efficacement, réduisant le risque d'accès non autorisé et renforçant la confiance des utilisateurs dans l'application.

Jellypush: Connection aux réseaux sociaux (TikTok, Instagram, Facebook, YouTube)

Problème: A ce moment il était techniquement très complexe de se connecter au différents résaux afin d'avoir le token (surtout instagram), le temps sans passer par des Webview afin d'améliorer l'expérience utilisateur.
Solution: Seul côté mobile le problème restait complexe et long, j'ai donc avancé sur mes différentes tâches tout en continuant à chercher des solutions pour simplifier la connexion aux réseaux sociaux.
Effet: Au bout d'un mois j'ai pu trouver les solutions et nos utilisateurs étaient capables de se connecter aux différents réseaux sociaux de manière fluide et sécurisée.

Jellypush: Utilisateur avec de large bibliothèques de videos

Problème: Les utilisateurs disposant de grandes bibliothèques de vidéos rencontraient des difficultés de gestion et de navigation au sein de l'application. Notement lié au global store en MobX, plus update de la liste via websockets et au fait d'afficher en infinite loading.
Solution: Utilisation de methodes de la classe Map côté javascript + optimisation du rendu des listes sur React native avec Flashlist.
Effet: Les utilisateurs ont pu naviguer et gérer efficacement leurs grandes bibliothèques de vidéos, améliorant ainsi l'expérience utilisateur globale.

Jellypush: Un très haut standard de motion design/UI/UX

Problème: L'application nécessitait un niveau élevé de motion design et d'UI/UX pour offrir une expérience utilisateur exceptionnelle et cohérente.
Solution: Mise en place de standards élevés de motion design et d'UI/UX, en utilisant des animations fluides et des transitions soignées pour améliorer l'interaction utilisateur via React Native Skia, Gesture Handler, Reanimated, utilisation de l'UI thread de React Native.
Effet: L'application a atteint un très haut niveau de qualité en termes de motion design et d'UI/UX, offrant une expérience utilisateur engageante et agréable, sans perte de performance.

Highlights

Licorne du secteur des médias sociaux avec plus de 1 milliard de dollars de levée de fonds.
Concernant Jellypush, des visual specs sont visibles sur le portfolio d'un ami ukrainien que j'ai développé, Volodymyr SEVERYNENKO

Technologies

Jira
Figma
SSG/SSR/ISR
lighthouse CI
Reanimated
Gesture Handler
Skia
WebSockets
Fastlane
React
Vue.js
Node.js
React Native
GraphQL
Docker
SQL
CI/CD
Terraform
Gitlab
Pinia
Redux
MobX
jotai
zustand
turboRepo
python
docusign
framer-motion
AWS
S3
Cloudfront
IAM
Next.js
TanStack Query
TypeScript
Datadog
Tailwind CSS
Google One Tap
React Router
Spectacle
I18n
A11y
MMKV
Flashlist

Résultats

Réduction du travail opérationnel manuel: ~25 %
Réduction du temps d’onboarding: ~40 %
Réduction du temps de publication sur les différentes plateformes sociales: ~50 %
Réduction du temps de gestion des workflows internes: ~30 %