This project was developed in the Typescript language, using React as the main library, CSS and the Material UI. The main purpose of the application is educational and is intended to be a help to those who are learning the fascinating Japanese language.
Before starting to put the lines of code, I created the entire application design in Figma, which helped me a lot as a guide in my development. I was happy with the result because it is very faithful to what I had planned.
Curious to see the project? Check it out: https://hiragana-guide.netlify.app/
These are some screenshots I took of the application showing most of the components, like the navbar, menu, footer, home, the three main tables/pages. Please, feel free to take a look in the link provided in the intro of this document.
This is the main component of the application, as soon as you click on the link, this interface will be presented with the navbar containing the project's logo and title on the left, and on the right is the menu that gives access to other pages.
As you can see, we have three tables/pages in the menu on the right with the content to be viewed by the user.
Still on the main page we have a second part where it is explained how the application works, a button that gives access to the first table/page and the footer component.
Now in the first table, "Basic", we have the necessary content so that the aspiring Japanese language studies can take their first steps towards fluency.
This page would be level 2 of studies, so the first table has already been learned.
And finally, we have the last page, which would be a complement to what has already been studied and help to reinforce the content.
From now on, the student is ready to continue his studies at another level, with other types of content.
The hiragana guide is an idea I've had for a long time, but I still didn't have the necessary technical knowledge to develop something of quality. I even did it at the beginning of my journey as a developer in pure html and css, but the result was not pleasant for me. So I studied for a long time and here I am with my first ready-to-use version.
In the future I want to add the audio resource on each card in the table to facilitate learning and make the student fix in his mind the sounds of the syllables that are very important. And also adapt the project for mobile devices, as it currently works well for desktop only.