Why?

I chose to work on this project because I would personally like a series of fun tools to help me study and stay engaged while studying Japanese. I know that other people would benefit from tools like this too, so I am running on lots of hopes & dreams!

Relevant contributions

• Architectural choices
• Frontend development
• Backend development
• QA development
• Devops

Major tools

Frontend:

• Vanilla JS
• HTML
• SVG
• CSS

Backend:

• NodeJS
• Express
• Passport
• MongoDB
• Neo4j
• Socket.io
• MailGun API
• MailTrap API
• MailJet API

Testing:

• Jest
• Cypress

Devops:

• Heroku
• Snyk

Big decisions

• A web application
  • Easiest access on most types of devices for project onset.
• NodeJS
  • I am a JS simp, so my bias 100% guided me with this. That is really it. If I could, I would live in a 100% typeless Javascript world.
• MongoDB
  • Quick and easy access to small data sets.
• Neo4j
  • Great tool for gathering and creating metrics about learning associations.
• Websockets
  • The meat and potatoes of this application is a multiplayer web game, and sockets are the quintessential technology for allowing quick client interactions over the web. This is a no-brainer.
• Vanilla JS frontend
  • "Travelling light" was an ideal for memory, bundling, & time.

Hurdles

• Back-and-forth trouble determining if I needed a graph database (DB) or not.
  • Initially determined no.
  • Later found out that yes, but for reasons I did not anticipate.
  • Implementation was a long process with lots of refactoring.
• Did not implement accessibility (A11Y) initially.
  • This created a slower process of finding need-zones, documenting them, & implementing fixes after first iterations of features were made.

What did I learn?

• The whole implementation of websockets on the frontend and backend for game rooms!
• Usage of SVG animation tags!
• How to add highly-customizeable faux images & image components.
• Setting up user tests & documenting finds for product improvement.
• Cypress, and A11Y testing with it.

What would I improve if I did it again?

• If its a learning platform, graph databases are your friend.
• Implement A11Y immediately as a facet of each feature, not as an extension or secondary feature.
• Generate images on canvas instead of focusing heavily on SVG.