Unleash the power of kanji with this captivating study companion! Upon page load, users are greeted with 5 random characters. Dive into pronunciation and meanings at a tap, and save the ones you love to study. Streamline your progress by organizing learned kanji separately. Plus, easily search by English meaning or character to fuel your language journey. Your path to kanji mastery starts here!
Frontend: React, TypeScript, React router v6, create-react-app, CSS, HTML, JavaScript, Chart.JS Backend: Node.JS, Express.JS, Knex.JS, PostgreSQL (link to backend repo)
As someone whose family are first-generation immigrants, learning languages holds a special place in my heart. It's a way to connect with cultures worldwide and learning my own family’s language helped me connect with my heritage and background. I genuinely hope this application can be a valuable tool for others who share the same passion for language learning and aid them in mastering the Japanese language.
- Users can log in with their Google Account, or choose to try the app with a demo account
- Users can browse random kanji from the homepage, or search for kanji by English meaning or by the character itself
- Users can save kanji they want to study, and mark them as studied when they have learned the character
- Take a quiz based on all saved kanji or just kanji you haven't learned yet
- Track the progress of kanji learned vs kanji you're still learning
- Saved kanji and progress will persist on page load due to local storage
- Design is responsive across all mobile devices
- 100% Accessible on Lighthouse
At the time of this project, I am a student at Turing School of Software Engineering in the front end development program, in mod 3. This project was created for the final solo project- we have now been learning React and this project was a way to showcase all the knowlege gained from practicing React.
The biggest challenge about this project was the "my saved kanji" page. This page allows users to filter through their saved kanji by viewing all saved, kanji yet to be studied, and kanji already learned. Having the components re-render and stay in sync with each other was a challenge as there were serveral different states to keep track of.
- Fork or clone down this respository.
- In the terminal, open this app by running the command
cd <project folder name> - Run the command
npm installto install dependencies. - Run the command
npm startto start the server. - Open http://localhost:3000 to view it in your browser.
- Use control C to stop the server.