DEV Community: Allan Dorr

Chad Vocab: Vocabulary practice with local Gemma!

Allan Dorr — Sun, 04 Oct 2026 23:51:49 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

Chad Vocab is a self-hosted vocabulary trainer I built for Chad, a friend who is learning Polish.

He is able to enter his own language pairs, or photograph a text book page, which gets converted into a vocabulary deck. He can make other language pairs and other decks, if needed. In this demo, he gets English cues and answers in Polish — by typing or speaking. Near-miss answers are graded by an open-weight Gemma model running locally through LM Studio. Spoken answers go through optional ElevenLabs Scribe when he pastes his own API key, otherwise open Whisper via Scriberr. He can also photograph a textbook page; Gemma vision proposes pairs, and he reviews them before anything hits the deck.

It does not have to be big. It has to matter to him: a private practice loop that keeps his speech and photos on a household laptop, not a cloud AI subscription.

Demo

Live app: https://vocab.slotify.work/

Demo login (registration is closed on the public tunnel):

Username: chad
Password: mXz1cvwHZZgg

The app runs on my machine behind a Cloudflare Tunnel to vocab.slotify.work, so it is only reachable while the host is awake for judging. LM Studio and Scriberr stay on localhost and are not exposed. LM Studio and any Open Whisper endpoint could potentially be used.

Quick path for judges: log in as chad → practice an English cue in Polish → try a close-but-wrong spelling and watch Gemma accept or correct → open Deck to see the starter list, add/remove words, scan a vocab page or generate audio.

Video Demo

Code

aldorr / chad-vocab

Open-source Polish vocab trainer for Chad — local Gemma + Whisper

Chad Vocab

Open-source, self-hosted vocabulary trainer built for Chad while he learns Polish from English cues.

English → Polish (or any language pair you set)
Type or speak — spoken answers go through local Scriberr (Whisper)
Fuzzy grading — LM Studio + an open model such as Gemma accepts near-misses
Photo → deck — Gemma vision reads a textbook page; you review before import
Optional accents — ElevenLabs TTS / Scribe per account (bring your own API key)
Mastery queue — needs-practice first; learned cards rare; last 5 mixed with review

Live demo (while the host machine is awake): https://vocab.slotify.work/

MIT licensed. Self-host forever — a later hosted free/paid offering (if any) does not close the source.

Quick start

Requirements

Node.js 20+
Scriberr running locally (Homebrew: brew tap rishikanthc/scriberr && brew install scriberr)
LM Studio with an open model loaded (Gemma recommended) and the local server started
Photo →…

View on GitHub

Repo: https://github.com/aldorr/chad-vocab

Stack: Vite + React UI, Hono API, SQLite. MIT license.

How I Built It

Open-source AI is not a bolt-on — it is the grading and photo path:

Gemma via LM Studio — fuzzy answer grading and textbook photo OCR (server/src/lib/lmstudio.ts). Without a vision-capable Gemma load, photo import does not work.
Scriberr / Whisper — local speech-to-text fallback when no ElevenLabs key is on the account.
Optional ElevenLabs — per-account encrypted API key on Progress for accented word audio and faster Scribe STT. Chad can add his own key; the open path still works without it.
Demo hardening for the challenge — REGISTRATION_ENABLED=false on the public tunnel, a seeded chad login with an English→Polish starter deck, branding as Chad Vocab.

Why Does Open Innovation Matter?

Chad’s practice data should not need to leave the house. Local Gemma means:

spoken answers and textbook photos stay on the laptop
no paid cloud model required to practice
we can swap models in LM Studio without rewriting the app
anyone can clone the MIT repo and run the same stack

A closed API would be easier for a weekend demo URL. It would also send a friend’s language practice to someone else’s server. Open-weight inference is what made “build it for Chad, keep it private” possible.

My Agent Session

Building Chad Vocab for Hacktoberfest Weekend

You

