Creating decibel meter using Claude Code Agentic tool

5-minute read
Cloud • GenAI • LLM
Claude • GenAI • LLM • AgenticAI • ClaudeCode • Anthropic

Claude Code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster through natural language commands.

For the last few weeks, I have been experimenting with Claude Code. The more I use, the more I am in awe of this product. It is not perfect but almost there. Works very nicely with small codebase.

Idea

Yesterday, I wanted to build a decibel meter app for my kids to know about decibels, how sound is measured and just to give them a new toy to play with. For me, I was already playing with Claude code, the agentic coding toy :)

Requirements

I wanted a simple browser-based decibel meter that uses my device’s microphone to measure sound levels.

  • App must use the Web Audio API to access microphone data.
  • I am okay with approximate decibel measurements as this will not be calibrated.
  • No data must be stored or transmitted - all processing must happen locally in my browser.

My App building process

Went into my codebase for my blog, opened Claude Code and started prompting to it. After a few revisions the first version was ready in 30 mins and $1.34. It added 560 lines and removed 169 lines in total.

I have reviewed the code, tested the functionality. Yesterday I learnt that browsers do not allow microphone access to localhost or HTTP websites. Only HTTPS websites are allowed. I had to copy paste my code into Codepen to test it before pushing into production. After verifying, I had published my project.

Cost

I like the handy /cost command to get the amount I burned on this toy project for that session. You also get the final costs when you exit the claude code.

> /cost
  ⎿  Total cost:            $1.34
     Total duration (API):  5m 5.9s
     Total duration (wall): 36m 57.8s

Version 1

Here is my first version UI.

first-version

Real World Feedback

When I tested it in my mobile, I realized that the sensitivity for normal voice was very low and the decibel meter was not moving at all. This was not a usable app, if the decibel meter barely moved.

Now was the time for version 2 of the decibel meter app. With the real world testing I had new set of requirements to make it any useful. Also the decibel meter was showing very tiny fraction for the normal voice range.

Version 2

Now for the version 2, based on my testing, real world feedback had a new set of requirements. The long vertical decibel meter was not usable. So the next way to represent sound was to use a speedometer. Also the sensitivity should be high so that there is more spectrum for normal voice range and lesser for loud or extremely loud sounds. If there was an option to set microphone sensitivity, then it would be even better.

The version 2 took several iterations as old code must be removed and new functionality added. Spent nearly 50 minutes to get it working.

Continuous feedback

While using Claude code, realized that I was practically testing the app UI after every iteration of code change, checking for errors in console logs, and prompting it to fix those errors.

Gotchas

One time, I didn’t realize the app was using old version of javascript and I thought the app was not working. Claude Code was trying to fix a non-existent error, happily following my instructions and generating or modifying code continuously. After opening local version in a private window to get rid of cache and cookies, it started working. This could have saved me 15 mins if I had noticed earlier.

So be careful to verify and test properly. Currently, Claude code will generate or modify code if you say it is not working.

The Final UI

After several iterations and centering the needle, fixing the needle size, colors, shape of speedometer and 50 minutes of my time, got below UI as version 2.

version2

Decibel Meter project

Here is my Decibel meter project if you want to try and check it.

  • Note that it is not been calibrated and the values are approximate.
  • No data is stored or transmitted - all processing happens locally in your browser

Version 2 Cost

V2 cost
Total cost:            $2.32
Total duration (API):  12m 14.8s
Total duration (wall): 50m 10.9s
Total code changes:    1373 lines added, 501 lines removed

Other Projects

I prefer building apps to solve my problems or create apps for my kids to play or learn. These days I am only using Claude Code agentic coding tool. I like working in terminal and Claude code runs entirely in terminal, no IDE, which works perfectly for me.

I have built Cookie consent functionality for my blog. Also built Markdown Editor to help me while writing my blogs in markdown and Classic Snake Game for my kids to play.

All these three apps have been built using Claude Code and spent less than an hour to get it published. End-to-end, from ideation to running in the web and using it in my Mobile/Mac.

Final Thoughts

These days, I started coding or should I say prompting a lot and generating lot of code using Claude Code than before. I am constantly on the lookout for the next app idea to implement. Building feels great. Seeing end-to-end working solutions feels great.

Claude code is not cheap. It is addictive as you literally have a AI coder at your disposal.

Your experience

How was your experience with Claude Code? Have you used any other agentic coding tools?

Follow me

If you are new to my posts, I regularly post about AWS, EKS, Kubernetes and Cloud computing related topics. Do follow me in LinkedIn and visit my dev.to posts. You can find all my previous blog posts in my blog