Inspiration

It started on a Tuesday night, around 11 PM, with my younger cousin in tears over her physics homework.

She had a test the next morning on Newton's third law. I sat down, opened her textbook, and read the definition out loud: "For every action, there is an equal and opposite reaction." She nodded. I asked her to explain it back. She couldn't.

So I tried the math. \( \vec{F}{AB} = -\vec{F}{BA} \). Vectors, equal magnitude, opposite direction. More nodding. More confusion.

Then I gave up being a "tutor" and just said:

"Okay, imagine you're standing on a skateboard and you shove a wall as hard as you can. The wall shoves you back just as hard — that's why you roll backward. The wall didn't do anything special. It just pushed back."

Her eyes lit up. She got it. Instantly.

And I just sat there thinking — the concept didn't change. She didn't change. The explanation changed.

That's the thing nobody talks about. Every textbook gives you one explanation. Every YouTube video gives you one explanation. Every teacher in a classroom of 40 kids gives one explanation. But brains don't work the same way. Some kids think in steps. Some need a story. Some need to literally see it drawn out. If the one explanation you happen to get doesn't match how your brain works — you're stuck. And worse, you start to believe you're just "bad at" the subject.

I'm from Bangladesh. I've watched friends quietly fall apart during SSC and HSC prep. I've seen kids in India grind themselves down for JEE Mains. Students everywhere, completely convinced they're not "smart enough" for STEM.

They're not dumb. They never got the explanation that clicked for them.

So I built Study Dost AI. Dost means friend in Bengali — because honestly, that's all a good tutor really is. Not a lecturer. Not an authority figure. Just a friend who tries a different way when the first one doesn't land.


What it does

You type in any concept you're stuck on. Study Dost explains it three different ways at once:

  • 📝 Step-by-step — for the methodical thinkers
  • 🌍 Real-world analogy — for people who need a story to hang ideas on
  • 🎨 Visual cue — a sketchable diagram for the visual learners

Then there's a practice problem generator with three difficulty tiers. Easy. Medium. Hard. The "Hard" tier auto-adapts to your country — in India it matches JEE/NEET MCQ format, in Bangladesh it follows the HSC Creative Question structure, globally it stays generic high-school level.

There's an "Explain Like I'm 10" button for when even the simple version isn't simple enough. Voice input and output for hands-free studying. And a full gamification layer — XP, levels, daily streaks, badges, confetti — because if a student doesn't want to come back, none of the educational stuff matters.

The architecture is split: a static frontend (hosted at samiahrafnirob.com/study-dost/) talking to a FastAPI backend that wraps DeepSeek-V3 via Featherless.ai.


How I built it

Just me. On weekends. Between regular work commitments. Lots of chai.

The Backend

FastAPI in Python. I picked it partly because the auto-generated Swagger UI at /docs genuinely saved me hours of debugging — I could test every endpoint without writing a single curl command.

The core of the whole project is prompt engineering. I wrote a SYSTEM_TUTOR persona and three carefully tuned templates:

triple_explanation_prompt(concept, subject, country)
simpler_explanation_prompt(concept, prior_explanation)
practice_problem_prompt(concept, difficulty, country)

Each one nudges the LLM toward a structured response I can parse with <<<TAG>>> markers. I also built multi-key failover — if one API key hits a rate limit, the client rotates silently to the next. The student never notices anything happened.

The model is deepseek-ai/DeepSeek-V3-0324. It handles graduate-level math — even something nasty like Maxwell-Ampère's law:

$$\nabla \times \vec{B} - \frac{1}{c^2}\frac{\partial \vec{E}}{\partial t} = \mu_0 \vec{J}$$

…but it's affordable enough that I can keep the whole tool completely free. That part mattered to me. A lot.

The Frontend

Vanilla HTML, CSS, and JavaScript. Deliberately. No React. No build pipeline. No node_modules folder eating 400MB. I wanted a student on a slow Bangladeshi internet connection with a 2GB RAM Android phone to get a fully loaded page in under 2 seconds.

Stack:

  • marked.js — Markdown rendering
  • KaTeX — math (so \( E = mc^2 \) actually looks like math)
  • highlight.js — code syntax highlighting
  • DOMPurify — XSS protection on rendered LLM output

That's it. No framework. No bundler. Just plain old web tech doing what it's been doing since 2005.

Deployment

This is the part that genuinely surprised me. The frontend lives on InfinityFree (free static hosting on my own domain). The backend needs Python, so it runs on a Windows RDP. Connecting them required HTTPS — browsers silently block mixed-content requests — which I solved with Cloudflare Tunnel.

Free HTTPS. No port forwarding. No SSL certificate headaches. I now recommend it unprompted to literally everyone.

Gamification

Pure Canvas API and CSS keyframes. No game engine. Just math:

$$XP_{\text{next}} = 100 \cdot 1.5^{\text{level}}$$

…and a confetti particle system I wrote from scratch at 3 AM when I probably should have been sleeping.

