Bi-surii

Memory management app

Tech stack

• ReactJS 18 with Typescript
• Ant Design as UI framework
• Styled-component for customizing styles
• Vite as dev build tool
• PNPM for package manager
• Docker for development environment
• Github Action for automated CD
• Firebase for deployment

Requirement

Only docker and docker compose plugin are needed for development.
VSCode is recommended as IDE.

Development

# Build image
docker compose build --build-arg UID=$(id -u) --build-arg GID=$(id -g) --no-cache

# Install all dependencies
docker compose run --rm frontend pnpm install

# Run development server inside docker container
docker compose up

# Run test
docker compose run --rm frontend pnpm tests

# Optionally, execute other commands if necessary
docker compose run --rm frontend <command inside container>
docker compose run --rm frontend pnpm --version

# Optionally, remove any residual data, volumes, container history etc...
docker compose rm -fsv

Debug with test backend

# Add .env file with test backend endpoints. then re-run docker compose
cat >> .env << 'END'
NEURON_API=https://<api gateway id>.execute-api.<aws env>.amazonaws.com/prod/neuron
NTREE_API=https://<api gateway id>.execute-api.<aws env>.amazonaws.com/prod/ntree
END

Open in browser on localhost:5137

Develop setup

Install recommended VSCode plugins for code styles and linting

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension styled-components.vscode-styled-components