PrettiOps
Une boite a outils full-stack pour developpeurs qui transforme l'email en surface de communication securisee et compatible avec la syntaxe — de l'extension navigateur au backend SaaS.
Résultats clés
Support de langages
30+ languages
Coloration syntaxique via Prism.js avec plus de 6 themes d'editeur compatibles avec tous les clients de messagerie.
Couverture plateformes
3 email clients
Gmail (Chrome Extension), Outlook (add-in Office.js) et compatibilite Apple Mail.
Profondeur de securite
AES-256 vault
Tokens chiffres au repos avec Libsodium, politiques de revelation controlees et detection de secrets.
Niveaux SaaS
4 plans
Free, Pro, Team et Enterprise avec controle d'acces par fonctionnalite, limites d'utilisation et facturation Stripe.
Le problème
Ce que ce projet devait résoudre
Les developpeurs partagent quotidiennement des donnees sensibles par email — cles API, fragments de code, identifiants, fichiers de configuration — mais les clients de messagerie n'offrent aucune mise en forme, aucun chiffrement et aucun controle d'expiration. PrettiOps transforme cet angle mort en produit.
PrettiOps est ne d'un constat : les developpeurs partagent en permanence du code, des tokens et des fichiers par email, mais les clients de messagerie traitent tout comme du texte brut. Le produit reinvente l'email comme une surface de premier plan pour les developpeurs, avec des extraits de code avec coloration syntaxique, un partage de tokens chiffre et une livraison de fichiers securisee.
Le systeme repose sur deux bases de code : un backend Symfony 6 avec PostgreSQL, la facturation Stripe, le chiffrement Libsodium et un modele d'abonnement SaaS a plusieurs niveaux, ainsi qu'un monorepo TypeScript alimentant une Chrome Extension et un add-in Outlook construits sur React 18, CodeMirror 6 et Zustand. L'extension s'injecte directement dans la fenetre de composition de Gmail, transformant l'editeur d'email en un outil de redaction professionnel pour developpeurs.
Ce qui distingue ce projet, c'est la profondeur du dispositif de securite — les tokens sont chiffres AES-256 au repos, les secrets sont scannes avant l'envoi, les fichiers expirent avec des limites de telechargement — combine a une experience produit fluide qui fonctionne dans les contraintes du rendu email sur Gmail, Outlook et Apple Mail.
Ce qui a changé
Au lieu de coller du code brut dans les emails en esperant que la mise en forme survive, les developpeurs disposent d'une veritable surface de redaction : choisir un theme, selectionner un langage, inserer un extrait qui s'affiche de maniere identique sur chaque client de messagerie — avec les secrets masques et les fichiers qui expirent.
Pourquoi c'était difficile
La difficulte principale residait dans l'articulation de deux environnements d'execution tres differents — un backend Symfony gerant le chiffrement, la facturation et le stockage de fichiers, et une extension navigateur injectant de l'interface dans le DOM de Gmail — tout en maintenant une experience produit fluide et un dispositif de securite reel, et non cosmetique.
Contraintes
- Le rendu HTML des emails est incoherent entre Gmail, Outlook et Apple Mail — des mises en page basees sur des tableaux etaient necessaires pour un affichage fiable des extraits de code.
- Les extensions navigateur s'executent dans un environnement isole avec des contraintes strictes de CSP, de stockage et de messagerie.
- Le chiffrement des tokens devait etre hermetique au repos (Libsodium AES-256) tout en permettant des flux de revelation controles avec expiration et limites.
Mon rôle
- Conception et construction de l'architecture complete du produit a travers le backend (Symfony/PHP) et l'extension (TypeScript/React).
- Implementation du modele d'abonnement SaaS avec le checkout Stripe, le cycle de vie des webhooks et le controle d'acces par niveau de plan.
- Construction de la couche de chiffrement pour le coffre-fort de tokens et le partage securise de fichiers avec expiration, limites de telechargement et revocation.
- Ingenierie de la Chrome Extension avec injection dans la composition Gmail, editeur CodeMirror et pont multi-plateforme pour Outlook.
Preuves
À quoi ressemble réellement le produit
Captures d'écran réelles du produit — chacune illustre un argument concret de clarté, de contrôle ou d'observabilité.
Surface de pilotageCliquer pour agrandirTableau de bord web
Le tableau de bord authentifie affiche le nombre d'extraits, l'etat du coffre-fort de tokens et de fichiers, les expirations a venir et l'activite recente en un coup d'oeil.
Les cartes KPI mettent en evidence la sante operationnelle — total des extraits, verrous du coffre-fort et elements expirants — pour que les utilisateurs connaissent immediatement l'etat de leur espace de travail.
Outil de redactionCliquer pour agrandirEditeur d'extraits
Un editeur CodeMirror 6 complet avec detection de langage, selection de theme, explorateur de fichiers et rendu compatible email integre a l'application web.
L'editeur prend en charge plus de 30 langages et plus de 6 themes. Chaque extrait est versionne avec sauvegarde d'une nouvelle version via Ctrl+S.
Surface d'extensionCliquer pour agrandirIntegration dans la composition Gmail
La boite de dialogue de composition d'extraits s'ouvre directement dans Gmail, permettant aux developpeurs d'ecrire, previsualiser et inserer du code avec coloration syntaxique dans les emails.
La boite de dialogue inclut un explorateur de fichiers projet, un editeur de code, un scanner de secrets et un apercu email — le tout dans le popup de l'extension.
Hub d'extensionCliquer pour agrandirTableau de bord de l'extension
Le popup de la Chrome Extension fournit l'etat du compte, des actions rapides et un acces direct a la barre d'outils d'extraits injectee dans la fenetre de composition de Gmail.
La barre d'outils injectee se place dans l'interface de composition de Gmail, rendant l'insertion d'extraits naturelle plutot que greffee.
OnboardingCliquer pour agrandirFlux d'authentification
Une surface de connexion epuree avec mise en avant des fonctionnalites et prise en charge de l'email/mot de passe et de Google OAuth — partagee entre le web et l'extension.
Le flux de connexion fonctionne de maniere identique depuis l'application web et le popup de l'extension via un protocole de transfert securise base sur un etat.
Décisions
Les compromis qui ont façonné le produit
Le travail le plus solide se révèle dans les choix faits sous pression, pas seulement dans l'interface finale.
Architecture propre plutot que prototypage rapide
Défi
L'extension et le backend devaient evoluer independamment sans casser la logique metier partagee.
Décision
Les couches domaine, application et infrastructure ont ete separees dans le monorepo TypeScript. Le backend suit des patterns hexagonaux avec des controleurs legers et une logique metier dans la couche de services.
Compromis
Cout initial de mise en place plus eleve, mais l'architecture s'amortit a chaque ajout de nouvelle plateforme (Outlook) ou fonctionnalite (coffre-fort de fichiers).
Rendu email base sur des tableaux plutot que du CSS moderne
Défi
Les clients de messagerie suppriment la plupart du CSS — flexbox, grid et meme certaines regles de padding sont peu fiables entre Gmail, Outlook et Apple Mail.
Décision
Les extraits sont rendus via l'analyse token par token de Prism.js en HTML tabulaire, puis les CSS sont inlines avec juice pour une compatibilite universelle.
Compromis
Le pipeline de rendu est plus complexe, mais chaque extrait s'affiche de maniere identique sur chaque client de messagerie.
Chiffrement Libsodium plutot que hachage applicatif
Défi
Les tokens stockes doivent etre recuperables (pour une revelation controlee) mais jamais exposes en clair au repos.
Décision
AES-256-GCM via Libsodium secretbox avec des nonces par token. Les politiques de revelation imposent l'expiration et un nombre maximal de revelations.
Compromis
Necessite l'extension PHP sodium et une gestion rigoureuse des cles, mais la garantie de securite est reelle — pas un hash de token qui pretend etre du chiffrement.
Architecture
Comment les données circulent dans le système
Authentification
Les utilisateurs se connectent via email/mot de passe ou Google OAuth. L'authentification de l'extension utilise un callback base sur un etat avec des tokens de cache a courte duree de vie.
→ Connexion transparente entre l'application web et l'extension navigateur sans exposer les identifiants au runtime de l'extension.
Redaction
Les extraits sont rediges dans CodeMirror 6 avec detection de langage, selection de theme et import optionnel de fichiers depuis le systeme de fichiers local.
→ Edition de qualite professionnelle a la fois dans l'application web et dans la fenetre de composition de Gmail.
Securisation
Les tokens sont chiffres avec Libsodium avant le stockage. Les fichiers recoivent des dates d'expiration, des limites de telechargement et des mots de passe optionnels. Les secrets sont scannes avant l'envoi.
→ Les donnees sensibles sont protegees par defaut — pas par la discipline de l'utilisateur.
Rendu
Prism.js tokenise le code, les templates l'encapsulent en HTML tabulaire, et juice inline tous les CSS pour la compatibilite multi-client de messagerie.
→ Les extraits s'affichent de maniere identique dans Gmail, Outlook et Apple Mail.
Livraison
Les extraits sont inseres dans le compositeur d'email. Les tokens affichent des valeurs masquees avec des liens de revelation controlee. Les fichiers sont servis via des URLs expirants et proteges par mot de passe.
→ Le destinataire recoit une communication soignee et securisee — pas un collage brut.
PrettiOps est divise en deux bases de code : un backend Symfony 6 avec des templates Twig, Doctrine ORM, le chiffrement Libsodium et la facturation Stripe, ainsi qu'un monorepo TypeScript alimentant la Chrome Extension et l'add-in Outlook avec React 18 et une logique metier partagee. L'application web utilise Symfony UX (Stimulus + Turbo) avec du JavaScript vanilla pour l'interactivite. L'extension utilise un pattern bridge pour abstraire les differences entre Gmail et Outlook, tandis que le backend suit une architecture hexagonale avec des controleurs legers et une logique metier dans la couche de services.
Surfaces produit
Les interfaces qui portent l'expérience
Tableau de bord des extraits
L'espace de travail principal affiche le total des extraits, l'etat du coffre-fort, les alertes d'expiration et l'activite recente avec des actions rapides pour creer et gerer le contenu.
Editeur de code et gestionnaire d'extraits
Un editeur de code complet base sur CodeMirror 6 avec plus de 30 modes de langage, plus de 6 themes, un historique de versions et un explorateur de fichiers pour importer des fichiers locaux.
Compositeur Gmail de l'extension
Une boite de dialogue d'extraits qui s'ouvre dans la fenetre de composition de Gmail avec des selecteurs de langage/theme, un editeur de code, un explorateur de projet et un scanner de secrets.
Popup et barre d'outils de l'extension
Le popup de la Chrome Extension fournit l'etat du compte, une navigation rapide et une barre d'outils de marque injectee dans la fenetre de composition de Gmail pour un acces aux extraits en un clic.
Authentification et onboarding
Un flux d'authentification partage prenant en charge email/mot de passe et Google OAuth, avec un protocole de transfert base sur un etat pour une connexion fluide entre l'extension et le web.
Stack technique
Construit avec
Framework
Data
UI
Infra
Langages
PHP 8.4TypeScriptJavaScriptTwig/HTMLSQLCSS/TailwindCe que ce projet démontre