function spawnConfetti(x, y) {
  for (let i = 0; i < 80; i++) {
    particles.push({
      x, y,
      vx: (Math.random() - 0.5) * 12,
      vy: Math.random() * -15 - 5,
      gravity: 0.4,
      color: pick(PALETTE),
      rotation: Math.random() * Math.PI * 2,
    });
  }
}

It feels good. It rewards the kid. It works on a $50 Android. That's all I wanted.


Challenges I ran into

1. The LLM refused to follow my formatting

I asked for <<<STEP_BY_STEP>>> tags. The model used **Step-by-step:**. I asked again, more firmly. It used ### Step by Step. I was extremely explicit the third time with examples. It used [Step-By-Step]:.

After losing three nights to this, I gave up trying to dominate the model and wrote a multi-pattern parser that recognizes all the variations — synonyms, fuzzy label matching, different casing — with a graceful fallback that dumps the raw output rather than crashing.

Lesson learned: don't fight the model. Meet it where it is.

2. CORS, mixed content, and several hours of staring at DevTools

Frontend on https://. Backend on http://my-rdp-ip:8000. The browser silently blocked every single request. No error in the console. No failed network request. Just… nothing happening.

It took me hours to realize the browser was quietly refusing the mixed-content request by design. Cloudflare Tunnel fixed it in 10 minutes.

I now bring this up in conversations where it's not relevant.

3. Mobile blur on budget phones

I had backdrop-filter: blur(2px) on the mobile sidebar overlay. On an iPhone it looked gorgeous. On my friend's $80 Android, the entire menu text came out blurry because the GPU couldn't isolate the compositing layer properly.

The fix was tiny:

/* Kill the blur on mobile */
.cc-backdrop { background: rgba(0,0,0,0.65); }

/* Force GPU compositing */
.cc-sidebar {
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

Three CSS properties. Massive real-world impact.

4. The loading spinner that refused to disappear

I'd toggle loadingBox.hidden = true. The spinner stayed visible. I'd inspect element. The hidden attribute was there. The spinner kept spinning.

It turned out .cc-loading { display: flex } was overriding [hidden] { display: none } because of CSS specificity rules. One line fixed it:

[hidden] { display: none !important; }

Sometimes the bug is so simple it's insulting.

5. Windows batch scripts and parentheses

My install.bat had this line:

if exist .venv (
    echo Found existing virtual env (.venv). Reusing it.
) else (
    ...
)

cmd.exe read the inner (.venv) as a nested command group and crashed with the immortal error message: ". was unexpected at this time."

I spent a full evening on this. I have permanent trauma around .bat files now.


Accomplishments that I'm proud of

  • The triple explanation works reliably. On graduate-level physics. On basic algebra. On everything in between. The core promise of the product actually holds.
  • Country-aware difficulty is real. Switch to Bangladesh and Hard problems become HSC Creative Questions. Switch to India and you get JEE/NEET MCQs. Same backend. Same model. Smarter prompts.
  • It's fast on slow connections. Lighthouse 95+ on throttled 3G. No framework bloat.
  • It's genuinely free. A student in rural Bangladesh can use this on a $50 phone without paying anything, ever. That mattered to me from day one.
  • The mascot. It's literally just CSS and keyframes, but watching it react to loading states makes the whole site feel alive. Worth every minute.

What I learned

  • Prompt engineering is actual engineering. Writing a good prompt is harder than writing the code that calls it.
  • Build your parser to handle the LLM breaking your rules. Because it will. Repeatedly.
  • Vanilla JS is underrated. I shipped faster, smaller, and more accessible than I would have with a framework.
  • HTTPS matters even on hobby projects. Just learn Cloudflare Tunnel once and you'll use it forever.
  • Students don't close "fun" apps. Confetti and badges aren't decoration — they're the retention mechanism. Engagement isn't a nice-to-have; it's THE feature.
  • Build for the worst phone in the room. If it works on a $50 Android, it works everywhere.
  • The simple bug is always last. And it's always one line.

What's next for Study Dost AI

  • 🇧🇩🇮🇳 Bengali and Hindi UI — not just English explanations, but the interface itself in the student's native language
  • 👥 User accounts — XP, history, and favorites that follow you across devices
  • 📄 PDF export — print your explanations as offline study notes
  • 🏆 Quiz mode and leaderboards — friendly competition between friends, classes, schools
  • 🤝 Study rooms — collaborative sessions where a few friends can work through a problem together with the AI moderating
  • 📱 Native mobile app — React Native, offline mode, streak notifications
  • 🎓 Teacher dashboard — anonymized, aggregated data on which concepts a class is stuck on most

The actual goal:

Make Study Dost AI the first place a confused student reaches for — in any language, on any device, anywhere in the world.

Because no kid should ever have to believe they're "bad at" a subject just because nobody explained it in a way that made sense to them.


Built solo, with chai and stubbornness, by Sami Ahraf Nirob 🇧🇩

🔗 Try it live → samiahrafnirob.com/study-dost

Built With

Share this project:

Updates