HiraHero | Development Process
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.
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.
