Wordslet

Motivation

Quizlet is quite popular for foreign language learning. But it has many limitations for free account. I want to create a small web app for Finnish learning.

Technology stack choice

Although it's easy to do it in Laravel as I am already very familiar with it, but I consider Laravel will be a little heavy for such a small web app. As I am familiar with React, Redux, React Hooks, it would be easy to develop the app by MERN (MongoDB, Express, React, Node). For styling, although the Bootstrap will be a good choice, but I decide to give TailWindCSS a shot. As TailWindCSS is a new way of styling comparing with SASS and it's quit popular. so the technology stack choice is MERN + TailWindCSS. Web Speech API and Google Cloud Text to Speech are used for pronunciation.

Demo

Youtube demo
Github Source Code

Updates

My kid doesn't recongize much chinese characters, I decided to add the audio for the word and definition. Initially I used the free Web Speech API, however, it has some limitations. e.g. Web Speech API only supports latest Chrome browser. Also, Web speech API has limited support for Finnish, the pronunciation is bad. So I decided to use Google cloud text to speech API, the quality is much better.

---