Making a wanikani dashboard for stats

WaniKani API And Third-Party Apps
#1

As a new CS graduate I’ve been working on learning react and JavaScript after having a curriculum based mostly in backend languages(Java,python,c++). I was hoping for some feed back and feature suggestions. Although this is just a super early concept build.
Bonus:

I forgot to post the link to my Github so you too can look at and taste my garbage code!

Everyone can test it out now here:
https://kanidash.delisle.io/

this is a super early WIP as i am both learning react/html5/css3 and putting this together at the same time!

As a note to everyone, if it does not load after entering the API key, you might need to wait a bit, as the API calls are time limited.

thanks!

4 Likes
#2

I like the circles; clear way of showing progress. I (like many others) use Level Progress Detail and love it. The conditional showing of levels (as in if you’re over 90%, it doesn’t show) is great for high level people (I mean, I imagine, I’m only level 5).

Colors are very colorblind friendly to me (strong Duetan). I say get rid of the word level in the sphere. Nice work so far!

#3

thanks for the reply! I am working on the charts a bit, i am hoping to do some “drill-down” charts where when you click on a circle chart it will give you more info such as SRS levels for the level. for example how much of each item in the level is apprentice/guru…/burned. also only one circle chart with arrows to switch between.

Here is a mock-up, sorry for the bad handwriting, I have some muscular issues.

1 Like
#4

cool, this is pretty neat for some of your first Javascript/React work! My CS graduation is also not that long ago, and even though i use javascript/typscript for some open source projects, i haven’t gotten around to learn React yet. I probably should.
My advice is to consider the visual design a little bit, ideally before you implement a lot of stuff.
Right now, there are a bit too many nested boxes, and together with the heavy blue shadows it creates a lot of clutter and stress/discomfort in the look.
Also, think about how you want to use space. E.g. your wall of shame wastes horizontal space while scrolling vertically. Of course, that space is used when you expand (click on) a kanji, but maybe you can find a way to always use the space.
Otherwise, what is the goal of your application? What unsolved needs does it fulfill? More explicitly, what features do you want to implement, and which are the most important? I’m sure you’ve thought about this, you just haven’t written about it here yet.
It looks like you’re having fun with this project and learning a lot, keep it up!

1 Like
#5

Reminds me of Tsurukame:

What is that?

imagen
imagen828×1792 945 KB

1 Like
#6

I feel that, it’s really hard having to even deal with UI/colors/space management. ^_^; I love wanikani so far, but the layout of the user stats leaves a lot to be desired as one needs to click through a bunch of pages to really get the information they are after.

1 Like
#7

I’m diggin it. I would be happy to test and give feedback for it. Keep us posted!

#8

You can test it out here now:

https://kanidash.delisle.io/

1 Like
#10

Is this what I am supposed to see?
EDIT: It works correctly now!

#11

nope, i am setting up automated building/deployment and it needs a DNS setting change which can take up to 48 hours to propagate throughout the internet. you could also speed it up by clearing your cache. pardon my dust!! D:

1 Like
#12

imagen
imagen828×1792 115 KB

#13

Thats it! make sure to click on things and tell me what you think so far, i’m still building legends to indicate what colors mean what.

1 Like
#14

Ok, good. There isn’t enough explanation.

#15

fixed, added totals with color coding so you can see each subject in the levels drop down!