Dans les coulisses de la stack technique de Kelper

L'expertise technique d'Otterly

Chez Otterly, nous concevons et développons des produits numériques à forte valeur ajoutée grâce à notre maîtrise des technologies modernes. Notre approche combine architecture robuste, choix technologiques pertinents et pratiques de développement éprouvées pour créer des applications performantes, évolutives et maintenables.

Kelper représente parfaitement cette expertise technique. En te partageant les coulisses de sa conception, nous souhaitons t'illustrer comment nous abordons le développement d'applications complexes et quelles technologies nous privilégions pour des résultats optimaux.

Qu'est-ce que Kelper?

Kelper est une application innovante qui transforme les notes vocales en points d'action structurés et immédiatement exploitables. Développée par notre équipe, elle répond à un besoin concret : comment retenir efficacement toutes les informations essentielles d'une rencontre professionnelle, sans perdre de temps à retranscrire ou trier des notes approximatives?

À partir d'un simple enregistrement vocal après un rendez-vous, Kelper utilise une intelligence artificielle puissante pour :

• Structurer automatiquement les points clés
• Clarifier les actions à réaliser
• Générer des comptes-rendus précis au format Markdown, compatibles avec Notion et la plupart des outils de prise de notes

Actuellement disponible en Progressive Web App (PWA), Kelper sera bientôt accessible via des applications natives sur iOS et Android.

La stack technique derrière Kelper

Kelper repose sur une stack moderne entièrement en TypeScript, faite pour offrir la meilleure expérience développeur afin d'accélérer le lancement de fonctionnalités demandés par nos utilisateurs.

Nous avons déjà abordé le sujet de tRPC dans un article précédent, mais pour résumer, tRPC est une bibliothèque qui nous permet de créer une API 100% typée entre le frontend et le backend, avec la validation des entrées et la gestion des erreurs intégrées. Cela nous permet de développer plus rapidement des fonctionnalités comparé à une API REST classique, tout en garantissant une sécurité et une robustesse accrues.

La création de Kelper nous a également permis de relever un nouveau défi, celui des applications mobiles. Comme nous utilisons déjà React pour le web, nous avons choisi d'utiliser Expo & React Native pour développer nos applications mobiles.

Nous avons ainsi pu réutiliser une grande partie de notre code React existant, notamment la logique de l'interface et une partie des composants une fois adaptés à la logique de React Native. Lorsque nous ajoutons une nouvelle fonctionnalité, la logique métier est écrite une seule fois et les interfaces sont adaptées pour chaque plateforme. Cela nous permet de réduire considérablement le temps de développement et de maintenance, tout en garantissant une expérience utilisateur cohérente et de qualité sur tous les appareils.

Pourquoi ce choix de deux bases de code pour le web et le mobile?

Lorsqu'on souhaite développer une application pour à la fois le web et les mobiles, il existe plusieurs approches :

• Faire une application web responsive qui s'adapte à tous les écrans et qui peut être installée sur les mobiles via une Progressive Web App (PWA)
• Développer une application web et une application mobile native séparées, chacune avec sa propre base de code
• Utiliser un framework hybride comme Expo & React Native pour partager une partie du code entre le web et les mobiles

La troisième option semblerait la plus logique, mais bien que React Native à montré ses capacités pour le natif mobile, nous n'étions pas convaincus des performances et de la qualité de l'expérience développeur et utilisateur pour le web.

Notre approche hybride NextJS et Expo nous permet de bénéficier du meilleur des deux mondes : une application web performante et une application mobile native fluide, tout en partageant une grande partie de la logique métier entre les deux plateformes.

La seule contrainte est de devoir maintenir deux interfaces ou composants pour chaque fonctionnalité, mais avec l'utilisation de TailwindCSS et un coup de GitHub Copilot, il est très facile d'adapter un composant d'une plateforme à l'autre.

De plus, cela permet de tirer parti des spécificités de chaque plateforme pour offrir la meilleure expérience utilisateur possible.

Par exemple sur mobile, le système de transcription vocale utilise les APIs natives du téléphone qui sont adaptés à la voix de l'utilisateur ainsi qu'à son dictionnaire de saisie, ce qui permet d'obtenir une précision bien supérieure à celle d'un modèle d'IA. Sur le web, nous sommes dépendants des navigateurs et de leurs limitations, ce qui peut parfois entraîner des erreurs de transcription ou des lenteurs lorsque nous devons passer par une transcription via Whisper.

Un backend flexible, performant et scalable

Depuis que nous avons commencé à utiliser tRPC, notre backend est bien souvent resté lié à NextJS pour des raisons de simplicité. Cependant pour Kelper, cette solution allait nous causer plus de problèmes qu'elle n'en résolvait.

Tout d'abord celle du coût. Du fait que nous hébergeons nos applications NextJS sur Vercel, nos APIs sont facturés à la seconde d'exécution.

Ce n'est pas un problème pour une API traditionnelle qui renvoie juste des données, mais pour Kelper, nous avons besoin de faire des appels à des APIs de traitement IA pour la transcription et l'analyse des notes vocales, ces APIs peuvent mettre plusieurs dizaines de secondes à nous envoyer une réponse, temps pendant lequel nous sommes facturés par Vercel.

Le second problème est celui du typage, si nous voulons pleinement tirer parti de tRPC, le code des routes doit être disponible à la fois sur le frontend et le backend. Or, si ce code reste dans le projet NextJS, il est très difficile voir impossible de le partager avec le projet Expo.

Pour ces raisons, nous avons sorti le code tRPC ainsi que le code de la base de données dans plusieurs packages partagés dans notre monorepo, réglant en premier lieu le problème de partage de code.

Pour le coût, nous avons choisi de créer un backend Node.js séparé avec Express. En plus d'exposer les routes tRPC, il s'occupe également des différents webhooks que notre application doit recevoir (Clerk, Stripe, RevenueCat, etc...) mais aussi de gérer les appels aux APIs tierces pour la transcription vocale.

Ce backend est hébergé dans un conteneur Docker sur Railway, comme notre cluster PostgreSQL, ce qui nous permet de bénéficier d'une scalabilité automatique et d'un coût maîtrisé. Railway nous permet de ne payer que pour les ressources réellement utilisées, contrairement à Vercel qui facture à la seconde.

Nous bénéficions également de la possibilité de déployer des environnement de prévisualisation sur chaque Pull Requests, ce qui nous permet de tester facilement les nouvelles fonctionnalités avant de les mettre en production. Nous utilisons sur ces environnements la fonctionnalité "Serverless" de Railway qui va arrêter le conteneur après 5 minutes d'inactivité, ce qui nous permet de réduire encore les coûts de fonctionnement sans impacter l'expérience développeur.

Le monorepo dans tout ça

La clé de voute de notre stack technique est notre architecture monorepo, qui nous permet de regrouper toutes nos applications et packages partagés dans un seul dépôt de code.

Nous utilisons Turbo Repo combiné aux Workspaces de Yarn. Cette configuration nous permet de gérer efficacement les dépendances entre nos applications et packages, tout en bénéficiant d'une compilation et d'un déploiement rapides.

Une des forces d'un monorepo est la facilité de travailler sur une base de code unifiée. Si on souhaite ajouter une nouvelle fonctionnalité qui nécessite des modifications à la fois sur le backend et le frontend, il est possible de le faire dans une seule Pull Request et de déployer les modifications au même moment. Ce n'est pas anodin car il s'agit d'un problème récurrent que nous avons rencontrés sur plusieurs projets dans le passé où le backend et le frontend étaient dans des dépôts séparés.

De plus, l'usage d'un monorepo nous a permis de simplifier le plus possible le processus d'onboarding des nouveaux développeurs. En clonant le dépôt, ils ont accès à toutes les applications et packages partagés, ainsi qu'à un script d'installation qui va automatiquement configurer l'environnement de développement avec les bonnes versions de Node.js, TypeScript et Yarn.

Les avantages concrets de notre approche

Notre architecture technique présente des bénéfices majeurs que tu peux observer directement dans la qualité de Kelper :

Performance exceptionnelle

Notre architecture optimisée permet des temps de chargement réduits de 40% par rapport aux applications traditionnelles. Tu profiteras d'une réactivité immédiate grâce à l'optimisation des rendus React et au streaming SSR de Next.js 15.

Scalabilité sans limite

L'architecture monorepo facilite la montée en charge : ajout de nouvelles fonctionnalités ou multiplication du nombre d'utilisateurs sans compromettre les performances. Notre infrastructure backend est conçue pour gérer des millions de requêtes tout en maintenant des temps de réponse sous les 100ms.

Économies substantielles

Le partage de code entre plateformes réduit significativement les coûts de développement. Une base de code partagée pour servir web, iOS et Android signifie 60% de code en moins à maintenir et des cycles de développement raccourcis de 30%.

Évolutivité technique garantie

Les technologies que nous avons sélectionnées sont non seulement à la pointe aujourd'hui, mais bénéficient d'un fort soutien communautaire et d'entreprises majeures, te garantissant une pérennité sur 5+ années sans refonte majeure.

Développement accéléré

Grâce à cette architecture technique optimisée, nous avons pu concrétiser Kelper en un temps record : un prototype fonctionnel en seulement deux semaines, suivi de l'application complète en quelques mois, avec des cycles d'itération rapides permettant de valider rapidement les hypothèses business.

Notre expertise technique dans la construction d'applications modernes comme Kelper est ce que nous mettons au service de chacun de nos projets, te permettant d'accéder à des produits rapides, de qualité, performants et facilement évolutifs.