How I Built a Free German Learning App with Firebase + Vanilla JS (No Framework)

I've been learning German for a while and couldn't find a tool that fit my workflow — most apps are either too gamified or locked behind paywalls. So I built my own: AlmancaPratik, a free web app for Turkish speakers learning German. Here's the stack I used and what I learned along the way. Stack Vanilla JS (ES Modules, no React/Vue) Firebase Auth (Google Sign-In) Firestore (user data — words, texts) GitHub Pages (hosting — completely free) Zero server costs. Zero monthly fees. Architecture Every user's data lives under their own Firestore path: users/{userId}/words/{wordId} users/{userId}/texts/{textId} Firestore Security Rules handle authorization — only the authenticated user can read/write their own data: jsmatch /users/{userId}/{document=**} { allow read, write: if request.auth.uid == userId; } No backend needed. The rules ARE the backend. The Interesting Part — Example Sentences When a user saves a German word, they can click it to see real usage examples. I pull these from two p