Runnable companion projects for articles on omid.dev.
This repository exists for the examples that are too large for a blog post but still small enough to understand in one sitting. Article companions live under examples/; interactive labs live under labs/. Each folder is self-contained with its own dependencies, README, and run instructions.
Browser-only companion projects and interactive labs are published at playground.omid.dev under /examples/<slug>/ and /labs/<slug>/.
| Lab | Description |
|---|---|
| Bio-Dynamics: Microbiome Sandbox | Full-body 3D microbiome simulator with blog-backed probiotic scenarios |
Demos that need Firebase, a local API server, native Linux binaries, or other non-browser runtimes are source-only for now. See playground/README.md for the playground build and deploy setup.
Pick the example that matches the article or topic you are reading, then install and run it from that folder:
git clone https://github.com/omidfarhang/example-projects.git
cd example-projects/examples/angular-web-audio-visualizer
npm install
npm startMost frontend examples are Angular apps and open on http://localhost:4200. Some projects include an API server, Firebase setup, WebAssembly build step, or multiple apps. Check the README inside the project folder before running commands.
| Area | Projects |
|---|---|
| Angular application patterns | examples/angular-patterns-and-di, examples/angular-dynamic-form-debugging, examples/angular-shared-library-workspace |
| Browser performance | examples/angular-web-workers-offscreencanvas, examples/angular-web-audio-visualizer, examples/rust-wasm-performance-demo |
| Linux desktop and kernel-adjacent tooling | examples/latency-lens |
| APIs and data fetching | examples/angular-graphql-apollo, examples/graphql-express-angular-migration |
| Real-time applications | examples/angular-collaborative-editor-firebase-webrtc, examples/realtime-frontend-patterns |
| Resilience and fault tolerance | examples/chaos-resilience-lab |
| Micro frontends and web components | examples/qwik-angular-react-rust, examples/angular-stencil-web-components |
| TypeScript and state management | examples/typescript-advanced-types, examples/react-recoil-advanced-state |
| Tooling and migration | examples/angular-custom-schematics, examples/bootstrap-to-tailwind-migration, examples/jupyter-blog-starter |
- Node.js 24+ and npm for most JavaScript and Angular examples. If you use
nvm, runnvm usefrom the repository root. - Angular CLI 20+ for Angular projects:
npm install -g @angular/cli@20- Rust,
wasm-pack, Python,uv, or Firebase access only for projects that explicitly mention them in their README. - Rust toolchain for
examples/latency-lens(no root or eBPF required).
- Live demos are built with
npm run build:playgroundand deployed by GitHub Actions to Cloudflare Pages. See playground/README.md. angular-collaborative-editor-firebase-webrtcneeds a Firebase project with Anonymous Authentication and Cloud Firestore enabled.angular-graphql-apollouses an in-browser GraphQL mock on the live playground; clone the repo and start theserver/app for the full HTTP + Apollo setup.realtime-frontend-patternsuses simulated WebSocket and SSE on the live playground; clone the repo and runnpm startfor the Express server.chaos-resilience-labruns entirely in the browser on the live playground (npm start); usenpm run devfor MSW andnpm run test:e2efor Cypress tests.graphql-express-angular-migrationincludes a local API server — start theserver/app before the Angular app.angular-stencil-web-componentshas two parts. Build the Stencil component first, then run the Angular app.qwik-angular-react-rustis a multi-app demo. Run the Qwik shell, Angular app, and React app in separate terminals.jupyter-blog-startersupports eitheruv syncor a standard Python virtual environment.rust-wasm-performance-demorequireswasm-pack build --target web --out-dir web/pkgbefore serving the browser demo.latency-lensis a native Linux binary. Runcargo run -- --oncefrom the project folder for a one-shot snapshot.
example-projects/
examples/ # article companion projects
project-name/
README.md
package.json
src/
labs/ # standalone interactive labs
lab-name/
playground/ # build + deploy tooling only
manifest.json
scripts/
dist/
Multi-part examples keep related apps together:
example-projects/
examples/angular-graphql-apollo/
server/
src/
- Keep examples aligned with the article they support.
- Prefer clear tutorial code over clever abstractions.
- Keep generated output out of git, including
node_modules/,dist/, Angular cache folders, Rusttarget/, and local notebook artifacts. - Document required secrets or local configuration with placeholder values or
.env.example. - Add new examples as kebab-case folders under
examples/named after the post or the main demo idea.
Issues and pull requests are welcome when an example is broken, outdated, or no longer matches the related article. See CONTRIBUTING.md before opening a pull request.
This repository is licensed under the MIT License.