Refactor code structure for improved readability and maintainability

Author: dev-aditya-lab

README.md

@@ -1,4 +1,14 @@
-# Webdev Power Kit 🚀
+<p align="center">
+  <img src="./webdev logo long.png" width="500" alt="WebDev Power Kit Logo" />
+  
+</p>
+
+<h1 align="center">🚀 WebDev Power Kit</h1>
+
+<p align="center">
+  A powerful, modular toolkit that simplifies working with browser APIs, utility tools, and system-level features — built for modern web developers. ⚡
+</p>
+
 
 [![NPM Version](https://img.shields.io/npm/v/webdev-power-kit?color=blue&label=npm%20version)](https://www.npmjs.com/package/webdev-power-kit)
 [![Downloads](https://img.shields.io/npm/dt/webdev-power-kit?color=green&label=downloads)](https://www.npmjs.com/package/webdev-power-kit)
@@ -7,40 +17,56 @@
 [![Made by Aditya](https://img.shields.io/badge/made%20by-Aditya%20Kumar%20Gupta-blueviolet)](https://github.com/dev-aditya-lab)
 
 
-A modular toolkit that brings powerful browser APIs to your fingertips. With a simple import, you can access clipboard, notifications, battery status, geolocation, network info, dark mode, vibration, and more—no boilerplate, no fuss.
-
 ---
 
-## 🔍 Short Description
+## 📦 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:
 
-```js
-import { copyToClipboard, sendNotification, isOnline } from 'webdev-power-kit';
-````
+### ✨ 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](https://webdev-power-kit.hashnode.dev/docs/introduction)
 
-## 📌 Introduction
+**Structure Includes:**
 
-Webdev Power Kit is a TypeScript-powered library built for web developers who want to leverage browser features without spending time on repetitive setup. Whether you’re building projects, teaching, or just experimenting, this toolkit offers:
+* ✨ Features
+* 📥 Parameters
+* 🔁 Return values
+* ⚛️ React usage examples
+* 🚨 Error handling tips
+* 📦 Real world use cases
+* 🔐 Browser support tables
 
-* 🧱 Simple, modular functions
-* 💻 Full TypeScript support
-* ⚛️ Framework-agnostic usage
-* 🌍 Real-world features: dark mode toggle, idle timer, network detection, tab visibility, and more
+Each page is written for **developers**, not bots. With TypeScript context and practical examples that work in real apps.
 
 ---
 
 ## 📦 Installation
 
-### Via NPM/Yarn:
-
 ```bash
 npm install webdev-power-kit
 # or
 yarn add webdev-power-kit
 ```
-
 ### Via CDN (ES Module):
 
 ```html
@@ -49,9 +75,6 @@ yarn add webdev-power-kit
   copyToClipboard('Hello via CDN!');
 </script>
 ```
-
----
-
 ## ⚡ Quickstart
 
 ### HTML (CDN ESM):
@@ -72,76 +95,77 @@ export default function App() {
 }
 ```
 
----
+## 🚀 Usage Example
 
-## 📚 Documentation
+```ts
+import { copyToClipboard } from "webdev-power-kit/browser/clipboard";
 
-Explore detailed guides, feature docs, and examples in the docs section:
+copyToClipboard("Hello from clipboard!")
+  .then(() => console.log("Copied!"))
+  .catch(err => console.error("Error copying:", err));
+```
 
-👉 [Full documentation](https://webdev-power-kit.hashnode.space/docs/introduction)
 
----
 
-## ✅ Features
+```tsx
+"use client";
 
-| Browser Feature   | Functionality                      |
-| ----------------- | ---------------------------------- |
-| 🔋 Battery        | Check level & charging status      |
-| 📋 Clipboard      | Copy & read text                   |
-| 🌙 Dark Mode      | Detect, toggle, listen to changes  |
-| ⏳ Idle Timer      | Detect user inactivity             |
-| 🌐 Network        | Track online/offline status        |
-| 📢 Notifications  | Show native browser notifications  |
-| 🛑 Prevent Close  | Warn before leaving the page       |
-| 🕶 Tab Visibility | Detect switching or hiding the tab |
-| 📳 Vibration      | Control device vibration           |
-| 📍 Geolocation    | Use GPS to get user’s location     |
-| 📐 Screen Info    | Get viewport & screen dimensions   |
+import React from "react";
+import { useEffect } from "react";
+import { isOnline } from "webdev-power-kit/browser/network/is-online";
 
-More features coming soon!
+export default function NetworkStatus() {
+  useEffect(() => {
+    console.log("User is online:", isOnline());
+  }, []);
+  return <p>Check console for online status ✅</p>;
+}
+```
 
 ---
 
-## 🧩 How It Works
+## 🤝 Contributing
 
-* Built in **TypeScript** for clean code and types
-* Modular structure—import only what you need
-* Plain functions using native browser APIs
-* Graceful error and support handling
-* No dependencies—install size is minimal
+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.
+  >. 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.
+  > 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.
-
+  > Modern desktop and mobile browsers are fully supported. Specific browser notes are included in each feature doc.
 ---
 
-## 🛠 Contributing
+## 👨‍💻 Author
 
-Add features, file issues, or fix bugs—open a PR!
-Project is MIT licensed and open for community involvement.
+**Aditya Kumar Gupta**
+Computer Science Engineer • Web Developer • Hackathon Enthusiast
 
----
+* 🔗 [Portfolio](https://your-portfolio-link)
+* 🐙 [GitHub](https://github.com/adityakgupta)
+* 📝 [Hashnode Docs](https://webdev-power-kit.hashnode.dev/docs/introduction)
 
-## ⚡ License
+---
 
+## 📄 License
 Distributed under the **MIT License**.
 See `LICENSE` for details.
 
----
-
-## 🔗 Stay Connected
 
-* 📘 GitHub: [dev-aditya-lab/webdev-power-kit](https://github.com/dev-aditya-lab/webdev-power-kit)
-* 🧑‍💻 Author: Aditya Kumar Gupta
-* 💬 Issues & feedback: via GitHub issues or pull requests
+---
 
+> 🚀 `webdev-power-kit` makes building professional browser-based apps faster, safer, and fun again.
+> Import only what you need — clean, typed, and production-ready.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webdev-power-kit",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A powerful toolkit that simplifies access to browser features like clipboard, notifications, battery, vibration, and more — perfect for modern web developers.",
   "keywords": ["webdev","browser-api","clipboard","battery","notification","vibration","developer-tools","frontend", "html5-api","javascript","typescript","web-utilities","productivity"],
   "homepage": "https://github.com/dev-aditya-lab/webdev-power-kit#readme",