Inside Kelper's technical stack

Otterly's Technical Expertise

At Otterly, we design and develop high-value digital products through our mastery of modern technologies. Our approach combines robust architecture, relevant technological choices, and proven development practices to create performant, scalable, and maintainable applications.

Kelper perfectly represents this technical expertise. By sharing the behind-the-scenes of its design with you, we aim to show you how we approach the development of complex applications and which technologies we favor for optimal results.

What is Kelper?

Kelper is an innovative application that transforms voice notes into structured, immediately actionable points. Developed by our team, it addresses a concrete need: how to efficiently retain all essential information from professional meetings without wasting time transcribing or sorting through rough notes?

From a simple voice recording after a meeting, Kelper uses powerful artificial intelligence to:

• Automatically structure key points
• Clarify actions to be taken
• Generate precise reports in Markdown format, compatible with Notion and most note-taking tools

Currently available as a Progressive Web App (PWA), Kelper will soon be accessible via native applications on iOS and Android.

The Technical Stack Behind Kelper

Kelper is built on a modern stack, entirely in TypeScript, designed to offer the best developer experience to accelerate the launch of features requested by our users.

We have already discussed the topic of tRPC in a previous article, but to summarize, tRPC is a library that allows us to create a 100% type-safe API between the frontend and the backend, with built-in input validation and error handling. This enables us to develop features faster compared to a classic REST API, while ensuring increased security and robustness.

Creating Kelper also presented us with a new challenge: mobile applications. Since we were already using React for the web, we chose to use Expo & React Native to develop our mobile apps.

This allowed us to reuse a large portion of our existing React code, especially the UI logic and some of the components once they were adapted to React Native's logic. When we add a new feature, the business logic is written only once, and the interfaces are adapted for each platform. This significantly reduces development and maintenance time while ensuring a consistent, high-quality user experience across all devices.

Why the choice of two codebases for web and mobile?

When you want to develop an application for both web and mobile, there are several approaches:

• Build a responsive web application that adapts to all screens and can be installed on mobile devices via a Progressive Web App (PWA).
• Develop a separate web app and a native mobile app, each with its own codebase.
• Use a hybrid framework like Expo & React Native to share some code between the web and mobile.

The third option might seem the most logical, but while React Native has proven its capabilities for mobile native development, we were not convinced by the performance and the quality of the developer and user experience for the web.

Our hybrid Next.js and Expo approach allows us to get the best of both worlds: a high-performance web application and a smooth native mobile app, all while sharing a large part of the business logic between the two platforms.

The only constraint is having to maintain two interfaces or components for each feature, but with the use of TailwindCSS and a little help from GitHub Copilot, it is very easy to adapt a component from one platform to the other.

Furthermore, this allows us to leverage the specifics of each platform to offer the best possible user experience.

For example, on mobile, the voice transcription system uses the phone's native APIs, which are adapted to the user's voice and their typing dictionary, resulting in much higher accuracy than an AI model. On the web, we are dependent on browsers and their limitations, which can sometimes lead to transcription errors or slowness when we have to use transcription via Whisper.

A flexible, performant, and scalable backend

Since we started using tRPC, our backend has often remained tied to Next.js for simplicity's sake. However, for Kelper, this solution was going to cause more problems than it solved.

First, the cost. Because we host our Next.js applications on Vercel, our APIs are billed per second of execution.

This isn't an issue for a traditional API that just returns data, but for Kelper, we need to make calls to AI processing APIs for transcription and analysis of voice notes. These APIs can take several tens of seconds to send back a response, during which time we are being billed by Vercel.

The second problem is typing. If we want to take full advantage of tRPC, the route code must be available on both the frontend and the backend. However, if this code remains in the Next.js project, it is very difficult, if not impossible, to share it with the Expo project.

For these reasons, we extracted the tRPC code and the database code into several shared packages in our monorepo, which solved the code-sharing problem first and foremost.

For the cost issue, we chose to create a separate Node.js backend with Express. In addition to exposing the tRPC routes, it also handles the various webhooks our application needs to receive (Clerk, Stripe, RevenueCat, etc.) and manages calls to third-party APIs for voice transcription.

This backend is hosted in a Docker container on Railway, just like our PostgreSQL cluster, allowing us to benefit from automatic scalability and controlled costs. Railway allows us to pay only for the resources we actually use, unlike Vercel, which bills by the second.

We also benefit from the ability to deploy preview environments on each Pull Request, which allows us to easily test new features before putting them into production. On these environments, we use Railway's "Serverless" feature, which shuts down the container after 5 minutes of inactivity, further reducing our operating costs without impacting the developer experience.

The role of the monorepo in all this

The keystone of our technical stack is our monorepo architecture, which allows us to group all our applications and shared packages into a single code repository.

We use Turbo Repo combined with Yarn Workspaces. This setup allows us to efficiently manage dependencies between our applications and packages, while benefiting from fast compilation and deployment.

One of the strengths of a monorepo is the ease of working on a unified codebase. If we want to add a new feature that requires changes on both the backend and the frontend, we can do it in a single Pull Request and deploy the changes at the same time. This is significant because it's a recurring problem we've encountered on several past projects where the backend and frontend were in separate repositories.

Moreover, using a monorepo has allowed us to simplify the onboarding process for new developers as much as possible. By cloning the repository, they have access to all applications and shared packages, as well as an installation script that automatically configures the development environment with the correct versions of Node.js, TypeScript, and Yarn.

The concrete advantages of our approach

Our technical architecture provides major benefits that you can observe directly in the quality of Kelper:

Exceptional performance

Our optimized architecture leads to 40% shorter loading times compared to traditional applications. You'll enjoy immediate responsiveness thanks to optimized React renders and Next.js 15's SSR streaming.

Limitless scalability

The monorepo architecture makes it easy to scale up: adding new features or multiplying the number of users without compromising performance. Our backend infrastructure is designed to handle millions of requests while maintaining response times under 100ms.

Substantial savings

Code sharing between platforms significantly reduces development costs. A shared codebase to serve web, iOS, and Android means 60% less code to maintain and development cycles shortened by 30%.

Guaranteed technical evolution

The technologies we have selected are not only on the cutting edge today but also benefit from strong community support and backing from major companies, guaranteeing you longevity for 5+ years without a major overhaul.

Accelerated development

Thanks to this optimized technical architecture, we were able to bring Kelper to life in record time: a functional prototype in just two weeks, followed by the complete application in a few months, with rapid iteration cycles allowing us to quickly validate business hypotheses.

Our technical expertise in building modern applications like Kelper is what we bring to each of our projects, giving you access to products that are fast, high-quality, performant, and easily scalable.