DEV Community: Ekim Kael

How a Reading Problem Turned Into a Listening App

Ekim Kael — Mon, 03 Aug 2026 13:07:00 +0000

For the past few months, I've been working on a listening app, and I'd like to take you along for the journey — from where it all started to where it's going.

Through this series, I'll share the ideas, challenges, mistakes, and small victories that have shaped Orateur.

But before we dive into the technology, let's go back to the very beginning.

How did the idea come about?

Like many people, I subscribe to several newsletters and receive dozens of interesting articles every week. Every time I see one, I tell myself:

"I'll read it later."

So I open it in a new browser tab and move on with my day. The problem is... "later" almost never comes.

When I finally return to that tab, the article is often long, a notification pops up, I get distracted, or I simply lose the motivation to start reading.

Eventually, I close the tab without having read a single paragraph. After a few weeks, my browser turns into a graveyard of forgotten tabs. I'm pretty sure I'm not the only one this happens to.

Another challenge: articles in English

There was another issue as well. Many of the articles I wanted to read were written in English. Although I can read and understand English fairly well, spending twenty or thirty minutes reading a technical article requires much more mental effort than reading in French. After a while, it becomes tiring, and I often end up giving up.

So I started asking myself a simple question:

What if I could simply listen to these articles while doing something else?

The spark

With the rise of AI, one day I had the idea of asking it to read an article I was genuinely interested in. That very article eventually became the demo article available on the Orateur website.

Being Claude Code, it naturally went into full over-engineering mode. All that because at the time it couldn't read(no TTS feature built yet), so it built an actual web app to read that specific article. I quickly realized it could become much more than a fun experiment. So I began automating the entire workflow.

The goal was simple: paste an article's URL, fall back to copying and pasting its text whenever extraction wasn't possible, or import the content directly from PDF, Markdown, or plain text files. At that point, I was no longer building a proof of concept. I was building Orateur.

One idea led to another...

The project quickly kept growing. I no longer wanted to simply listen to articles. I wanted the whole experience to feel effortless. One URL, one click, a few seconds later, your article was ready to listen to. Little by little, that small web app evolved into a real application

What I'm most proud of

Surprisingly, importing articles isn't the feature I'm most proud of.

The real milestone was integrating an AI speech model capable of producing voices that sound far more natural than the default voices available on our phones and computers. And there's something even better.

It works completely offline.

Once the models are downloaded and installed, you only need an internet connection to fetch an article. Everything else---from text processing to playback---runs locally on your device. That was incredibly important to me.

I wanted Orateur to remain useful anywhere, even with a slow, expensive, or completely unavailable internet connection.

Give Orateur a try

If you're curious, you can already try the web version of Orateur:

https://orateur.digitalekim.net

The mobile app and a browser extension are currently in development.

What's next?

This is only the beginning. In this first article, I shared the story behind why I started building Orateur. But the most interesting part is still ahead.

In the next episode, We'll talk about how I went from the robotic text-to-speech voices built into our devices to AI-powered voices that sound surprisingly natural—while still running entirely offline.

Trust me... getting there was far from easy.

How to build a React Native android application locally with Expo 50

Ekim Kael — Wed, 03 Jul 2024 04:48:30 +0000

If you have sensitive information that you don't want to get on the Internet and share with Expo, or if you don't have the money to wait your turn in the queue, it's possible to build your application locally, and that's what we're going to look at today.

IMPORTANT: You're more likely to get it right if you're on macOS or Linux. For Windows you need to have WSL installed.

1. eas(Expo Application Service) account

First of all, go to https://expo.dev/ and create an account. Otherwise it will be difficult to follow this article.

2. Install eas-cli

EAS CLI is the command-line application you'll use to interact with EAS services from your terminal. To install it, run the following command:



npm install -g eas-cli

3. Login to your account



eas login

4. Configuring the build

To configure your project's build, use the command



eas build configure

This command also initiates your project on your account on the expo servers.

5. Credentials.json

This part is important when you want to produce the version of your application that will go on the AppStore or Google Play Store. It contains the credentials and certificates your application will need to be signed and recognized by the Play Store (in our case).

