Development Environment

Development environment

Pinned toolchain

• .NET SDK 10.0.301 with latestFeature roll-forward.
• Target framework net10.0 and C# 14.
• Node.js and npm for Tailwind CSS.
• CSharpier 1.3.0 as the C# formatter.

Docker builds frontend assets with Node 26.5.0; the Nix package and development shell currently use Node 22.

Nix shell

nix develop

The shell contains .NET SDK 10, Node 22, npm, and nixfmt.

Product screenshots and animations

Run the complete local capture from the repository root:

nix develop .#simulation -c scripts/capture-simulation-screenshots.sh

The Simulation environment creates a fake signed-in channel with stable sample data, keeps the Twitch runtime offline, and needs no Twitch credentials. The command writes files under assets/simulation/ by default:

• output/ contains light and dark PNGs for desktop and mobile views.
• animations/ contains light and dark animated WebPs for scrolling and sample workflows.
• raw/ and animation-frames/ contain the unframed and intermediate evidence.

The final PNGs and WebPs use transparent canvases around their laptop or phone frames. Phone animations include a touch-point marker. Scroll animations run at 30 frames per second and use two finger-like eased gestures.

Pass a different target directory as the only argument when needed:

nix develop .#simulation -c scripts/capture-simulation-screenshots.sh \
  assets/my-capture

The command recreates only its generated subdirectories inside the selected target and stops its loopback server when capture finishes.

Frontend dependencies

npm ci --prefix src/BlokeBot
npm run css:build --prefix src/BlokeBot

For a live rebuild:

npm run css:watch --prefix src/BlokeBot

The build script compiles Styles/app.css to the minified wwwroot/app.css. The application project also invokes the locked npm install and CSS build during its static-web-assets build.