kanji-visualization

Kanji words visualization graph

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

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

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

Setup for development with Docker

Mac, Windows

Install Docker Desktop.
Start Docker Desktop.

Clone the repository.

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

Run Docker Compose.
```
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

Install Docker Engine.
Install Docker Compose.

Clone the repository.

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

Run Docker Compose.
```
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

Install Python and Node.js.
Install yarn.
```
npm install -g yarn
```

Clone the repository.

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

Install dependencies.

Python dependencies:

pip install -r ./backend/requirements.txt

Node.js dependencies:

cd frontend
yarn install

Setup pre-commit.
```
pre-commit install
```
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.

	Linter	Formatter	Static Type Checker
Backend	flake8	black	mypy
Frontend	ESLint	Prettier	(ESLint)

Here is an example of the result.

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.