Kanji words visualization graph
For more information about structure and functionality, see the docs directory.
https://tvmbj3cgmr.us-east-1.awsapprunner.com/
docs
frontend
Dockerfile
backend
Dockerfile
docker-compose.yml
docker-compose builds frontend/Dockerfile
and backend/Dockerfile
, and runs them.
Where Controllers are considered to be in backend, and Views are in frontend.
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 (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.
Clone the repository.
git clone https://github.com/ani-hovhannisyan/kanji-visualization.git
cd kanji-visualization
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.
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.
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
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.