Memojog

Memojog is a flashcard application that I built in Vue.js with a Firebase back-end (Firestore) and Bootstrap for CSS. It allows to easily add, edit and delte flashcards but also to go through the cards for practice purposes. "Flipping" the card over shows the solution. The cards are sorted using an algorithm I created and which takes into account how recently the card was added to the database and its relative and absolute "score" (that can be manually corrected depending on the user's wish to see that card more or less often).

The main use case for this app is to better memorise key geographic details and therefore get better at the GeoGuessr game. This is because the flashcard categories and subcategories have been adapted to that particular use case (e.g. road signs, vegetation, Street View vehicles, etc.). But a future iteration of this application will likely allow any type of content to be added (thinking of classroom type of content e.g. history, language, maths, etc.).

The app is free to use by anybody so don't hesitate to give it a shot! By registering (for free), you can also create your own set of flashcards.

Fun fact: Memojog was initially the name I wanted to give to the "Reminders" application I had in mind as part of a future project (see the list on the Projects page).

Challenges I had to overcome while designing this application include:

  • Deploying the application to Firebase after creating the production version of the Vue.js application
  • Adding various authentication methods (Google, Facebook, Twitter), specifically going through the tiresome Facebook configuration
  • Understanding the various types of requests that can be done to Firestore (onSnapshot for real-time snapshots, get for static snapshots)
  • Fixing tons of UI issues e.g. rendering of a mobile version
  • Creating a default set of flashcards
  • Ensuring that sub-categories depend on which parent category is selected
  • Knowing how to properly create and read JSON objects for those very (sub-)categories
  • Updating Firestore without replacing the content of an entry ("merge: true")
  • Uploading images to Imgur through its API
  • Creating my own logo and corresponding favicon and colour scheme
  • Creating a live search functionality
  • Figuring out how to detect presses on the space bar or the arrow keys, and ensuring that the same database updates are processed as the click of a mouse
  • Adding a confirmation dialog box when deleting a card
  • Fixin the navigation bar (creating a hamburger menu on mobile devices), realising the differences between Bootstrap 5 (that I'm using) and 4 (that I'm still using on seb247), for instance when it comes to embedding YouTube videos (using "ratio") or left/right aspects ("start" and "end", no longer "left" and "right" for margin and padding for example)
  • Creating a clearly-worded privacy policy, with the ability for users to easily delete their account