We need to submit this for the Hacktoberfest Weekend Challenge: Build for a Friend. The app is for Chad — he's learning Polish. Demo at https://vocab.aldorr.net/ with one login, registration closed.

Agent

Checking the challenge rules and auditing the workspace against the prompt: open-source AI at the core, built for one real person during the challenge window.

▸ get_challenge_details id=78 Hacktoberfest Weekend

Input

id=78 Hacktoberfest Weekend

Output

Prompt: build with open-source AI for a friend. Theme: Build for a Friend. Required tag #hf26challenge. Deadline Oct 5 2026 06:59 UTC. Writing quality weighted most heavily. Prize categories include Best Use of Gemma, ElevenLabs, Entire.

You

Stick with open source at the core and optional ElevenLabs per account. This is the Chad Vocab App. Login should be for him. Close signup so the public tunnel doesn't get flooded.

Agent

Implementing Chad Vocab branding, REGISTRATION_ENABLED=false for the demo, and seeding username chad with an English→Polish starter deck. Public repo at github.com/aldorr/chad-vocab. Live demo credentials go in the DEV post only, not in git.

▸ seed_and_lock npm run seed:chad; REGISTRATION_ENABLED=false

Input

npm run seed:chad; REGISTRATION_ENABLED=false

Output

Seeded chad with Polish←English deck (12 cards). Registration returns 403 on the public tunnel.

▸ github_push gh repo create aldorr/chad-vocab --public --push

Input

gh repo create aldorr/chad-vocab --public --push

Output

https://github.com/aldorr/chad-vocab

Rebuilt the production client so https://vocab.aldorr.net/ shows Chad Vocab with demo-login-only. Verified Chad can log in and practice Polish from English cues. Staging the DEV challenge draft next for the user to edit before publish.

Prize Categories

Best Use of Gemma — local Gemma for fuzzy grading and textbook photo extraction
Best Use of ElevenLabs — optional per-account TTS / Scribe for accented practice (bring-your-own key)
Best Use of Entire — agent session embedded above

More...

Please let me know what you think, how you would improve it, and if you found this at all useful. Thanks!

Upload files to the blockchain (Part 1)

Allan Dorr — Mon, 30 Aug 2021 12:29:08 +0000

Now let's get our hands dirty

So hopefully I've piqued your curiosity and you want to jump in now and join in on the fun.
If you want to read my wee rambling on the build-up, see previous post:

Allan Dorr

Aug 25 '21

Filesharing with web3.storage and Vue.js (Part 0)

#vue #database #tutorial

2 min read

Reconsidering

After fooling around and installing, then following some tutorials and attempting to build the first steps in the project, I figured I don't actually want to make a WeTransfer clone, but something any developer can take, add their own Token and fire up their own WT-Like-Thing.

Identifying more issues

I've followed the tutorials and have had to update few things to get it working with Vue 3. These, I will cover when I stumble across them again.

Step 1: Installing

Create a web3.storage account
Get an API Token (Including 1TB of storage!)
If you haven't done so already, install: Node version 14 or higher and NPM version 7 just to be sure we're on the same page. I use nvm, so it's pretty easy to switch between versions.
Create your Application (I used the vue-cli to generate one: i.e. vue create web3-storage-tutorial)
Install web3storage npm install web3.storage in the app's folder

Step 2: Javascript

Create web3storage.js
I put this in a /src/utils folder. Maybe I'll have more utils and put them in there. I don't know. It seems like a good enough place for now.

Add the following code:

// web3storage.js
import {
    Web3Storage
} from 'web3.storage/dist/bundle.esm.min.js'

This is to import web3storage for Vue 3. We have to use the pre-compiled bundle, otherwise Webpack will go all wonky and we'll get stupid errors. We don't want stupid errors. They lead us nowhere.

Now we want to export our code for use in our Vue modules, so we add this under the import:

// web3storage.js
export default {
  // Code for accessing and uploading files goes here.
}