If the credentials are located on your machine, you must specify this in the eas.json file, otherwise it will look for them in your online project. To do this, you can add this line to your eas.json file on the appropriate build profile.



credentialsSource: 'local'

6. Java 17

You must have Java installed on your machine, otherwise you'll get the above error. Version 17 is the recommended one. I haven't tested higher versions, so I can't say.

7. Environment variables

When you do a local build, EAS secrets are not supported. Instead, you need to use environment variables. If you have environment variables, expo will not take .env.local into account. So you'll need to create an .env file and then delete it every time you finish a build.  Don't add your .env file to your .gitignore file - it will be ignore.  We'll look at how to automate the whole process from step 5 onwards in a future article.

8. Files not to be committed:

As I said earlier, the informations contained in these files are sensitive, so it must not be possible to find them online:

credentials.json
Your keystore file (.jks)
.env

9. Launch the build

Once all the elements are ready, you just need to know the profile for which you want to produce the application and launch the command:



eas build --platform android --profile (development/preview/production) --local

If you take the time to observe you'll see that Expo logs everything it does during the process and in the first 2 lines you can see that it:

loads environment variables
Uses local credentials (if specified)

Once the process has started, you wait a few minutes for it to finish and tell you where to find your application's compiler file, and voila!

Limitations

Some of the options available when building online are not available locally:

You can only do one build at a time and for one specific platform (android or iOS).
You'll have to update the expo.android.versionCode or expo.ios.buildNumber yourself.
Caching is not supported.
You must ensure that the environment has all the necessary tools:
- Node.js/Yarn/npm
- Fastlane (iOS only)
- CocoaPods (iOS only)
- Android SDK and NDK

I hope you've found this article useful, and I'll see you soon to automate the process. Ciao!

How do you stop repeating yourself ?

Ekim Kael — Tue, 28 Sep 2021 08:07:26 +0000

Do you guys have something like feature helpers?
Like you want to make login or authentication, you grab it/clone/copy it to your application and you're ready to go?

II'm building React/Nextjs app everyday and I feel a bit tired to have to repeat the process on each project

Chakra UI: Theme - Update Tab style

Ekim Kael — Sun, 05 Sep 2021 07:54:34 +0000

I'm working on a project with Chakra UI where I need to create a navigation but it's more like tabs so I chose to use Chakra UI Tabs. I'm personally not a fan of the approach of writing CSS rules in components so I always prefer to modify the theme to fit my needs.

In this case, I really needed my Tabs to look like a classic navbar so I took the unstyled variant.



<Tabs variant="unstyled">
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

And here is how to change the style of a Tab in the theme file 👇🏾
The first thing to note is that all child styles end up in Tabs.
So if you want to change Tablist or TabPanel, it will also be done in the Tabs attribute at the theme file.



export const theme = extendTheme({
    Tabs: {
      variants: {
        unstyled: {
          paddingY: '4',
          marging: '0',
          tab: {
            _selected: {
              color: 'white',
              boxShadow: 'none',
            },
          },
        },
      },
    },
  },
});

🎉

Back to yarn 1x after migrating to the 2x "Berry" version

Ekim Kael — Sat, 24 Apr 2021 17:18:31 +0000

If you are like me and wanted to test yarn 2x "Berry" and a few seconds later you were doing npm uninstall -g yarn and then npm install -g yarn but the version still was 2x, you can revert to the 1x version by doing:

yarn set version 1.22.10

(knowing that 1.22.10 is the version I want to use)
Bye 👋 ✌️

Flickering with React/Nextjs

Ekim Kael — Sat, 27 Mar 2021 17:24:43 +0000

Hi guys, i've this behavior happening when i try to test my authentication.
I wonder if someone have already deal or knows how to deal with it.

Thanks

Customers chats integration with React

Ekim Kael — Fri, 22 May 2020 06:57:26 +0000

Does anyone here have already add those customers live chats? stuff like: Tawk with React? I copied the code they give me and put it on the index html but it didn't work

How to manage a team when deadlines are short

Ekim Kael — Sat, 01 Sep 2018 07:58:35 +0000

