Forem: Muhammad Sheharyar Butt

🚀 Candy Logger v2 is here — a browser logger with a real UI

Muhammad Sheharyar Butt — Sat, 28 Mar 2026 17:20:27 +0000

I just shipped Candy Logger v2 — a major rewrite of my JavaScript/TypeScript logging library.

Candy Logger is now a browser-first logger with a floating UI that makes debugging much easier during development. Instead of just printing plain console messages, v2 gives you a structured table view, tagged logs, color-coded levels, real-time search/filtering, dark/light theme support, JSON export, and draggable/resizable UI controls. It is also zero-dependency. (GitHub)

One important change in this release: v2 is browser-only. I removed the old Node.js / terminal support, so if you still need the legacy terminal experience, v1.x is the version to stay on. This release is focused on giving frontend developers a much better in-browser debugging workflow. (GitHub)

What’s new in v2?

Complete browser-focused rewrite
New table-view logger UI
Custom tagged logging
6 color-coded log levels
Per-row actions like copy, bookmark, and delete
Real-time search and filtering
Dark / light theme toggle
JSON export
Pin, drag, and resize support
Collapsible JSON previews
TypeScript support
Works with React, Vue, Angular, Svelte, and Next.js client-side setups (GitHub)

Quick example

import { overrideConsole } from 'candy-logger';

overrideConsole({ forceUI: true });

console.log('Hello World!');
console.info('User signed in', { userId: 123 });
console.warn('Disk usage > 90%');
console.error('Payment failed', { code: 'CARD_DECLINED' });

That is basically it — once enabled, your browser logs become much more visual and easier to inspect. (GitHub)

Why I made this

A lot of logging tools are either too minimal, terminal-focused, or not pleasant to use when debugging frontend apps. I wanted something lightweight but still practical: something that feels modern, looks clean, and helps organize logs instead of turning them into noise.

Candy Logger v2 is my attempt to make browser debugging more usable and a bit more fun.

Try it

GitHub: shehari007/candy-logger
npm: candy-logger
Version: 2.0.0 (GitHub)

I’d really appreciate feedback, feature ideas, and stars on the repo.
If you try it in one of your projects, let me know what you think.

🚀 Arduino Live System Monitor Using Node.js (jhonny-five)

Muhammad Sheharyar Butt — Fri, 02 Jan 2026 09:09:31 +0000

Arduino Live System Monitor Using Node.js

A small hobby project that connects Node.js with Arduino UNO R3 to display live system statistics on an I2C LCD module.

The entire project is written in pure JavaScript, using Johnny-Five for serial communication and Standard Firmata on the Arduino side.

The goal is to provide a lightweight, hardware-based system monitor that runs independently of any desktop UI.

Features

CPU usage (%)
Memory usage (%)
Download speed (MB/s)
Upload speed (MB/s)
Automatically detects the active network adapter
Live updates via serial communication

Screenshot

Motivation

Most system monitoring tools are software-based and tied to the operating system UI.

This project explores a different approach by moving system metrics to a physical display, controlled entirely through JavaScript.

It also demonstrates:

Using JavaScript for hardware control
Real-time serial communication with Arduino
Practical usage of Johnny-Five beyond basic LEDs and sensors

Tech Stack

Node.js (>= 18, LTS recommended)
Johnny-Five
Arduino UNO R3
Standard Firmata
I2C LCD Module
PCF8574T I2C Controller (configurable)

Requirements

Node.js 18 or higher
Arduino UNO R3 with Standard Firmata flashed https://www.instructables.com/Arduino-Installing-Standard-Firmata/
I2C LCD Module
PCF8574T I2C Controller (Controller address can be changed in index.js)

Possible Improvements

GPU usage support
Temperature and fan speed monitoring
Support for other boards (Mega, Nano, ESP32)
Configurable refresh intervals
Multi-page LCD views

Source Code

Link

Contributions and improvements are welcome.

Running Locally

Connect the Arduino to your PC via USB
Install dependencies and start the app:


bash
npm install && node index.js

🚀 AppBox — An Open, All-in-One Utility Toolbox (React + Electron)

Muhammad Sheharyar Butt — Thu, 18 Dec 2025 13:47:24 +0000

As developers, we constantly rely on small utility tools — calculators, converters, timers, clocks, quick todos, weather checks. Most of them live as separate apps or browser tabs.

AppBox is an attempt to bring all of those everyday utilities into one extensible, open-source application — and more importantly, to make it easy for others to contribute new utilities and grow it into a true all-in-one toolbox.