Now inside of this export we're going to create a couple of functions that will make sense in a minute:

    getAccessToken() {
        return process.env.VUE_APP_WEB3STORAGE_TOKEN
    },

    makeStorageClient() {
        return new Web3Storage({
            token: this.getAccessToken()
        })
    },

getAccessToken will read our web3storage access token from the .env.local file. For Vue 3 we have to prepend it with VUE_APP_ in order for it to load. We'll need this token in a minute.

makeStorageClient we will need whenever we want to upload something. Again, we'll be needing this soon.

Soon is now, so we need these functions

I'm going to already let you know that I basically copied these functions from the web3.storage docs. I'm hoping we can use them as a basis, though, and make something great!

      async storeWithProgress(myFileList) {
        const files = [...myFileList]
        // show the root cid as soon as it's ready
        const onRootCidReady = cid => {
            console.log('uploading files with cid:', cid)
        }
        // when each chunk is stored,
        //update the percentage complete and display
        const totalSize = files.map(f => f.size)
                          .reduce((a, b) => a + b, 0)
        let uploaded = 0

        const onStoredChunk = size => {
            uploaded += size
            const pct = totalSize / uploaded
            console.log(`Uploading... ${pct.toFixed(2)}% complete`)
            // TODO: can we get this to show in browser & update?
        }

        // makeStorageClient returns
        // an authorized Web3.Storage client instance
        const client = this.makeStorageClient()

        // client.put will invoke our callbacks during the upload
        // and return the root cid when the upload completes
        return client.put(files, {
            onRootCidReady,
            onStoredChunk
        })
    },

This is the method that uploads our files and then responds to our app with the CID. we need this to display, and make a link. Right? Yes, we want to be able to send the link to cool people...

And, here's our JavaScript so far:

Step 3: Feed it something

Now this beast we are creating wants to be fed. It likes files, so we want to give it some files.
And then finally we want to tell it what to do with said files (Upload them and make them available to the world… to the solar sisters, to the universal compadre-hood of file-sharing-ness. Hello aliens. See our files!)

Right.

We scaffolded out our project with vue-cli, so it has almost everything I need. Oh shoot. Except some CSS. I'm going to go ahead and some CSS reset and my CSS Framework I'm using.

Some CSS first

  npm install equal-vue

And we update our main.js file to look something like this:

// Regular app stuff
import { createApp } from 'vue'
import App from './App.vue'
// Equal stuff here
import Equal from 'equal-vue'
import 'equal-vue/dist/style.css'

// Notice **.use(Equal)**
createApp(App).use(Equal).mount('#app')

Now some Vue

We want to render a button that triggers a file input. Probably we should be able to select multiple files and upload them all to the same cab.

In the pre-scaffolded Vue project there is the App.vue which loads HelloWorld.vue.
Let's rename this to UploadFiles.vue
Remember: in App.vue we should change HelloWorld to UploadFiles.

In UploadFiles, we basically want a button that opens a file dialog when we click it, then we want to return the file and then upload it with another button.

Basic html structure

<template>
  <title />
  <preview />
  <button @click="file_select"/><button @click="upload") />
</template>

The button opens the file dialog. Then when we have some files selected, the upload button appears, and some image previews show up.

Let's try to get it to look something like this:

The following is what I turned UploadFiles.vue into:

<!--UploadFiles.vue-->
<template>
  <div class="hero">
    <h1>{{ title }}</h1>
    <it-divider />
    <it-alert
      v-if="my_thumbs!==null"
      iconbox type="primary"
      title="Chosen Files">
      <it-avatar-group square>
        <it-badge position="top-left"
          type="primary"
          v-for="(thumb, i) in my_thumbs"
          :key="i"
          :value="i+1">
          <it-avatar
            square class="upload_preview"
            :src="thumb"/>
        </it-badge>
      </it-avatar-group>
    </it-alert>
    <it-divider  v-if="my_thumbs!==null" />
    <it-button-group>
      <it-button
        :type="my_thumbs!==null?'warning':'black'"
        icon="note_add"
        outlined
        @click="onPickFile">
          Select {{my_thumbs!==null?'New ':''}}Files
      </it-button>
      <it-button
        type="danger"
        icon="upload"
        outlined
        @click="onUploadFile"
        v-if="my_thumbs!==null">
          Upload Files
      </it-button>
    </it-button-group>
    <input
      type="file"
      style="display: none"
      ref="fileInput"
      accept="image/*"
      multiple
      @change="onFilePicked"/>
    <it-divider v-if="cid!==null" />
    <it-badge
      value="Copy link"
      type="success"
      v-if="cid!==null">
      <it-button
        @click="onCopyLink(cidLink(cid))"
        ref="cid_link">
          {{cidLink(cid)}}
      </it-button>
    </it-badge>
  </div>
