I build a simple Mnemonics app.

Title. I've known about mnemonics for years, and at some point I tried to get more into it, however, it is like exercise, where everyone knows that it is objectively good for (you), and often even more beneficial than conventional medicine, but at the end of the day it takes dedication and hard work to see results. That's the primary reason why I build this app; to give me an incentive to practice, and to get more experience with React.

Some people have had trouble understanding what the app is about, or even the concept of mnemonics itself. Instead of wasting time trying to explain why I would build something like this, I'd encourage (you) to watch this clip of a man memorizing 30 random images in 12 seconds. I hope I don't have to explain why this would be useful for something like learning languages.

Anyway, enough with the blogspam. The app is build with React for the frontend, and firebase for the backend. Sadly you need a google account to sign in, but I plan to change that in the future.

The home page has a component that fetches a random post from reddit, and a calendar that shows the training done that day.

On the navbar there's a dumbbell icon that takes you to the training area, which has links for the types of data you can train on. There are four; images, words, decimal numbers, and binary numbers. On each category page there are two buttons at the top, the training button, and the settings button.

The training button creates a new set of data, and then begins the training, which consists of animating the data elements in and out.

The settings button controls general settings, from the size to the time each element is on screen.

Below those buttons is the same calendar widget as the one in the homepage, and a chart showing the average performance for a given day.

Then the sets the user has trained on.

This is just the first version, and I think I'll rewrite everything from scratch once I get more experience. For starters, I'd like to make it optional to store the data on the device using indexedDB, rather than just firebase, that way I could use it offline as well. There's also the issue of the tooltip that pops up on training days being cut off when it overflows the screen. It would only overflow on the homepage, since in the category pages the sets would make space for it, so the tooltips in the homepage would ideally present less information, maybe just the general performance for that day. There is also the issue that training set components only show how long it took to recall the items, but not how much time per element was configured when the training was done.

All elements are build from scratch; the calendar widget, the chart component, the slider, and the dropdowns. I didn't use a component library, but because of that they are not accessible. In the future update I'll add keyboard navigation and proper aria labels to them.

Since I build it primarily for mobile usage, it may look inadequate in large screens. I don't know if I should think too much into the design, since I don't have any training in that field, and I think I should concern myself mostly with it working properly, rather than making it look pretty.

Here's the link.