🔗 Live demo (web preview):

Link

🔗 GitHub repository:

Link

What is AppBox?

AppBox is a modern utility suite built with React, Ant Design, and Electron.

It runs as:

🖥 A desktop app (Windows / macOS / Linux)
🌐 A web app, using the same codebase

The idea is simple:

One app. Many small tools. Easy to extend.

Why AppBox?

Most utility apps try to do everything themselves. AppBox takes a different approach:

Each utility is self-contained
New utilities can be added without touching the core logic
No backend required — everything persists locally
Designed to grow over time with community contributions

AppBox is not “finished” — it is intentionally open-ended.

Current Utilities

🧮 Calculator

Basic and scientific modes
Calculation history
Full keyboard support

🔁 Converters

Length, weight, temperature, speed
Time, storage, area, volume
Instant conversion with unit swapping

✅ Todo List

Add, complete, delete tasks
Filters: all / active / completed
Clear completed or reset all
Local persistence

⏱ Clock & Timer

Digital clock
Stopwatch
Countdown timer

🌍 World Clock

Add and remove cities
Multi-timezone overview
Persisted locally

☁️ Weather

City-based weather lookup
Configurable API key
Saved default city

The Vision: A True All-in-One Toolbox

The real goal of AppBox is not the current feature list — it’s what can be added next.

Examples of future utilities that would fit perfectly:

Password generator
UUID / hash generator
JSON / JWT viewer
Color picker & palette tools
Regex tester
Markdown previewer
Notes or scratchpad
Developer-focused utilities

If it’s a small, useful tool, it belongs in AppBox.

Contributing New Utilities 🚀

Contributions are highly encouraged — especially new utility modules.

You don’t need to refactor the app or understand everything to contribute:

Utilities are UI-driven and isolated
Most contributions can live in their own component/page
State is local and persistence is simple (localStorage)
No backend or database required

If you have ever built:

a small React tool,
a side utility,
or a “weekend project” feature,

…it can probably be added to AppBox.

How to Contribute

Fork the repository
Create a new utility module/page
Register it in the navigation
Submit a pull request

Even small utilities are welcome.

Tech Stack

Frontend: React 19
UI: Ant Design 6
Desktop: Electron
Math utilities: mathjs
Build & packaging: react-scripts, electron-builder

Running the Project

Clone the repo:


bash
git clone https://github.com/shehari007/mini-react-electron-desktop-app.git
cd mini-react-electron-desktop-app
npm install

🚀 Shorty URL — A Modern, Secure URL Shortener Built with React & Express (New Release)

Muhammad Sheharyar Butt — Mon, 15 Dec 2025 07:29:17 +0000

I’m excited to introduce Shorty URL, a modern full-stack URL shortener designed for real-world use. The goal of this project was to go beyond basic link shortening and deliver a secure, analytics-driven, and visually polished experience.

Shorty focuses on performance, security, and usability while maintaining a clean and scalable architecture.

✨ Features

🔗 URL Shortening — Create short, memorable links instantly
📱 QR Code Generation — Download QR codes for any shortened link
📊 Link Analytics — Track clicks, unique visitors, and performance metrics
🌙 Dark Mode — Elegant light and dark themes
🔒 Security Built-In
HTTPS-only URL validation
Rate limiting to prevent abuse
Full input sanitization
📝 Link History — Local storage–based history of created links
🚨 Report System — Report suspicious or malicious URLs
📧 Contact Form — Built-in contact functionality
📱 Responsive Design — Works seamlessly on desktop and mobile

🌐 Live Demo

Frontend: https://shorty.msyb.dev

🛠️ Tech Stack

Frontend
React 19
React Router 7
Ant Design 6
CSS3
Backend
Node.js
Express
MySQL

Security & Infrastructure

Helmet.js for secure HTTP headers
API rate limiting
CORS with origin whitelisting
Input validation and sanitization
SQL injection and XSS protection

Deployment

Vercel with serverless-ready architecture

🧩 Architecture Overview

The project is split into two clear layers:

A React-based frontend responsible for UI, theming, routing, and user interactions

An Express-based backend handling URL generation, redirection, analytics, reporting, and security enforcement

This separation keeps the system scalable, maintainable, and easy to extend.

📡 API Capabilities

URL creation and redirection
Global and per-link analytics
QR code tracking
Contact submissions
Malicious link reporting
Health monitoring

