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. Each top-level folder is a focused project with its own dependencies, README, and run instructions.

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/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	angular-patterns-and-di, angular-dynamic-form-debugging, angular-shared-library-workspace
Browser performance	angular-web-workers-offscreencanvas, angular-web-audio-visualizer, rust-wasm-performance-demo
APIs and data fetching	angular-graphql-apollo, graphql-express-angular-migration
Real-time applications	angular-collaborative-editor-firebase-webrtc, realtime-frontend-patterns
Micro frontends and web components	qwik-angular-react-rust, angular-stencil-web-components
TypeScript and state management	typescript-advanced-types, react-recoil-advanced-state
Tooling and migration	angular-custom-schematics, bootstrap-to-tailwind-migration, jupyter-blog-starter

Project Index

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

Common Requirements

• Node.js 20+ and npm for most JavaScript and Angular examples. If you use nvm, run nvm use from the repository root.
• Angular CLI 18+ for Angular projects:

npm install -g @angular/cli@18

• Rust, wasm-pack, Python, uv, or Firebase access only for projects that explicitly mention them in their README.

Project-Specific Setup

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

Repository Shape

Each example is intentionally self-contained:

example-projects/
  project-name/
    README.md
    package.json
    src/

Multi-part examples keep related apps together:

example-projects/
  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 top-level kebab-case folders 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.