Code Bites: a quick challenge app for busy devs (made by a busy dev)
The idea for Code Bites started with a common frustration: I wanted to practice coding daily, but without the pressure of sitting down for an hour, watching a video, or opening a whole project. I just wanted something that would challenge me a bit and remind me I'm still sharp.
Most platforms are either too heavy or have an onboarding process that makes me give up right away. I just wanted a quick challenge and fast feedback.
🔨 How I built it
The app is built with React + Vite + Tailwind + TypeScript, packaged as a lightweight SPA, hosted on Cloudflare Pages. The idea from the start was: this app needs to open fast, run offline when possible, and have the UX of a browser extension, not a course app.
That's why I:
- Avoided any backend in the MVP.
- Modeled the challenges as
.json files, with a simple format:{
"id": "reverse-string",
"language": "javascript",
"title": "Reverse string",
"starterCode": "function reverse(str) {\n // write code here\n}",
"testCases": [
{ "input": "\"abc\"", "output": "\"cba\"" }
]
}
I load these challenges by language and keep all state in localStorage, including the user's streak.
This allowed me to focus 100% on the interface and the experience.
💡 Focus on Micro-UX: every second counts
Since the app's idea is to be used even during a coffee break, I started counting clicks and time until the first challenge was executed. I cut everything that got in the way:
No authentication
No profiles
No fake loading screens
No "start" button
You open it, and there's already a challenge. Solve it, get instant feedback. This helps devs maintain real streaks without becoming slaves to the system. The only gamification is the streak, and it only appears after the first challenge is solved. No frills.
📦 Chrome Extension
After using the app myself for a while, I realized it was perfect as a fixed tab in the browser. I decided to package the same build as a Chrome extension.
The secret here was adapting vite.config.ts to generate the Manifest V3 folder structure and reusing almost everything. The only separate parts were the popup and the icon; the rest is the same web code.
🎯 What's next
I have a lot of things in mind, but I don't want to bloat the project prematurely. The priority is:
Create challenge packs by topic (e.g., logic, arrays, strings)
"Recoverable" lost streak days (anyone who's used Duolingo will understand)
A "Challenge of the Day" mode with an optional leaderboard
Want to test it out?
👉 Code Bites on the Web
👉 Code Bites on the Chrome Web Store
If you have challenge ideas, send them my way on LinkedIn or via email. I'm collecting suggestions from people who genuinely want to use it daily.
Building this project helped me maintain a minimal practice routine, and maybe it'll help you too.