</template>
<script>
import * as web3storage from '../utils/web3storage'
export default {
  name: 'UploadFile',
  components: {
    RevealCID
  },
  props: {
    title: String
  },
  data () {
    return {
      filelist: null,
      my_thumbs: null
      cid: null
    }
  },
  methods: {
    onPickFile () {
      this.$refs.fileInput.click()
    },
    onFilePicked (event) {
      const files = event.target.files
      this.filelist = files
      let data = []
      console.dir(files)
      for (let i = 0; i < files.length; i++) {
        console.log("File", files[i])
        data.push(URL.createObjectURL(files[i]))
      }
      this.my_thumbs = data
    },
    onUploadFile () {
      this.cid = web3storage.default.storeWithProgress(this.filelist)
      this.my_thumbs = null
      this.filelist = null
    },
    cidLink (cid) {
      return 'https://' + cid + '.ipfs.dweb.link'
    },
    async onCopyLink (textToCopy) {
      await navigator.clipboard.writeText(textToCopy)
      console.log(textToCopy)
      console.log("copied!")
    }
  }
}
</script>

A lot of code, but I think it's pretty straight forward, but I'll go through some of it, just for clarification.

HTML & Equal CSS

The it- tags are from the Equal CSS framework. We make an alert box with the images in it, which only shows up if we have images. The v-if="my_thumbs!==null" ensures this.

my_thumbs is set to null at first, until you've triggered the onFilePicked method.

We loop through the thumbnails with v-for, and beneath that we have our file select button, and our upload button (which also only shows when my_thumbs!==null).
Then, our markup has an invisible input file selector, we need that to be able to display our system's file select dialog. (If there's another way to do this, I'd love to hear from you.)
Finally, we have a place to display our link to the files when we get the CID back. And it is clickable to copy. Yay!

Javascript Data & Methods

The data is pretty clear... cid should hold a returned cid value once our files have been queued.

Then, I will run through our methods:

onPickFile

    onPickFile () {
      this.$refs.fileInput.click()
    },

This just issues a click command on our file input, to trigger a file dialog.

onFilePicked

    onFilePicked (event) {
      const files = event.target.files
      this.filelist = files
      let data = []
      for (let i = 0; i < files.length; i++) {
        console.log("File", files[i])
        data.push(URL.createObjectURL(files[i]))
      }
      this.my_thumbs = data
    },

This happens when the file input changes. This does two main things:

Our filelist is updated to contain the files we selected
Our my_thumbs contains a bunch of file blobs that we can then display in the upload preview.

onUploadFile

    onUploadFile () {
      this.cid = web3storage.default.storeWithProgress(this.filelist)
      this.my_thumbs = null
      this.filelist = null
    },

This is our simple upload method. It sets the cid to what we get returned when we call our storeWithProgress method from before. That method, we send our filelist.

Finally we set our my_thumbs and filelist to null, so our state resets.

Our returned data and copying links

    cidLink (cid) {
      return 'https://' + cid + '.ipfs.dweb.link'
    },
    async onCopyLink (textToCopy) {
      await navigator.clipboard.writeText(textToCopy)
      console.log(textToCopy)
      console.log("copied!")
    }

