DEV Community: Hashir Khan

I Built a Full SaaS-Style WhatsApp Subscription Management System, Here's How

Hashir Khan — Wed, 10 Jun 2026 08:50:46 +0000

Most subscription tools are complex, overpriced, and ignore how small businesses actually operate.
In Pakistan and across emerging markets, businesses manage subscriptions through WhatsApp. Not emails. Not portals. WhatsApp.
So I built a complete frontend system around that exact workflow.

Why I Built This

While working as a Frontend Engineering Intern at Peham LTD, I kept noticing the same gap: businesses needed a clean way to manage subscriptions tied to WhatsApp-based communication workflows.
Existing SaaS dashboards are built for enterprise. They assume complex CRMs, payment APIs, and dedicated ops teams.

But a local gym, a newsletter creator, or a service business running on WhatsApp? They need something simpler — and more focused.

I wanted to build a real SaaS-style product that solved this specific problem. A system with a proper landing page, an admin dashboard, and a workflow that maps to how these businesses actually communicate with their users.

What I Built

WhatsApp Subscription Management System — a complete frontend SaaS application with two core parts:

🏠 Landing Page

Clean, conversion-focused hero section
Feature highlights explaining the WhatsApp-first workflow
Pricing section
Call-to-action flows
Fully responsive across all screen sizes

📊 Admin Dashboard

Subscription overview and stats
Subscriber list with status management (active, paused, cancelled)
WhatsApp message workflow triggers
Clean UI with intuitive navigation
Mobile-responsive layout

Tech Stack

React.js — component-based architecture
Modern CSS — responsive, utility-first styling
React Router — client-side navigation between landing and dashboard
Component composition — reusable UI elements across views
Vercel — deployed and live

🔗 Live Demo: whatsappsubscriptionmanagementsyste-flax. vercel.app

How I Built It — The Breakdown

Landing Page Architecture The landing page was designed as a standalone marketing surface. I separated it from the dashboard routing intentionally — different goals, different component trees.

Key sections:

HeroSection — above-the-fold hook with CTA
FeaturesGrid — card-based feature breakdown
Pricing Section — tiered plan layout
Footer — links and brand close

Each section is a standalone component. Easy to update independently without touching unrelated UI.

2. Admin Dashboard Structure

The dashboard follows a classic SaaS layout pattern:

Fixed sidebar with navigation
Top bar with context and user info
Main content area with dynamic views

I built the subscriber management table as a controlled component with local state, cleanly handling status filters, row actions, and empty states.

3. WhatsApp Workflow UI

