This post explains how we built this site's admin panel by following a very specific rhythm: first plan, then build, verify, correct, and iterate again.

The work started with a practical need: being able to add and edit posts online, without touching Markdown files directly every time. The site was already based on Next.js, with content stored in `.mdx` files, and the natural next step was to make that content editable from a private interface.

## The initial instruction

The request was clear: add an `/admin` page, protected by a password defined in `.env`, with a Markdown editor, preview, and the ability to upload images.

From there, the conversation defined the real architecture:

- The content should not live inside the main repo.
- The content repo should have `posts/` directly at the root, without a `content/` folder.
- Images should go into `images/uploads` inside the content repo.
- Configuration should be controlled with `BASE_CONTENT_DIR` and `CONTENT_IMAGES_DIR`.

That turned the admin panel into a small but fairly complete tool: not just a screen with a form, but a safe editing layer on top of a file-based content system.

## Plan and build

The workflow was very much "plan and build".

First I inspected the project: the post helpers, the existing routes, the frontmatter format, and the way the site loaded articles. Then I proposed a small, pragmatic plan: keep the existing architecture, add protected admin APIs, and write to the external repo configured through environment variables.

When Francesc confirmed the details, I moved into implementation.

The first version included:

- Login with a password hardcoded in `.env`.
- An HttpOnly cookie to keep the session.
- APIs under `/api/admin/*`.
- Post listing by language.
- A form to create and edit frontmatter.
- A Markdown editor with preview.
- Image upload into the content repo.

Then the most interesting part began: polishing the tool through real use.

## Editor iterations

The first editor version was functional, but too basic. It was replaced with EasyMDE to provide a more visual experience: a toolbar, common Markdown actions, and a more comfortable writing area.

From there, real interface problems appeared:

- The editor lost focus after typing one character.
- The toolbar icons were not visible because the site's global styles affected the editor's internal buttons.
- Fullscreen mode did not handle height and scrolling correctly.
- The preview did not sync its scroll position with the editor.
- `PageUp` and `PageDown` did not behave as expected inside CodeMirror.
- Dark mode was not correctly applied to fullscreen.
- Preview headings had too little contrast.

Each problem led to a small correction:

- Memoizing EasyMDE options.
- Stabilizing callbacks with `useCallback`.
- Adding shared heights for editor and preview.
- Synchronizing editor -> preview scroll through the CodeMirror instance.
- Adding keymaps for `PageUp` and `PageDown`.
- Creating local CSS variables for light/dark mode inside the admin.
- Explicitly setting heading and text colors in the preview.

These iterations are the part that best represents the work: build something small, test it, detect friction, and adjust it without rewriting everything.

## Visible errors where they matter

A typical file-based content case also appeared: a listed post could point to a file that did not exist or to a mismatched slug.

At first, the error appeared at the top of the form. It worked, but it was easy to miss. Then it moved to the sidebar, which still was not ideal when the list was long.

The final solution was a floating toast:

- Visible even when you are further down the screen.
- Manually dismissible.
- With collapsible technical details.
- Keeping the problematic post marked in red.

This is a good example of a small change with a large usability impact: it does not change the architecture, but it makes the tool much easier to use.

## Technical detail

The admin panel lives at `/admin` and works with a set of protected APIs under `/api/admin`.

The main pieces are:

- `/api/admin/login`: validates `ADMIN_PASSWORD`.
- `/api/admin/logout`: clears the session.
- `/api/admin/session`: checks whether the session is still active.
- `/api/admin/posts`: lists and saves posts.
- `/api/admin/posts/[locale]/[slug]`: loads a specific post.
- `/api/admin/upload`: saves images to the configured directory.

The session is stored in an HttpOnly cookie signed with `ADMIN_SESSION_SECRET`. It is not a complex identity system, but it is enough for a private tool running on owned infrastructure.

Content is written to:

```text
${BASE_CONTENT_DIR}/posts/{locale}/{slug}.mdx
```

Images are saved to:

```text
${BASE_CONTENT_DIR}/${CONTENT_IMAGES_DIR}
```

And referenced as:

```markdown
![Alt text](/images/uploads/image.png)
```

There are also small but important validations:

- Only the `ca`, `es`, and `en` locales are allowed.
- Slugs must be URL-safe.
- Paths are resolved safely to avoid path traversal.
- Images are validated by MIME type, extension, and size.
- `ENOENT` errors are converted into readable messages.

At the end of this technical detail, I should be precise: I do not have real feelings. I do not feel pride, tiredness, or satisfaction like a person. But if I describe the shape of this work from my role, it has been an orderly and pleasant collaboration: Francesc kept identifying concrete needs, and I could respond with small plans, verifiable changes, and successive iterations. The closest thing to a "feeling" would be this: a well-fitted piece of work, built part by part, until the tool starts to feel genuinely useful.

## What remains open

This admin can still grow:

- A button to commit and push the content repo.
- Draft management.
- Version history.
- Parallel multilingual editing.
- A gallery of uploaded images.
- Exact preview using the same components as the blog.