cidLink just returns the URL that a specific CID would have.
onCopyLink takes a some text (we are sending it one of these cidLinks), and copies it to the clipboard... assuming our super-modern browser supports such shenanigans.

I didn't do much css here today, besides the components I took from Equal. Of course, we'd want to do some more awesome stuff with that. For example, I added my own main.css file to add custom styles to center and pretty things up a bit.

If you'd like for me to cover more CSS, please comment.

For now, though, (in case you were following along and want to know how I made it look like that) here's a gist of my main.css:

Next steps

Tune in next time for these exciting topics:

Go back and return upload status and CID to interface.
- Realized we didn't get this to work yet!
List already uploaded files.
Create/save/retrieve shortened links. ___

File uploaded with App to web3.storage:
Sunset@Achterwasser - File uploaded with App

aldorr

Filesharing with web3.storage and Vue.js (Part 0)

Allan Dorr — Wed, 25 Aug 2021 12:24:44 +0000

The "Research"

Stumbling through devposts and fintech, I came across this site that claims you can "Build apps backed by Filecoin, no infrastructure required." Decentralized file storage based on digital coin technology. Automatic replication across network. Freeee*. Bam, I'm already sold and brainstorming project...

Ideas

Filestore for some database
Nextcloud clone
Wetransfer clone

Decision

Okay, for 1. I could consider implementing that sometime in the future for some project. But we want to do something a little fun...
For 2... too many variables. Too much to cover. Would eventually have to implement Desktop Client.
For 3... seems like a good fit. A simple file-sharing app.

Other considerations

A crazy-long URL like https://baf05eifw7aroo4aue6nmfn4llm4cxfbuumxxhz2qqfx6bo4yeax2pjpbde.ipfs.dweb.link/ is unwieldy, to say the least. Therefore we will need a link shortener involved somehow. I will have to read this post:

Building a Simple URL Shortener With Just HTML and Javascript

Palash Bauri 👻
Palash Bauri 👻

Palash Bauri 👻

Follow

Aug 16 '18

Building a Simple URL Shortener With Just HTML and Javascript

#urlshortener #javascript #html

110 reactions
19 comments

7 min read
Oh my, there's no encryption, and anyone who has my file's CID can access it. Plus, since I own the key from for all the CIDs, I can log in to web3.storage and see everything everyone has uploaded. Do I want to involve encryption? (Note: Warn users that they should (strong) encrypt their files before uploading.)
I'm going to have to choose some framework stuff, so I'm choosing Vue 3, plus Equal UI to try out and hope that it will make a few things easier. (Note: Probably you should use the UI framework you're familiar with. I chose Equal, because it seems to have the best support for Vue 3, whereas Buefy... which I would have loved to have used, I couldn't get set up with Vue 3.)

Before I get much farther in this, I'm going to take a breath and see if there's anything else I need to consider... Anonymous... Would that pose a risk of bad stuff happening on my account. Hmmm. I am not sure how to avoid this.

Stay tuned, for my little tutorial on how to make something along these lines:

DEV Community: Allan Dorr

Chad Vocab: Vocabulary practice with local Gemma!

What I Built

Demo

Video Demo

Code

aldorr / chad-vocab

Open-source Polish vocab trainer for Chad — local Gemma + Whisper

Chad Vocab

Quick start

Requirements

How I Built It

Why Does Open Innovation Matter?

My Agent Session

Prize Categories

More...

Upload files to the blockchain (Part 1)

Now let's get our hands dirty

Filesharing with web3.storage and Vue.js (Part 0)

Reconsidering

Identifying more issues

Step 1: Installing

Step 2: Javascript

Soon is now, so we need these functions

Step 3: Feed it something

Some CSS first

Now some Vue

Basic html structure

HTML & Equal CSS

Javascript Data & Methods

onPickFile

onFilePicked

onUploadFile

Our returned data and copying links

Next steps

Filesharing with web3.storage and Vue.js (Part 0)

The "Research"

Ideas

Decision

Other considerations

Building a Simple URL Shortener With Just HTML and Javascript