/ao-kanji

A Kanji mobile-first study catalog web-app that, by consuming the Japanse kanji API, enables students to select groups of Kanji by grade or work book lists and access their readings, stroke order, and pronunciation. Built with React and Redux.

Primary LanguageJavaScript

Contributors Forks Stargazers Issues LinkedIn


Logo

Ao Kanji

A simple one page kanji study webapp
Use it live here »

Report Bug · Request Feature

Table of Contents

About

This project was built as the React capstone for the Microverse curriculum.

It consists of a single page application with client-side routing, API consumption, and state-managed by redux.

This project requires no authentication, it's a catalog, with filter, sorting, and details features.

To read the full project requirements visit this link.

Repository: https://github.com/uryelah/ao-kanji

About The App

Ao Kanji consists of a single page web app for browsing, searching, and studying Japanese Kanji.

Kanji (漢字, pronounced [kaɲdʑi]) are the adopted logographic Chinese characters that are used in the Japanese writing system. They are used alongside the Japanese syllabic scripts hiragana and katakana.

From wikipedia

For this project I chose a free API that serves kanji lists and details, including examples of usage and pronunciation, in the app, it's possible to browse a pre-defined list of kanjis or do you own search based on a Latin alphabet word.

Features

  • Loading visual feedback between data fetch requests

  • Fetching kanji lists from different API endpoints

  • "Back" button at the navbar to browse through past searches

  • Mobile-first design

  • Animate examples for the kanji stroke order

  • Audio examples for kanji pronunciation

  • Kun and On readings

  • Kanji English translation

  • Centralized state for fetched kanji data

  • Centralized state for kanji list sorting and filtering

  • Unique client-side routes

  • Use of React hooks

  • Use of CSS modules and BEM

Future Features

  • Hiragana and Katana input in the search bar

  • Cache the kanji lists and details info

  • Canvas area under kanji stroke for practice hand-writing

Navigation

app navigation demo

  1. Select how you want to group the kanji lists

  2. Click in a kanji list by grade or chapter

  3. Filter the kanji by stroke order

  4. Sort the kanji list

  5. Select one of the kanji in the list

  6. Read the details, reading, stroke order, examples, of the chosen kanji

  7. Use the navigation bar to go back

  8. Use the search bar to look for a kanji linked to a word of your chosing

  9. Keeping browsing and learning

Views

This app includes 4 different views:

  • Landing page

  • Kanji list page

  • Kanji search page

  • Kanji details page

Routes

Route Description
/ao-kanji Root route, you can select a kanji list from here
/grade/:<NUMBER> List route, you can select kanji lists by grade level here
/chapter/:<NUMBER> List route, you can select kanji lists by Macquarie chapters here
/ap-chapter/:<NUMBER> List route, you can select kanji lists by AP chapters here
/search/:<STRING> Search route, you can select kanji fitting the query string
/kanjis/:<KANJI> Details route, you can see information about a specific kanji here

Prerequisites

If you want to...

View this app online

Simply access this link and enjoy the game!

Run it locally

  1. Make sure you have node installed in your local environment.

  2. Download or clone this repository

  3. Navigate to the game root directory in your terminal

  4. Install the required packages:

npm i
  1. Start the game in your browser:
npm run start

Built With

This project was built using the React SPA framework, consuming the data from the Learn to read and write Japanese kanji API, together with Redux for state management.

Available Commands

Command Description
npm install Install project dependencies
npm start Build project and open web server running project
npm eject Eject configuration files for customization
npm run build Builds code bundle with production settings (minification, uglification, etc..)
npm run test Run the available tests
npm run predeploy Build code for deployment
npm run deploy Pushes built code to gh-pages

Contact

👤 Sarah Uryelah Silva Chamorro

Acknowledgements

CopyRight/Attributions

This project was only possible thanks to the creators bellow:

Design idea by Nelson Sakwa on Behance

Kanji Alive great free kanji API