1  ---
 2  title: Kanaizu
 3  date: 2020-09-29
 4  description: A japanese kana quiz app built using Routify and TailwindCSS
 5  source: https://github.com/elianiva/kanaizu
 6  type: personal
 7  featured: true
 8  stack:
 9      - ["Routify", "https://routify.dev"]
10      - ["TailwindCSS", "https://tailwindcss.com"]
11  ---
12  
13  **Kanaizu** is an app that I made when I was starting to learn Svelte. I made this app because I want to help my friend memorise Japanese kana because we're both learning Japanese at the time I'm writing this. It's also because I want to try Routify. I made this app for about a week, maybe that's way too long but hey, it was my second time so I barely know the basics.
14  
15  I got the data from [Wikibooks](https://en.wikibooks.org/wiki/JLPT_Guide). It has around ~508 words. I picked them randomly, most of them are N5 and N4. I picked them using a weird method. As you can see, the words that they provide has kanji because that's how you would use it, with kanji. I only want the hiragana or katakana version. So what I did was scrape the data and make this tiny and unefficient script using js that would transform the data that I got from the site which is an array of words into an object that looks something like this.
16  
17  ```json
18  {
19  	"data": [
20  		{
21  			"hiragana": "たべる",
22  			"romaji": "taberu"
23  		},
24  		{
25  			"hiragana": "わかる",
26  			"romaji": "wakaru"
27  		}
28  	]
29  }
30  ```
31  
32  I converted it from kanji to hiragana/katakana using [this tool](https://nihongodera.com/tools/kana-converter). Big thanks for the creator of that tool. It would be _very_ tedious if it didn't exist. Imagine converting hundreds of words manually.
33  
34  I use Tailwind CSS for this project which means that I have to setup postcss. Again, because this is my second time trying Routify and my first time setting up Tailwind CSS specifically for Routify, as expected, I messed up. I have no idea what I was doing until a few hours later but it's worth it. I learned something new.
35  
36  I you're interested with this app, go ahead and try it yourself ツ
37  
38  There's some inconsistency though, but it's _rarely_ appear. I can't fix it because it's quite unpredictable. Basically, it won't show your score. Just refresh the app if this happen.