This is the most unique part of the system. Instead of generic "send email" buttons, the workflow UI is built around WhatsApp actions — message triggers tied to subscription lifecycle events (onboarding, renewal reminder, cancellation confirmation).
Each trigger maps to a clear UI state. No backend yet — but the frontend is structured to plug into a WhatsApp API layer (like Twilio or Meta's Cloud API) without a rebuild.

4. Responsive Design Strategy

I used a mobile-first approach throughout:

Sidebar collapses to a hamburger on mobile
The subscriber table becomes a card list on smaller screens
Landing page sections stack cleanly on all breakpoints

No UI library — custom responsive components. More control, less bloat.

Result & What I Learned:

The system is live and fully functional as a frontend application.
What I got out of this build:

✅ Deeper understanding of SaaS dashboard architecture in React
✅ Cleaner thinking about component separation and responsibility
✅ Hands-on experience designing around real-world workflows (not textbook features)
✅ Confidence in building landing page + dashboard as one cohesive product

The biggest shift was thinking like a product engineer rather than just a UI developer. Every component decision is tied back to: Does this serve the user's actual workflow?

Final Thoughts:

Frontend engineering isn't just about shipping UI — it's about building systems that fit how people actually work.
This project pushed me to design around a specific, real use case. Not a generic CRUD app. A product that understands its users communicate through WhatsApp, not email, and builds the entire experience around that.
That kind of thinking — workflow-first, not feature-first — is what I want to carry into every project I build at Hashir WebX Studio.

Let's Talk 💬

🔗 Live Demo

Want the source code? Drop a comment, and I'll share the GitHub link.
Should I break down the WhatsApp workflow architecture in a dedicated post?
What kind of SaaS dashboard should I build next — open to ideas from the community.

Built by Hashir WebX Studio — React.js • Next.js • TypeScript • SaaS UI Engineering

That blocks distracting websites using AI. Here's the full code (Next.js + TypeScript)

Hashir Khan — Thu, 04 Jun 2026 19:38:16 +0000

Combines your 3 strengths (Chrome Extension + AI + TypeScript). "Full code" promise = massive click driver.

Opening hook:

"I wasted 3 hours on Reddit yesterday while 'working'. So I built a Chrome Extension that fights back — using AI to detect distracting patterns and block them dynamically. Here's everything, including the full source code."

Outline:

The problem (relatable: developers losing focus)
Demo GIF of the extension in action ← , critical, embed this!
Architecture overview: manifest v3 + content scripts + TypeScript
Calling an AI API (OpenAI/Gemini) to score distracting URLs
Full code walkthrough — 3 key files with comments
How to publish to Chrome Web Store (bonus value)
CTA: "What sites distract YOU most? Drop it in the comments 👇"

I Stopped Using CSS for Animations. GSAP Changed Everything.

Hashir Khan — Wed, 03 Jun 2026 16:31:25 +0000

I wasted 8 months fighting CSS animations.

Keyframes, transition, animation-delay hacks, browser inconsistencies — it felt like building a house with tape.
Then I tried GSAP for a one-weekend project. I never went back.
Here's exactly what changed — and the **3 animations that would have taken me 3 days in CSS, but took 3 hours in GSAP:**

🎯 Animation 1: Staggered text reveal on page load
Every portfolio wants this. CSS version? 20 lines, fragile. GSAP version:

javascriptgsap.from(".hero-text span", {
  opacity: 0,
  y: 60,
  stagger: 0.08,
  duration: 0.9,
  ease: "power3.out"
});

Done. Each word staggers in smoothly. Zero browser quirks.

🎯 Animation 2: Scroll-triggered section reveal
, JavaScript GSAP.registerPlugin(ScrollTrigger);

gsap.from(".section", {
  scrollTrigger: ".section",
  opacity: 0,
  x: -80,
  duration: 1,
  ease: "power2.out"
});

No Intersection Observer boilerplate. No manual cleanup. It just works.

🎯 Animation 3: Magnetic button hover effect
javascriptconst btn = document.querySelector(".magnetic-btn");

btn.addEventListener("mousemove", (e) => {
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  gsap.to(btn, { x: x * 0.3, y: y * 0.3, duration: 0.4, ease: "power2.out" });
});

btn.addEventListener("mouseleave", () => {
  gsap.to(btn, { x: 0, y: 0, duration: 0.6, ease: "elastic.out(1.2, 0.4)" });
});

This one thing made my portfolio feel like a $50K agency site.

The truth nobody tells you: CSS animations are fine for simple things. But the moment you need sequencing, scroll-linking, or interactive motion — GSAP wins by a mile.
I now use GSAP on every single project: portfolios, real estate demos, agency sites, and Chrome extensions.

What's the animation YOU've been trying to build but couldn't figure out? Drop it in the comments — I'll write a GSAP solution for the best one. 👇

I Stopped Using CSS for Animations. GSAP Changed Everything.

Hashir Khan — Wed, 03 Jun 2026 16:31:25 +0000

I wasted 8 months fighting CSS animations.

🎯 Animation 1: Staggered text reveal on page load
Every portfolio wants this. CSS version? 20 lines, fragile. GSAP version:

javascriptgsap.from(".hero-text span", {
  opacity: 0,
  y: 60,
  stagger: 0.08,
  duration: 0.9,
  ease: "power3.out"
});

Done. Each word staggers in smoothly. Zero browser quirks.

🎯 Animation 2: Scroll-triggered section reveal
, JavaScript GSAP.registerPlugin(ScrollTrigger);

gsap.from(".section", {
  scrollTrigger: ".section",
  opacity: 0,
  x: -80,
  duration: 1,
  ease: "power2.out"
});

No Intersection Observer boilerplate. No manual cleanup. It just works.

🎯 Animation 3: Magnetic button hover effect
javascriptconst btn = document.querySelector(".magnetic-btn");

btn.addEventListener("mousemove", (e) => {
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  gsap.to(btn, { x: x * 0.3, y: y * 0.3, duration: 0.4, ease: "power2.out" });
});

btn.addEventListener("mouseleave", () => {
  gsap.to(btn, { x: 0, y: 0, duration: 0.6, ease: "elastic.out(1.2, 0.4)" });
});

This one thing made my portfolio feel like a $50K agency site.

What's the animation YOU've been trying to build but couldn't figure out? Drop it in the comments — I'll write a GSAP solution for the best one. 👇

React didn't make me a better developer. This did.

Hashir Khan — Tue, 02 Jun 2026 09:19:03 +0000

When I first started learning React, I thought mastering hooks, components, and state management would automatically make me a great developer.

It didn't.

For months, I consumed tutorials.

I built clones.

I copied code.

I followed along with YouTube videos.

And honestly?

I felt productive.

But the moment I faced a real-world problem without a tutorial...

I got stuck.

That's when I realized something important:

Frameworks don't create developers. Problems do.

The biggest growth in my frontend journey didn't come from learning React.

It came from:

✅ Debugging issues that took hours to solve

✅ Breaking applications and figuring out why

✅ Designing scalable architectures

✅ Refactoring messy code

✅ Building projects without step-by-step guidance

Every difficult bug forced me to think deeper.

Every failed implementation taught me a better solution.

Every project improved my decision-making.

Today, when I approach a React or Next.js application, I focus less on writing code and more on solving problems.

Because great developers aren't measured by how many frameworks they know.

They're measured by how effectively they solve problems.

React is a tool.

Problem-solving is a skill.

That's the difference.

👇 What's one challenge that taught you more than any tutorial ever could?

I Built a Chrome Extension That Turns Any Website Into Clean, Usable Code

Hashir Khan — Sun, 22 Feb 2026 16:49:26 +0000

As frontend developers, we spend a surprising amount of time doing one repetitive task:

Inspecting elements.
Digging through deeply nested DOM structures.
Copying incomplete or messy styles.

It’s slow. It’s frustrating. And it breaks the flow.

So I built a tool to fix it.

Introducing: HTML Element Picker

HTML Element Picker is a Chrome extension designed to help developers instantly extract clean, usable code from any webpage.

Instead of manually inspecting and reconstructing UI components, you can now select any element and get everything you need — instantly.

What it does

With a single click, you can extract:

Clean, structured HTML
Computed CSS with intelligent filtering
Tailwind CSS classes generated automatically

No unnecessary noise. No redundant styles. Just production-ready output.

Why This Tool Matters

Most developer tools give you too much information.

This one focuses on giving you the right information.

It intelligently filters:

Default browser styles
Inherited noise
Irrelevant layout values

So what you get is actually usable in real projects.

Key Features

One-click element picking with real-time visual overlay
Smart CSS extraction with noise reduction
Automatic Tailwind CSS conversion
Multi-format output (HTML, CSS, Tailwind)
Clean, syntax-highlighted output
One-click copy for individual sections or full output

Built for Real Workflows

This extension isn’t just a concept — it’s designed around how developers actually work.

From architecture to UX, everything is optimized for speed and clarity:

Popup interface for quick control and preview
Content script for real-time DOM interaction
Efficient style processing engine

The goal is simple:
Reduce friction between inspection and implementation.

Privacy-First by Design

No data collection
No external API calls
Fully user-controlled interactions

Your workflow stays yours.

Real Value for Developers & Teams

Tools like this are not just about convenience — they directly impact productivity.

For:

Freelancers → faster delivery
Agencies → consistent code extraction
Product teams → rapid UI replication

Reducing repetitive work means more time spent building actual features.

What’s Next

This is just Version 1.

Planned improvements include:

Component detection
Framework-aware output (React, Vue)
Advanced Tailwind optimization
Export to reusable components

Get Access

I’m currently sharing the extension with developers and teams looking to streamline their workflows.

If you’re interested, reach out or connect — I’d be happy to share it.

Final Thought

We don’t need more tools that show everything.

We need tools that show exactly what matters.

If this sounds useful to you, I’d love to hear your thoughts.

Making Web Interfaces Feel Alive with Animejs

Hashir Khan — Fri, 20 Feb 2026 10:48:15 +0000

Most websites look good… but they feel static.
As frontend developers, we often focus on layout, colors, and responsiveness — but we ignore one powerful element: animation.
Recently, I started using**** Anime.js in my projects, and it completely changed how users interact with my UI.

Why Anime.js?

Simple yet powerful API
Works with CSS, SVG, and DOM
Timeline control for complex animations
Lightweight and fast

Real Use Cases:

Hero section animations
Scroll-triggered effects
Smooth UI transitions
Micro-interactions

Key Insight:

Users don’t just see your UI — they feel it.

Adding motion brings life to your interface and improves user engagement significantly.

If you're building modern web apps, Anime.js is definitely worth exploring.

👉 https://animejs.com/

What animation library do you prefer — Anime.js or GSAP?

Boost Your Productivity with a Smart Time-Tracking Chrome Extension

Hashir Khan — Thu, 05 Feb 2026 11:02:26 +0000

Staying focused online is harder than ever. With endless tabs, social media notifications, and tempting websites, it’s easy to lose track of time. That’s why I built a practical time-tracking Chrome extension designed for real users, not just as a proof-of-concept.

Here’s what it does:

Tracks time spent on every website
Identifies distractions and unproductive habits
Blocks websites that waste your time
Limits access to specific websites for better focus
Built entirely in JavaScript as a real-world, usable application

This project is perfect for anyone looking to understand their browsing habits, reduce distractions, and boost productivity without relying on generic solutions.

I designed it with practicality in mind, ensuring that it actually helps real users improve their workflow rather than just being a technical demo.

Try it out and see it in action: Watch the YouTube Demo
Check out the code or contribute: GitHub Link

Chrome extension tracked on your own websites, so you can spend time

Hashir Khan — Fri, 30 Jan 2026 15:27:04 +0000

I tracked my own distractions… and it made me realize how much time gets lost during daily browsing.

So instead of ignoring the problem, I built a solution.

I recently developed a Smart Productivity Assistant Chrome Extension using Manifest V3 and modern extension architecture. This was not just another practice project, but a productivity tool designed around real user problems.

The extension helps users:

• Automatically track time spent on websites
• Run smoothly in the background using Chrome Service Workers
• Display clear and simple usage analytics in a popup dashboard
• Block distracting websites to improve focus
• Work completely offline using privacy-focused local storage with no tracking or external servers

While developing this project, I focused on building production-ready architecture rather than just writing functional code.

Development priorities included:

• Clean and scalable project structure
• Proper separation of concerns between background, popup, content scripts, and options
• Following Manifest V3 best practices
• Using minimal and optimized permissions
• Writing developer-friendly and client-ready code

This project significantly strengthened my understanding of:

• Chrome Extension APIs in real-world applications
• Background Service Workers and Content Script communication
• Event-driven software design
• Product-focused development thinking

The objective was simple: build something practical, secure, and scalable that users could genuinely benefit from, not just a portfolio demonstration.

This is the first version, and I am looking forward to improving it further and building more real-world solutions.

I would appreciate feedback from developers, productivity enthusiasts, and Chrome extension users.

Do productivity tools genuinely help improve focus, or do they sometimes become distractions themselves?

Building a Modern Real Estate Website Demo with Next.js, TypeScript & GSAP

Hashir Khan — Sat, 03 Jan 2026 13:34:19 +0000

Building a real estate website means much more than just showing houses. For example, in the Real Estate – Single Demo project, the following are some aspects to take into consideration:
In this blog post, I will guide you through the process based on the Real Estate – Single Demo project.

Project Overview

This is basically an example of how a single-page real estate website demo might look while being able to feature properties, scroll, and organize correctly, just as it would on an actual working real estate service.

"The primary objective was to create something that incorporates the feeling of:"

Fast
Visually premium
Smooth in interaction
Scalable in structure

Tech Stack

Next.js – App routing and performance optimization
TypeScript - Type safety and improved developer experience
Tailwind CSS: Utility styling for quick UI development
GSAP - Scroll animations
Lenis - Smooth Scrolling

Key Features

Real estate one-page design with a contemporary hero section GSAP ScrollTrigger Animation for sections and property cards “Lenis.”
Smooth scrolling for a fluid experience
Animations in pre-loader for better impression creation during page load
Fully responsive design, mobile-first - Scalable components with reusability capabilities

Why GSAP & Lenis?

In real estate website development, subtle motion plays a big role in perceived quality.
GSAP controls the animation without hurting performance.
Lenis gives natural, fluid scrolling without feeling heavy which creates a good UX.
Combined, they provide a sleek experience that is professional, not over-animated.

Designed Approach:
In developing this demo, I focused on:

A clear visual hierarchy can be created with Premium-feeling spacing and typography
Animations that complement, rather than compromise, the content. Performance-first approach
Real estate websites often serve business purposes, so clarity and usability always come first.

What This Demo Represents
This demo isn't just a UI experiment; it's actually how I would do things in real-world frontend projects:

Build with scalability in mind. Performance above all, UX too.
Keep code clean and maintainable.

🔗 Visit the Project
👉 Live Demo:Please click here
👉 GitHub Repository: Click here

Final Thoughts:
This Real Estate Single Demo is a small but concentrated project to demonstrate how modern frontend tools could be combined in the development of business-ready web experiences. If you're building in the real estate space, or any content-heavy platform for that matter, smooth interactions and performance make all the difference.

Creative Design Agency Portfolio React, GSAP Animation

Hashir Khan — Tue, 23 Dec 2025 15:15:11 +0000

This Website is a high-end creative agency website crafted to showcase modern web design, cinematic motion, and smooth user interactions.
Built with a strong focus on bold typography, GSAP-powered animations, and a refined Soft Sage & Obsidian color palette, this project blends technical precision with creative storytelling to deliver a premium browsing experience.

Key Features

Advanced GSAP Animations:
Parallax motion, staggered text reveals, and smooth clip-path transitions for a cinematic feel.

Liquid “Gooey” Buttons:
Custom SVG filter-based interactive buttons with fluid motion effects.

Lenis Smooth Scrolling:
High-performance inertial scrolling for a seamless, premium user experience.

Fully Responsive Design:
Optimized for all screen sizes — from mobile devices to ultra-wide 4K displays.

Dynamic Project Modals:
Immersive modal views with detailed portfolio presentations.

Tech Stack

Frontend: React
Animations: GSAP (GreenSock) & ScrollTrigger
Styling: Tailwind CSS
Icons: Lucide React
Fonts: Anton (Headings) & Inter (Body)

Languages & Tools

React.js
Tailwind CSS
GSAP Animations
CSS3

👉 Press here to view the live project: https://quantumstack-fawn.vercel.app/
👉 Github Repo: https://github.com/hashirwebx/software-webiste-in-gsap

👉 I’d really appreciate your feedback and suggestions
What do you think about this design?

Modern School / Education Website using React, TailwindCSS, GSAP

Hashir Khan — Tue, 16 Dec 2025 08:30:32 +0000

Project Overview

School-website-react is a modern React-based frontend template designed for educational platforms, prioritizing speed, scalability, and maintainability. It leverages Vite for rapid builds, Tailwind CSS for streamlined styling, and a modular component architecture to facilitate scalable development.

Project purpose and Key Features:
This project aims to deliver a fast, responsive, and easy-to-maintain frontend foundation for school websites. The core features include:

- Fast Development: Utilizes Vite with React for quick builds and hot module replacement, enhancing developer productivity.

- Tailwind CSS Integration: Simplifies styling with a configured CSS setup, enabling consistent and responsive design.

- Modular Components: Offers a structured, component-driven architecture for scalable UI development.

- Responsive & Interactive UI: Features animated navigation and adaptable layouts for seamless user experiences.

- Clear Project Structure: Organized setup with dedicated pages and components for easy maintenance and extension.

- Optimized Tooling: Uses modern development tools to keep the code clean, fast, and high-performance.

👉 Visit this link: https://school-website-react-ashen.vercel.app/

👉 You can check out the full project code here: https://github.com/Hashir15432/school-website-reacte

I’d really appreciate your feedback, suggestions, or stars ⭐ on GitHub!