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

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.

	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.