Introduction
Since the beginning of 2025, AI agents have made dramatic progress. We're now living in a time where you can simply share an idea with an AI, and it will generate an application for you.
Although I’ve been casually programming for both work and fun, I had never created a full-fledged web application before. Web apps seemed a bit intimidating to me because of all the technical hurdles involved—authentication, databases, deployment—especially compared to command-line tools.
But thanks to the power of AI agents, I was able to build my first web app, and I’d like to share my experience.
The Web App: tokei-api
🌐 https://tokei.kojix2.net/
📦 GitHub: https://github.com/kojix2/tokei-api
It also generates badges you can embed directly into your GitHub README:
Why I Wanted GitHub Code Line Stats
Whenever I find an interesting project on GitHub, I usually clone the repository and run tokei to check how many lines of code it has. It gives me a rough idea of the project's scale and complexity. (Subjective, of course!)
- 0–1000 lines: likely a simple utility with a single function
- 2000–3000 lines: medium-sized tool with multiple features
- 5000+ lines: a well-structured project
- 10,000+ lines: large-scale library or application
- 20,000+ lines: likely built by a team for production use
Of course, business apps can easily go into the hundreds of thousands of lines, but most public GitHub repositories tend to be libraries or tools, not enterprise software.
tokei is easy to use:
git clone https://github.com/user_name/repo_name
cd repo_name
tokei
Sample output:
===============================================================================
Language Files Lines Code Comments Blanks
===============================================================================
Crystal 15 1319 966 165 188
CSS 1 211 165 11 35
...
Total 23 2006 1339 334 333
===============================================================================
You can also add the -f option to see line counts per file.
However, while browsing GitHub, switching to the terminal just to run tokei can be a bit of a hassle.
Concept and Development of tokei-api
So, I decided to build a web app that runs the tokei command on public repositories—no login required, no risk of exposing sensitive data.
I also added the ability to auto-generate badge code for embedding in README files.
Deployment on Koyeb
I chose Koyeb to host the app. It has a generous free tier and allows deployment in Washington D.C. or Frankfurt (Tokyo is available on paid plans).
Apps go to sleep after periods of inactivity on the free tier, but that’s perfectly acceptable for my use case. Koyeb automatically builds and deploys your app by connecting to your GitHub repo and using your Dockerfile.
Neon – Serverless PostgreSQL
Since persistent storage (volumes) on Koyeb’s free plan requires payment, file-based databases like SQLite get reset on every deploy. So, I used Neon, a serverless PostgreSQL provider.
Neon is also free and offers a region near Koyeb’s Washington D.C. servers (Ohio). While the free plan doesn't allow IP whitelisting, that's fine in this case since all data is public anyway.
Crystal Language and the Kemal Framework
You might not be familiar with Crystal, but it's a statically typed language with syntax very similar to Ruby. It offers much better performance, which is helpful for lightweight environments like free-tier servers.
I used Kemal, a Crystal framework similar to Ruby’s Sinatra:
👉 https://github.com/kemalcr/kemal
Crystal lacks a mature ORM like ActiveRecord, so it’s not ideal for large-scale apps. But for building small services with help from AI, it’s a great fit.
Note: While Crystal’s compiler requires a decent amount of memory, Koyeb handles builds in a separate environment, so it worked fine even on the free plan.
Domain Setup
I used my pre-owned domain kojix2.net, which I registered via Onamae.com.
Koyeb provides CNAME setup instructions in its UI, so configuring DNS on Onamae.com was straightforward.
HTTPS was automatically enabled using Google Trust Services certificates.
📝 Side note: I realized I had accidentally subscribed to an unnecessary hosting plan through Onamae.com in the past. Their UI sometimes adds items to the cart without notice—I'll be more careful going forward.
AI Cost
I tried to use as many free services as possible, but the AI itself wasn’t cheap.
I mainly used Claude 3.7 Sonnet from Anthropic for detailed refinements, and I estimate the total cost came close to ¥10,000 (~$70).
That said, Claude’s output quality is top-notch—significantly better than OpenAI for this task. I now understand why so many people are turning to Claude.
Conclusion
This was my first time building and deploying a web application, and I was able to get it done!
It took about 6 hours for the initial implementation and another 4 hours of intermittent tweaks.
As someone who’s not a professional web developer, being able to create a functional service in a single day is a testament to how much the world has changed.
That said, this app only runs the tokei command. For a more serious web app with authentication and sensitive data, I would absolutely consult a professional for security best practices and proper code reviews.
Next, I’d like to try building an Android app or something more complex. Keeping up with the pace of AI is challenging, but I want to keep learning and building.
Thanks for reading. Have a great day!
Translated from my original Japanese article on Qiita, with the help of ChatGPT:
tokei-api というサイトを VSCode + Cline + Cluade 3.7 を使って Crystal + Koyeb + Neon で作成した話
Top comments (0)