Skip to content

Kanji words visualization graph draws relational graph for kanjis of particular words in Japanese. Aim is to understand the relational graph of one kanji within different words and it's relations to all possible words.

License

Notifications You must be signed in to change notification settings

ani-hovhannisyan/kanji-visualization

Repository files navigation

kanji-visualization

Kanji words visualization graph

For more information about structure and functionality, see the docs directory.

image

Demo

https://tvmbj3cgmr.us-east-1.awsapprunner.com/

Directory Structure

  • docs
    • Documents and diagrams for software design
  • frontend
    • Source files for frontend
    • Dockerfile
  • backend
    • Source files for backend
    • Dockerfile
  • docker-compose.yml

docker-compose builds frontend/Dockerfile and backend/Dockerfile, and runs them.

Draft of Class Diagram

alt text

Where Controllers are considered to be in backend, and Views are in frontend.

Setup for development with Docker

Mac, Windows

  1. Install Docker Desktop.

  2. Start Docker Desktop.

  3. Clone the repository.

    git clone https://github.com/ani-hovhannisyan/kanji-visualization.git
    cd kanji-visualization
  4. Run Docker Compose.

    docker-compose up (or on Linux docker compose up)

    This will start the frontend and backend server automatically. Now, you can start developing with Docker.

    The app can be viewed at http://localhost:3000.

    While the server is running, any changes you make to the source code will be reflected on the screen in real time.

Linux

  1. Install Docker Engine.

  2. Install Docker Compose.

  3. Clone the repository.

    git clone https://github.com/ani-hovhannisyan/kanji-visualization.git
    cd kanji-visualization
  4. Run Docker Compose.

    docker-compose up (or on Linux docker compose up)
    

    This will start the frontend and backend server automatically. Now, you can start developing with Docker.

    The app can be viewed at http://localhost:3000.

    While the server is running, any changes you make to the source code will be reflected on the screen in real time.

Setup for development without Docker

Requirements

  • Node.js >= 14.0.0
  • Python >= 3.6

Steps

  1. Install Python and Node.js.

  2. Install yarn.

    npm install -g yarn
  3. Clone the repository.

    git clone https://github.com/ani-hovhannisyan/kanji-visualization.git
    cd kanji-visualization
  4. Install dependencies.

    Python dependencies:

    pip install -r ./backend/requirements.txt

    Node.js dependencies:

    cd frontend
    yarn install
  5. Setup pre-commit.

    pre-commit install
  6. Start servers.

    FastAPI server:

    cd backend
    uvicorn main:app --reload --host 0.0.0.0 --port 8000

    or just

    cd backend
    ./start-server.sh

    React server:

    cd frontend
    yarn start

    These will start the frontend and backend server respectively. Now, you can start developing on your local PC without Docker.

    The app can be viewed at http://localhost:3000.

    While the server is running, any changes you make to the source code will be reflected on the screen in real time.

Development

Commit changes

When you make changes to the source files and run git commit, pre-commit hooks will automatically run the following tools.

LinterFormatterStatic Type Checker
Backendflake8blackmypy
FrontendESLintPrettier(ESLint)

Here is an example of the result.

pre-commit hooks

If all processes are passed or skipped, then commit will be executed as usual. However, if any errors occur, commit will be terminated. In that case, you have to fix the error, then git add the change, and git commit it again.

For more information on the pre-commit, please see here.

The above pre-commit hooks are automatically executed on each commit, but you can also execute them manually by the following commands.

  • Run flake8

    cd backend
    flake8 .
  • Run black

    cd backend
    black .
  • Run mypy

    cd backend
    mypy .
  • Run ESLint

    cd frontend
    yarn lint
  • Run Prettier

    cd frontend
    yarn format

Test and push changes

Before you run git push, please make sure your changes pass the tests.

If you have updated the backend source code, please run

cd backend
pytest

Or if you have updated the frontend source code, please run

cd frontend
yarn test --watchAll=false

or just

cd frontend
./test.sh

If all tests are passed, you can run git push.

After pushing the changes, CI/CD will automatically be executed on GitHub Actions.

Branches

  • main: only a develop branch is merged to main
  • develop: all feature branches are merged to develop
  • feature/XXXX: for develop feature
  • bugfix/XXX : for bugfix
  • release: for deploy

Infrastructure

  • Github Action is not working now, So We have to build images on local and push it to ECR manually.

image

About

Kanji words visualization graph draws relational graph for kanjis of particular words in Japanese. Aim is to understand the relational graph of one kanji within different words and it's relations to all possible words.

Topics

Resources

License

Security policy

Stars

Watchers

Forks

Packages

No packages published