HiraHero | Development Process

Julius Karl
4 min readJan 6, 2020

During the 2nd year of my computer science degree and being new to web development I was disappointed by the lack of practical web development practice and experience my university provided. At the time I was so bad I even struggled with making lists in HTML — not good. So as most enthusiastic students do I turned to YouTube as my saving grace and it was honestly surprisingly helpful.

In doing so I discovered the vast abundance of knowledge and information available for free and I was able to develop a strong foundation of understanding web development both front-end and back-end.

Aspiring to focus on front-end development and UX design, this is when I discovered a JavaScript library called React. React is a very popular JavaScript library for building dynamic front-end user interfaces and is beginner friendly. I have had experience with very basic Angular beforehand so I expected them to be similar but after using React I began to realize why it has grown more popular than Angular in recent years; the barrier to entry for learning, the code formatting, component based system and lack of Typescript dependency simplified the process of front-end development and I opted to use this for my future front-end career.

This post explores one of the first projects I built only using React called HiraHero | A flash card learning tool for Hiragana, the Japanese lettering system

At the time I was actively studying Japanese and had physical flash cards creating a mess in my room, that’s when the thought occurred to me to test the React skills I had been learning that past week. The main benefit of creating this project is that I am not only the developer and product owner but I am also the consumer since my only intention was for personal use — i’ll explain why I mentioned this later.

Before I started any programming I had to create some designs to set a clear goal and plan strategies to achieving them. I divided these into two requirements

  • UX and UI Design — How the software will look in terms of aesthetics.
  • Functional Design — How the software will look while in use.

Although I have a stronger bias towards UX and UI design I surprisingly found the Functional Design process a lot easier as I drew inspiration from similar existing software such as Quizlet and Kahoot. The main takeaway from both being that a problem is presented and a solution is linked to it, available to the user at prompt. With that I mind I began prototyping my UI.

Functional and UX/UI Design prototypes. Since I was independent in this project you’ll notice a lack of industry standards i.e. UML.

Initially I was quite ambitious with this project with plans for mobile features such as swipes, shakes and gyro functions however I soon discovered the limitations of my React knowledge would inhibit me from achieving such things and that React Native would have been a better solution. As a result the software become a humble and limited flash card system for learning Hiragana — I guess technically I achieved my goal.

Hiragana || Learn with Flash Cards!

A few months after developing this project I applied for a few front-end development roles and included HiraHero in my portfolio for application. I was delighted when one of the CEO’s interviewing me informed me that he had sent my project to his girlfriend who at the time was also trying to learn Japanese. I didn’t get the job though.

— Julius.