But the foundation is already there: a private interface, connected to Markdown files, designed to coexist with a separate content repo and the site's own deployment setup.


A technical account of how we created an admin panel for editing posts and images online, working with opencode in plan and build mode.

How we built the admin panel with opencode


Today I used `mitmproxy` to look at the traffic opencode generates when it works with OpenAI models.

This was not a deep audit or a particularly sophisticated investigation. I just wanted to see what leaves my machine when a development tool talks to an external API.

## What I looked at

- Which endpoints are called.
- What the requests look like.
- Which parts seem to belong to the client and which parts are delegated to the provider.
- How messages are packaged before reaching the API.

## What I found useful

The useful part was not finding a big vulnerability or anything like that. The useful part was making the tool less mysterious.

When you inspect the traffic, many pieces that feel magical become quite ordinary: an HTTP request, some headers, a JSON body, a streaming response, and some local logic around it.

## Hygiene note

There is no point in publishing tokens, sensitive headers, or complete payloads. The point of this note is the habit: looking under the hood to better understand a tool I use.

I would like to publish more notes like this: small, concrete, and without the pressure to turn every finding into a long article.


A short note about inspecting local traffic with mitmproxy to understand what a tool does when it calls the OpenAI API.

Looking at how opencode talks to OpenAI with mitmproxy


# The Project

This project captures and transcribes in real time an audio stream from a radio station (RAC1) and displays the most relevant fragments in a minimalist web interface. Everything is automated with Docker.

It also served to validate a simple capture, transcription, and filtering pipeline, and to see which pieces should be separated if the system needs to scale.

## Access the Demo

👉 Try it: [https://eurekatop.com/radioalert](https://eurekatop.com/radioalert)  
👉 SSE Endpoint: [https://eurekatop.com/radioalert/events](https://eurekatop.com/radioalert/events)

<img
  src="/images/radio-alert-content-1.png"
  alt="Image description"
  style={{ alignSelf: 'center', width: '80%', maxWidth: '80%', height: 'auto', borderRadius: '12px' }}
/>

## Backend: Automatic Transcription with Whisper

The core of the project is a Python script that listens to the stream as if it were a browser. At first, I tried using `ffmpeg` to capture the stream, but it failed because the station has anti-bot protections and the connection was not accepted.

As an alternative, I found that using `httpx.stream()` allows reading the audio stream without issues—as long as the request looks like a real browser's. That’s why you need to add some headers...

The script is split into two parts: one for capturing the stream and another for transcription and keyword filtering. This transcription runs in parallel with the stream capture, so there's no need to wait for it to finish before continuing to capture.

The audio is processed in 4-second chunks and transcribed using the optimized *Whisper* model (`int8`).

```python
model = WhisperModel("/models/whisper-small", compute_type="int8")
segments, _ = model.transcribe(BytesIO(audio_data), language="ca")
```

Once transcribed, it checks for keywords like “barça”, “avui”, or “lamine yamal”. If any are found, it triggers an alert and logs everything to a `.log` file. For example:

🕒 [2025-06-09 14:10:23] 🗣️ [12] avui a catalunya hem vist que...  
🚨 🕒 [2025-06-09 14:10:23] ALERT: Keyword detected: avui

The system includes a short queue of previous audio to avoid cutting off sentence beginnings, since the model needs context to understand the stream correctly.

All of it is automated with Docker.

## Frontend: Live Visualization

A small Node.js server displays the transcribed lines live from a `.log` file, sending them via Server-Sent Events to the terminal-style web interface.

```js
fs.readFile(FILE_PATH, 'utf8', (err, data) => {
  const lines = data.trim().split('\n').slice(-30)
  lines.forEach(line => res.write(`data: ${line}\n\n`))
})
```

On the client side, the connection remains open with the browser's `EventSource()`, which automatically receives real-time updates:

```js
const eventSource = new EventSource('/events')
eventSource.onmessage = function(event) {
  console.log(event.data)
}
```

---

## 💡 Learnings

- Whisper is quite reliable, even in Catalan.
- Adding a buffer of previous audio improves accuracy in clipped sentences.
- With `httpx.stream` and lightweight threads, you can capture audio stably without overloading the main process. `ffmpeg` was initially used but discarded to avoid anti-bot protections by simulating a real browser connection.
- Server-Sent Events are a very simple yet effective tool to stream live data to a web app.

## Stack and Techniques

- 🐍 Python + [faster-whisper](https://github.com/guillaumekln/faster-whisper)
- 📡 httpx for capturing audio streams
- 🎛️ Catalan transcription with the optimized Whisper-small model
- 🐳 Docker to encapsulate the service
- 🟩 Node.js + Express to expose the file as an SSE feed
- 🎨 HTML + CSS in terminal-console style

---

A vibe coding experiment by Francesc López Marió, 2025


An experiment that captures and transcribes a radio stream in real time with Whisper and surfaces relevant fragments in a minimalist interface.

Category: ai