🔒 Security First Approach

Security was a primary focus while building Shorty:

Strict HTTPS validation for all URLs
Rate limiting to mitigate abuse
Sanitized inputs across all endpoints
Parameterized database queries
Hardened HTTP headers and controlled CORS access

🔗 Open Source

The project is fully open source and available on GitHub:
Link

📌 Final Notes

Shorty URL is built as a production-ready URL shortener, not just a demo project. It showcases how modern frontend frameworks and a well-structured Express API can work together to deliver a secure and scalable application.

Feedback, feature suggestions, and contributions are always welcome.
If you find it useful, a star ⭐ would mean a lot.

Thanks for reading.

🚀 Introducing TaskFlow (TODO APP) — My First Job Interview Project Upgraded To Full-Stack Productivity App

Muhammad Sheharyar Butt — Fri, 12 Dec 2025 16:38:07 +0000

Over the past month, I rebuilt and upgraded my first job interview todo app into a production-ready, real-time, full-stack todo management system. What started as a simple CRUD project is now a complete application with authentication, analytics, security hardening, performance optimizations, PDF export, and a polished UI/UX.

✨ What’s New in This Version?

1. Modern UI with Light & Dark Themes

TaskFlow now offers a fully responsive interface with persistent theme mode, powered by Ant Design v5 and CSS variables.

2. JWT Authentication

A secure login & registration flow backed by Express and JWT, including protected routes and hashed passwords (bcrypt).

3. Dashboard Analytics

Users now see task completion stats, dynamic indicators, and visual status cues.

4. Real-Time Experience

Task updates instantly reflect across the app with themed notifications and optimized state flow.

5. Smart Date Handling

Day.js powers human-readable labels like Today, Tomorrow, and Overdue, each color-coded for clarity.

6. PDF Export

Download your tasks as a nicely formatted PDF in a single click.

🔐 Security Improvements

I treated security as a first-class requirement in this upgrade:
Rate limiting (100 req/min general, 10 req/15min for auth)
Strong security headers and referrer policy
Request size limiting (10 KB)
Input sanitization against SQL injection
Secure bcrypt password hashing
Short-lived JWTs for better token hygiene

These enhancements make TaskFlow safe to run in production environments.

⚡ Performance & Server Architecture

One core part of this upgrade was shifting the backend toward a more optimized and scalable architecture:
Clean MVC structure (Controllers, Routes, Middleware)
Focused Express server with minimal overhead
Selective attribute loading in Sequelize queries
24-hour CORS preflight caching
Centralized error handling
Trust proxy support for reverse proxies and serverless platforms
This makes the app lightweight, efficient, and easy to deploy.

🔗 GitHub Repository

Full source code available here:
Repo
Demo Link:
Live Demo

💬 My Final Thoughts

This project upgrade was a great opportunity to demonstrate practical, real-world full-stack engineering:

Clean Express server architecture
Secure JWT auth
PostgreSQL + Sequelize ORM
Modern component-based UI
PDF generation
Deployment-ready configurations

If you’re preparing for interviews or building your portfolio, I highly recommend turning small CRUD projects into fully operational products like this. It showcases far more professional depth.

Feedback, issues, and feature requests are always welcome on GitHub.

🚀 Introducing SysPeek v1.1.0 – A Modern System Information Viewer for Windows, macOS, and Linux (New Release!)

Muhammad Sheharyar Butt — Wed, 10 Dec 2025 21:00:29 +0000

I’ve just released SysPeek v1.1.0, a modern and lightweight Electron + React desktop app designed to inspect and monitor your system in one place. This update brings a fully redesigned UI, a Task Manager-style dashboard, and a comprehensive hardware information suite with live metrics.

What is SysPeek?
SysPeek is a cross-platform desktop application that gives you a complete view of your system’s hardware and performance. With its streamlined glassmorphism interface, it offers an organized, Task Manager-style dashboard paired with detailed hardware pages — all built with modern web technologies.

Core Features
Task Manager-style dashboard with CPU, RAM, disk I/O, network activity, uptime, and per-core loads

Comprehensive hardware pages:
System, CPU, Memory, Graphics, Display, Storage, Network, WiFi, Battery, Audio, Bluetooth, Printers, USB

Disk grid with system-drive toggle
WiFi scanner and process list with search/sort
Dynamic version and architecture detection
Responsive UI with sticky footer and scrollable sidebar
Cross-platform support: Windows, macOS, Linux

Screenshots

