Yabble

Listen to aduiobooks or convert text, PDF's, blogs, or websites to speech AI, as well as full customization to the audiobook by adding background audio.

Comment

Inspiration

In a world where we're always multitasking, I found it challenging to keep up with my reading list of articles, documents, and study notes. I was inspired by the idea of making written content more accessible and convenient. I wanted to create a personal tool that could transform any text into a high-quality, engaging audiobook, allowing me to listen while commuting, exercising, or doing chores. That's how the idea for Yabble was born.

What it does

Yabble is a mobile application that turns any text into a personal audiobook. Users can simply paste text or upload a document, and the app uses advanced AI to generate a natural, human-like narration. It features a clean and intuitive audio player with a standout feature: perfectly synchronized, karaoke-style text highlighting that allows users to follow along with the narration. The app securely stores a user's library of created audiobooks for them to access anytime.

How we built it

Yabble is built on a modern and efficient technology stack: Frontend: The app is built with React Native and the Expo framework, enabling a single JavaScript codebase for both Android and iOS. Navigation is handled by Expo Router. Backend & Database: Supabase serves as the all-in-one backend solution. It manages user authentication, provides a PostgreSQL database for storing user profiles and audiobook metadata, and handles file storage for the generated audio files. AI Voice Generation: The core text-to-speech functionality is powered by the ElevenLabs API, which provides the high-quality, natural-sounding AI voices. Build & Deployment: The entire build, submission, and deployment pipeline is managed by Expo Application Services (EAS).

Challenges we ran into

Building Yabble involved tackling challenges across the entire development spectrum: Backend Security: A primary challenge was ensuring users could only access their own data. This was solved by implementing strict Row-Level Security (RLS) policies in the Supabase database, which was a great learning experience in database-first security. Frontend Polish: Creating the synchronized text highlighting was more difficult than anticipated. It required parsing complex, timestamped alignment data from the ElevenLabs API and building a custom component to ensure the highlighting was perfectly in sync with the audio playback, word-for-word. Deployment & Configuration: The final and most significant hurdle was deployment. The app worked perfectly in development but would crash instantly in a production-like preview environment. This was traced to a subtle but critical conflict between environment variables stored on the EAS platform and a local eas.json configuration file, which took a dedicated debugging session to resolve.

Accomplishments that we're proud of

We're incredibly proud of creating a fully functional, end-to-end application that solves a real-world problem. A few key accomplishments stand out: The karaoke-style text highlighting is a feature we're particularly proud of, as it provides a polished and highly engaging user experience that sets the app apart. Building a secure backend architecture with Supabase and Row-Level Security from the ground up gives us confidence in the app's ability to protect user data. Successfully diagnosing and fixing the native deployment crash. While challenging, overcoming this final hurdle was a major accomplishment that proved our ability to solve complex, real-world development problems.

What we learned

This project was a tremendous learning experience. The most important takeaways were: The value of database-level security. Implementing RLS taught us to think about security from the foundation up, rather than just at the application layer. The nuances of mobile CI/CD pipelines. We learned the critical importance of understanding exactly how a build service like EAS handles environment variables and configurations across different profiles (development vs. preview). The power of a modern tech stack. Using tools like Expo, Supabase, and ElevenLabs allowed a single developer to build and deploy a feature-rich, cross-platform AI application that would have been immensely more complex just a few years ago.

What's next for Yabble

The journey is just beginning! We have a clear roadmap for the future: Premium Features: We plan to introduce a subscription tier that unlocks advanced features like unlimited audiobook creation, exclusive AI voices, and higher character limits. Enhanced Social Features: We want to build out the "Achievements" and "Streaks" on the profile page to encourage user engagement, and add the ability for users to share their favorite creations with friends. Broader Accessibility: We aim to add support for more languages and a wider variety of document types for conversion

Built With

Share this project:

Updates