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. Its official guide here.
VisualStudio Code 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

Open it in browser on localhost:5137

Run test

docker compose run --rm frontend pnpm tests

Optional

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

# 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

Development 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