Task Manager Dashboard – Live system metrics

Detailed Hardware Information View

Build / Package Binaries
To generate production builds:
npm run electron:package:win # Windows (.exe) npm run electron:package:linux # Linux (.deb) npm run electron:package:mac # macOS (.dmg)

Changelog – v1.1.0

Redesigned glassmorphism UI
Task Manager homepage with live CPU/memory/disk/network metrics
Per-core CPU gauges
Process list with search and ordering
Disk grid with system-drive toggle
WiFi scanner improvements
About page with version, architecture, GitHub links, and credits
Sticky footer and responsive sidebar with scroll
Updated dependencies: Electron 26.2.x, Ant Design 5.9.x, systeminformation 5.27.x
Improved splash sequence and auto-maximized main window

License
MIT License

Feedback & Support
If you have suggestions or feedback, reach me at:
shehariyar@gmail.com

If you like the project, consider giving a star on GitHub. It means alot.

Github Repo:
REPO

Downloads:
Windows x64 & Apple Silicone Arm64

🚀 Introducing BICO v2.0.0 — The Next-Gen Bulk Image Converter & Optimizer (React + Electron) - Desktop App

Muhammad Sheharyar Butt — Tue, 09 Dec 2025 23:29:42 +0000

After months of development, refinement, UI upgrades, and performance tuning, I’m excited to announce the release of BICO v2.0.0 — a powerful and production-ready Bulk Image Converter & Optimizer built with Electron + React, packed with a redesigned interface, parallel processing, Sharp-powered transformations, and a smoother workflow than ever before.

If you're someone who deals with a large volume of images — photographers, designers, frontend devs, digital agencies — BICO is built for you. 🖼⚡

✨ What is BICO?

BICO is a desktop application that lets you:

🔹 Convert images in bulk
🔹 Optimize + compress without quality loss
🔹 Export as ZIP or directly to a folder
🔹 Preview + track estimated output size
🔹 Control every aspect — quality, resizing, metadata & more

Built with Electron + React using Sharp for image processing, it balances power, usability, and speed.

🚀 What's New in v2.0.0?
🖤 UI/UX Fully Redefined

Sleek dark interface

Responsive layout & padded headers

Better tables, more intuitive controls

🖼 File Handling Upgrades

Drag & drop + preview panel

Duplicate detection & status chips

Total & per-file savings estimates

⚙️ Conversion Workflow

Pause/resume/stop conversion

Confirmation modal before start

Clear list & output path launcher

Success modal with total conversions, fails & space saved

⚡ Performance Enhancements

Parallel Sharp processing for faster execution

Estimated output size prediction

Stable memory-safe pipeline

🖥 Platform Improvements

Window opens centered (no forced fullscreen)

Windows builds ship with x64 + arm64

macOS auto-build by arch detection

🧪 Supported Formats

Convert + optimize all major formats:

webp, jpg, png, tiff, jp2, heif, avif, jxl, raw, gif, bmp

Plus advanced toggles:

🔧 Resize
🔧 Rotate / Flip / Flop
🔧 Sharpen / Normalize
🔧 Lossless WebP/AVIF
🔧 Metadata preserve/drop
🔧 MozJPEG + Progressive encoding

🔗 Source Code

Open-source and actively maintained 👇
🔗 GitHub: search BICO bulk image converter or visit my repo if you follow me

Download For Mac or Windows from here
download

⭐ If you like the project, don't forget to star the repository — it means more than you think.

Meet candy-logger — a simple, friendly logger for Node.js / React.js - TS / JS projects

Muhammad Sheharyar Butt — Fri, 28 Nov 2025 16:36:48 +0000

Have you ever wished for a minimal, easy-to-use logger that just works — without heavy configuration or unnecessary overhead and most importantly without opening devTools? that’s exactly why I built candy-logger.

✅ What is candy-logger

candy-logger is a lightweight logging utility for Node.js (or JavaScript) that helps you log messages — info, warnings, errors, debug, etc.

It’s designed to be simple, intuitive, and ready to use with minimal setup.

Perfect for small to mid-sized projects, quick scripts, or anytime you want readable console output in a compact UI without fuss.

📢 Give it a try — feedback welcome!

If you’re looking for a clean, zero-hassle logger for your next small project — give candy-logger a spin. And if you like it, drop feedback, suggest features, or spread the word.

Check Github or NPM for detailed documentations and usage!

Happy logging! 🎉

🚀 Github
🚀 NPM