I recently got a job as a designer.Last week I was promoted to head the frontend and design team.Yeah!✨🎈🎉🎊

No, no yeah!!

The joy disappeared very quickly because I have to manage my team but I'm lost on one thing in particular: scheduling tasks.

As far as design is concerned, I'm still okay (but I'm interested in new approaches) but I don't know how to plan the tasks from the frontend.

We will use ReactJS as framework.so if there are methodologies we can use with thanks.

One of the major concerns is time.

I wanted to start on Brad Frost's atomic design but you need an MVP by the end of the month and the boss wants results every week.

How to deal with it?

Any help is appreciated

React, React-Router and Fetch API

Ekim Kael — Mon, 09 Jul 2018 17:12:36 +0000

I'm having a problem with my React.

I use React-Router and the Fetch API.

So... I have a list of products and when I click on one, I am redirected to a route to display more details on the product in question but also to display the other products.

Say: reactapp.com/all for all products

reactapp.com/p/productID my two URLs

My problem:

When I am on reactapp.com/p/productID and I click on another product, the URL is updated but the product information is not updated.

When I click a second time, the product information I previously clicked is displayed
I don't know if you understand me.I have a data restriction at the moment.so I can't deploy so you can see it.
Please if you've understood what i mean, help me

Let's talk about clients

Ekim Kael — Fri, 29 Jun 2018 13:36:50 +0000

Hi,
I think there are freelancers here too.
So I really started this activity as a developer this year, and although I like working from everywhere and (sometimes) at times that suit us, I struggle.
Then I humbly come to you for help.
I'd like to know how you're doing:

find clients
what to do, what not to do
If possible, is it better to meet the client when they contact you first?
how do you establish your prices (are there apps that make your work easier?) etc... Here I would like us to linger more on the Internet but everything is good to take. Even on the field, it could help someone

Thank you

GraphQL these questions that we ask ourselves but that the tutos do not address

Ekim Kael — Tue, 19 Jun 2018 11:13:17 +0000

I was supposed to start a job today and all my schedule was done around that but for lack of any confirmation from the client and the team leader, I still looked on the internet.productivity level: 0, energy level: 0.it's when I remember that yesterday I was well surprised to know by doing a little waking that:

WordPress can be converted to REST API which returns JSON responses and then
GatsbyJS could recover them and with React in the background, transform all that into a static site or even a PWA.

Being a JAM Stack aspiring I was very quickly interested but having already tried to know what all the components of this Stack are for, I still block on a super powerful concept and tool that gives it a lot of charm I named: GraphQL

So...what is GraphQL?
What's the point?
How does it work?

On the documentation you will find answers to these questions. I also advise you the post of: Grigor Khachatryan
There are many tutorials that also talk about it but which for me treats it badly because it launches itself all very quickly to the writing of GraphQL queries that to answer many rather important questions on which the novices stumble.
Personally here are the questions I ask myself:

Why do I compare GraphQL to REST?
Can't it be added to REST?
one thing I like about REST is the way it allows us to write urls which is pretty sexy, so what about GraphQL?
Using enough ExpressJS/HapiJS are there solutions to integrate GraphQL to these frameworks?
At what level does GraphQL appear in an MVC architecture?(for example)

I just realized I've already found an answer to a question.
These stupid questions can be turning in the heads of many I'm sure unless I'm the only one (ohh shame!!!!)

On the documentation they give an excellent resource: how to graphql.I looked at the proposed route and it helps to answer some questions so I check it out.I'll get on it soon.

you can add the questions you ask yourself in comments

How to make many http requests with react

Ekim Kael — Wed, 13 Jun 2018 13:47:42 +0000

Hi, please i'm stuck.
is somebody knows how to make many request in a react component or route?

componentDidMount = () => {
    const { match: { params } } = this.props
    fetch(`/w/${params.work}`)
      .then(res => res.json())
      .then(work => this.setState({ work }))

    fetch('/works')
      .then(res => res.json())
      .then(otherWorks => this.setState({ otherWorks }))
}

something like this that works.
I'm a beginner with React so i don't really want things like Redux
i just want a beginner way.The first fetch work but not the second