Building a Guided Tour Library for Angular: ngx-web-tour

mgz coding — Thu, 18 Dec 2025 11:43:07 +0000

User onboarding is one of the most overlooked parts of modern web applications. Even well-designed interfaces can feel confusing to first-time users. That’s exactly the problem I wanted to solve when I built ngx-web-tour.

Why ngx-web-tour?

Most guided tour solutions are either:

Too heavy

Not Angular-friendly

Hard to customize

Or tightly coupled to specific UI frameworks

I wanted a simple, lightweight, Angular-first solution that developers can easily plug into their projects without friction.

That’s how ngx-web-tour was born.

What is ngx-web-tour?

ngx-web-tour is an open-source Angular library that helps you create step-by-step guided tours inside your application.
It allows you to highlight elements, display explanations, and guide users through your UI in a structured way.

Key Features

🚀 Lightweight and Angular-native

🧩 Simple and clean API

🎯 Step-based UI walkthroughs

🎨 Fully customizable styles and content

🔌 Easy integration with existing Angular projects

🧠 Ideal for onboarding, feature discovery, and product tours

Installation
npm install @abbasmgz/ngx-web-tour

Basic Usage
After installing the library, you can attach tour steps directly to the elements you want to explain:

<div
  tour="step1"
  tourTitle="Welcome"
  tourDescription="This is the main dashboard where you can see an overview."
>
</div>

Then define and control the tour flow from your component or service.

The goal was to keep the API intuitive and declarative, so you focus on UX instead of configuration overhead.

Use Cases

Product onboarding for new users

Feature walkthroughs after updates

Internal dashboards and admin panels

SaaS applications need better UX guidance

Open Source & Contributions

The project is fully open source and actively maintained.
Feedback, issues, and pull requests are more than welcome.

📦 npm:
https://www.npmjs.com/package/@abbasmgz/ngx-web-tour

💻 GitHub:
https://github.com/abbas-mgz/ngx-web-tour

What’s Next?

Planned improvements include:

Keyboard navigation

Better mobile support

Animations and transitions

More customization hooks

If you’re building Angular applications and care about user experience, I hope ngx-web-tour helps you deliver smoother onboarding flows.

If you find it useful, consider starring the repo or sharing feedback.

How to Integrate ChatGPT API in a Node.js App (With GitHub & 8-Minute Video)

mgz coding — Thu, 12 Jun 2025 14:16:01 +0000

If you're curious about how to use OpenAI's ChatGPT API in a Node.js application, I built a simple project to demonstrate exactly that — and made a short tutorial video to go with it.

📽️ Watch the 8-Minute Video Tutorial:

💻 GitHub Repo:

👉 https://github.com/abbas-mgz/chatgpt-js

⚙️ What You'll Learn:

How to connect to OpenAI's ChatGPT API
How to send and receive prompts using fetch()
Basic .env setup for secure API keys
Configurable model (GPT-3.5 or GPT-4)
Clean and minimal Node.js code (no frontend)

🚀 How to Run: