webdev-power-kit

A powerful, modular toolkit that simplifies working with browser APIs, utility tools, and system-level features — built for modern web developers. ⚡

---

📦 About the Project

WebDev Power Kit is a TypeScript-powered, modular toolkit designed to make common browser tasks and utility features incredibly simple and developer-friendly.

Whether you're building SPAs, dashboards, dev tools, or internal tools — this package saves you from writing repetitive, error-prone code.

Write clean, future-ready web apps with ease using modern browser features in just one line of code:

✨ Highlights

• ✅ Modular Structure — only import what you need
• 🧠 TypeScript Support — 100% typed with full JSDoc comments
• ⚛️ React-friendly — examples included for React developers
• 🌐 Browser API Wrappers — safe, clean functions for real-world apps
• 🔌 System Utilities — OTPs, UUIDs, performance, and more
• 🧪 Well-tested — secure, production-ready utilities

---

📖 Documentation

Explore detailed guides, feature docs, and examples in the docs section:

👉 View Full Documentation

Structure Includes:

• ✨ Features
• 📥 Parameters
• 🔁 Return values
• ⚛️ React usage examples
• 🚨 Error handling tips
• 📦 Real world use cases
• 🔐 Browser support tables

Each page is written for developers, not bots. With TypeScript context and practical examples that work in real apps.

---

📦 Installation

npm install webdev-power-kit
# or
yarn add webdev-power-kit

Via CDN (ES Module):

<script type="module">
  import { copyToClipboard } from 'https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm';
  copyToClipboard('Hello via CDN!');
</script>

⚡ Quickstart

HTML (CDN ESM):

<script type="module">
  import { copyToClipboard } from 'https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm';
  copyToClipboard('Hello world from clipboard!');
</script>

React Example:

import { vibrate } from 'webdev-power-kit';
export default function App() {
  return <button onClick={() => vibrate([200,100,200])}>Vibrate</button>;
}

🚀 Usage Example

import { copyToClipboard } from "webdev-power-kit/browser/clipboard";

copyToClipboard("Hello from clipboard!")
  .then(() => console.log("Copied!"))
  .catch(err => console.error("Error copying:", err));

"use client";

import React from "react";
import { useEffect } from "react";
import { isOnline } from "webdev-power-kit/browser/network/is-online";

export default function NetworkStatus() {
  useEffect(() => {
    console.log("User is online:", isOnline());
  }, []);
  return <p>Check console for online status ✅</p>;
}

---

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first.

We follow a clean modular structure — every feature must:

• Be placed in its own folder (Meaningful name)
• Include index.ts with typed exports
• Handle errors gracefully
• Include comments and JSDoc
• Follow files whitelist in package.json

---

📝 FAQ

• Does it work with frameworks?

  . Yes, fully compatible with React, Vue, Svelte, or Vanilla JS.

• Need HTTPS or special setup?

  Some features (clipboard, geolocation) require secure context. Testing with file:// won’t work—use Live Server or serve locally.

• What browsers are supported?

  Modern desktop and mobile browsers are fully supported. Specific browser notes are included in each feature doc.

---

👨‍💻 Author

Aditya Kumar Gupta Computer Science Engineer • Web Developer • Hackathon Enthusiast

• 🐙 GitHub
• 📝 Hashnode Docs

---

📄 License

Distributed under the MIT License. See LICENSE for details.

---

🚀 webdev-power-kit makes building professional browser-based apps faster, safer, and fun again. Import only what you need — clean, typed, and production-ready.