Building a Spelling Bee Dictation App: From Concept to Code

Background

Every year at my son’s school, they hold a spelling bee competition in two stages: the class level and the school level. In the first stage, children are given a list of fifty words; those who advance move on to the school level, where they practice with about 450 words.

While my wife usually trains our son, I occasionally help with dictation and correction. This task presents two main challenges: accurately dictating and correcting the words, and dealing with my son’s frustration when my pronunciation is off.

Wanting to automate this process, I decided to develop a dictation app over a weekend. In this blog post, I’ll share my journey in creating this tool.

Choosing the Right Approach for Text-to-Speech

Initially, I considered using free text-to-speech services like TTS Maker. However, this approach required regenerating and maintaining audio files every time a new word list was introduced.

During my research, a colleague suggested using the browser’s built-in SpeechSynthesis API. I quickly developed a prototype and showed it to my son, but he was disappointed with the pronunciation quality. This led me to seek another alternative.

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

Note: Although cloud-based text-to-speech services were an option, I wanted to avoid using my credit card to create an account, as I plan to publish the app online.

Continuing my search, I discovered Dictionary API, a free resource that, despite being somewhat robotic, received approval from my son as a decent practice tool (definitely better than my pronunciation!).

async function fetchData(word) {
    const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
    try {
        const response = await fetch(url);

        if (response.status === 200) { // Check if response status is 200
            return await response.json();
        } else {
            console.error('Non-200 response from API :', response.status);
            return -1; // Return null for non-200 status codes
        }
    } catch (error) {
        console.error('Error fetching data:', error);
        return -1;
    }
}

Static vs. Dynamic Web App

Given my experience with bundling Node-based applications, I could have built a dynamic web app. However, to avoid relying on cloud providers, I chose to develop a static web app.

After researching, I decided to use Cloudflare Pages for deployment, as I had already deployed a few sites using this service.

Developing the Web App

I created the web app using the Bootstrap framework for its ease of use. It took about one weekend to complete, and I demonstrated it to my son. He provided several suggestions for UI improvements, which I incorporated.

Database Considerations

During the demo, I realized that I needed to store the word list (incorrectly spelled words) persistently for future training. Since the app was developed as a static web app, third-party databases were not an option. As a solution, I implemented browser-based IndexedDB for persistent storage. This approach is limited to specific devices and browsers, but it suffices for now.

Dictation App URL

Dictation App

Future Improvements

While the app serves its basic purpose, there are several areas for enhancement:

• Improve pronunciation quality by using a better audio API
• Automatically track and store incorrectly spelled words for future practice
• Implement training and exam modes, and grade students based on their spelling accuracy

I hope this post provides insight into my development process and inspires others to create similar tools for educational purposes.