History of Idiom
Background of project
Idiom is a project that I started not long after having learned the very basics of web development. The very first iteration wasn`t anything more than just a flashcard exercise which looped over an array of word objects (I had only just learned what arrays and objects were). The project only consisted of a simple html, css and javascript file and no frameworks, libraries, dependencies, tests, etc. The js only needed to handle reading properites from the indexed words in the array. There was no user input (apart from a few onClick events). The card didn't even have any flipping animation at first. It would simply show the translated word when clicked.
It was mostly just this.
dog
Still, I was proud of it and excited to develop it further. I made a point of integrating tools and concepts I would later learn into Idiom but always being careful not to get to far ahead of myself as I knew that I would end up with highly coupled code and a tangled frustrating mess.
Create React App
After I had learned the basics of react I decided to devlop Idiom further. This was when I defined the core set of exercises. There wasn't any routing at this point. Instead when the user selected a certain exercise, the page would re-render with the corrrect exercise UI and state. As I continued to learn more about react, I would add more features and improved component composition.
Redux for state management
This was my first instance of using Redux which significantly improved my way of thinking about not only how state is managed but how to think about the relationship between what happens in the UI, the structure of data, and handling global and local state. As this was my first implementation of Redux it was somewhat messy; also it probably wasn't really needed. However, I learned a lot through setting it up and making use of redux dev tools. Eventually I decided to move away from it for this project and make use of React's useContext hook.
A client only version
The demo is what I am using at the moment to get feedback from a small group of users. Before making final decisions about features, database schema and other aspects of the full stack app I wanted to use the app myself and get some input from other people. Creating this client side only version has allowed me to do that quickly.
Out in the wild
I'm currently working on turning this project into a full stack application. The MVP will include all of the current exercises seen in the demo along with a better UI/UX experience as the demo is a rough draft of sorts. Subsequent iterations will build on this and include more exercises, games, and tests. I'm also planning on creating features which allow users to paste texts from foreign language sources which they can then use to create an array of exercises built around larger chunks of language. Making use of AI to create gapped sentences from a user's vocabulary cards is also something I am looking into. My hope is to get a solid number of users on Idiom and have something which is hopefully useful and fun for them to improve their level in a foreign language. If I do that then I will have successfully merged my previous work as a foreign language teacher and my current work as a software developer.