Example Projects

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.

Live Demos

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

Live demo	Project
Angular Web Audio Visualizer	examples/angular-web-audio-visualizer
Web Workers & OffscreenCanvas	examples/angular-web-workers-offscreencanvas
Rust WASM Performance	examples/rust-wasm-performance-demo
Micro Frontends (Qwik + Angular + React)	examples/qwik-angular-react-rust
Stencil Web Components in Angular	examples/angular-stencil-web-components
Angular Dynamic Form Debugging	examples/angular-dynamic-form-debugging
Angular Patterns & DI	examples/angular-patterns-and-di
Angular Shared Library Workspace	examples/angular-shared-library-workspace
React Recoil Advanced State	examples/react-recoil-advanced-state
Bootstrap to Tailwind Migration	examples/bootstrap-to-tailwind-migration

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.

Start Here

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 start

Most 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.

What You Can Explore

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
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

Project Index

Project	Focus	Live demo	Related article
examples/angular-web-audio-visualizer	Angular music visualization with the Web Audio API and Canvas	Open	Creating Dynamic Music Visualizations with Angular and the Web Audio API
examples/qwik-angular-react-rust	Qwik shell app that hosts Angular and React micro frontends, with optional Rust WASM	Open	Micro Frontends: Working Example
examples/angular-collaborative-editor-firebase-webrtc	Real-time Angular editor using Firebase, Firestore, and WebRTC signaling ideas	Source only (Firebase)	Building a Real-Time Collaborative Editor with Angular, Firebase, and WebRTC
examples/angular-web-workers-offscreencanvas	Moving canvas work off the main thread with Web Workers and OffscreenCanvas	Open	Optimizing Angular Applications with Web Workers and OffscreenCanvas
examples/angular-graphql-apollo	Angular app connected to a local GraphQL API with Apollo Client	Source only (API server)	Integrating GraphQL with Angular: A Practical Guide
examples/angular-stencil-web-components	Stencil web component consumed by an Angular app	Open	Implementing Custom Web Components in Angular with Stencil.js
examples/typescript-advanced-types	Small TypeScript examples for mapped, conditional, recursive, and utility types	Source only	Advanced TypeScript types
examples/react-recoil-advanced-state	React task dashboard demonstrating atoms, selectors, and derived state with Recoil	Open	Advanced state management in React with Recoil
examples/realtime-frontend-patterns	Node examples for WebSocket and Server-Sent Events patterns	Source only (Node server)	Real-time data in frontend applications
examples/angular-patterns-and-di	Angular design patterns, dependency injection, providers, and injection tokens	Open	Design patterns in Angular, Advanced DI techniques
examples/angular-dynamic-form-debugging	Reactive form debugging scenario for Angular applications	Open	Debugging Angular
examples/angular-shared-library-workspace	Angular workspace containing a reusable UI library and demo app	Open	Reusable shared module in Angular
examples/angular-custom-schematics	Angular schematics for repeatable code generation	Source only	Building custom Angular schematics
examples/bootstrap-to-tailwind-migration	Side-by-side migration from Bootstrap-style markup to Tailwind CSS	Open	Migrate CSS Bootstrap to Tailwind
examples/rust-wasm-performance-demo	Rust and WebAssembly benchmark served from a simple web page	Open	WebAssembly and Rust
examples/latency-lens	Rust TUI that reads Linux PSI and explains desktop stutter from kernel pressure signals	Source only (native Linux)	Building a Tiny Linux App to Explain Desktop Stutter
examples/jupyter-blog-starter	Python and Jupyter starter for notebook-driven technical analysis	Source only	Jupyter setup guide, Jupyter real-world examples
examples/graphql-express-angular-migration	Express API showing REST and GraphQL side by side with an Angular client	Source only (API server)	Migrating from REST to GraphQL

Common Requirements

• Node.js 24+ and npm for most JavaScript and Angular examples. If you use nvm, run nvm use from 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).

Project-Specific Setup

• Live demos are built with npm run build:playground and deployed by GitHub Actions to Cloudflare Pages. See playground/README.md.
• angular-collaborative-editor-firebase-webrtc needs a Firebase project with Anonymous Authentication and Cloud Firestore enabled.
• angular-graphql-apollo and graphql-express-angular-migration include local API servers. Start the server/ app before the Angular app.
• angular-stencil-web-components has two parts. Build the Stencil component first, then run the Angular app.
• qwik-angular-react-rust is a multi-app demo. Run the Qwik shell, Angular app, and React app in separate terminals.
• jupyter-blog-starter supports either uv sync or a standard Python virtual environment.
• rust-wasm-performance-demo requires wasm-pack build --target web --out-dir web/pkg before serving the browser demo.
• latency-lens is a native Linux binary. Run cargo run -- --once from the project folder for a one-shot snapshot.

Repository Shape

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/

Maintenance Guidelines

• 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, Rust target/, 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.

Contributing

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.

License

This repository is licensed under the MIT License.