As an IT Administrator passionate about networking, cloud, and infrastructure, I believe the best way to learn is by building real systems.
Over time, I designed and deployed three practical projects that combine:
* Web development
* Networking fundamentals
* Monitoring concepts
* Google Workspace integration
* Infrastructure visibility
* Mobile deployment
This post summarizes those three projects and what they demonstrate.
🛠️ Project 1: AllinOne IT Tools Web App (Web + APK)
🎯 Objective
Instead of using multiple online tools for networking and file utilities, I built a centralized, clientside IT toolkit.
It started as a web application and later evolved into an Android APK.
🌐 Web Version Features
🔧 Network & Security Tools
* Subnet Calculator (Network, Broadcast, Usable Hosts)
* DNS Lookup (Google DNS API)
* URL → IP Resolver
* Hosting Provider Checker
* MAC Vendor Lookup
* HTTP Ping Monitor
* URL Shortener
📁 File & Utility Tools
* Google Drive File Upload + QR Generator
* QR Code Generator (Copy / Download / Share)
* Barcode Generator (CODE128)
* PDF Merge & Split (Clientside using pdflib)
* Base64 Encoder / Decoder
* Number System Converter (Decimal/Hex/Binary)
* Secure Password Generator
🖥️ System Info Viewer
Using advanced browser APIs:
* Public IP
* Local IP (WebRTC detection)
* CPU cores
* RAM estimate
* GPU renderer
* Browser & battery info
📱 APK Version
I converted the web app into an Android APK using a WebView wrapper.
This allows:
* Quick onsite troubleshooting
* Instant subnet calculation
* DNS testing on mobile
* QR generation without browser dependency
⚙️ Technologies Used
* HTML5
* CSS3
* Vanilla JavaScript
* QRCode.js
* JsBarcode
* pdflib
* Google Apps Script
* Public APIs (IP, DNS, Hosting)
🧠 What This Project Demonstrates
* Frontend engineering
* Networking fundamentals
* API integration
* Clientside file handling
* Mobile app packaging
* Realworld IT troubleshooting thinking
🏫 Project 2: School IT Admin Portal (Google Workspace Integration)
🎯 Objective
Create a centralized internal IT dashboard for managing school workflows without deploying a backend server.
🧱 Architecture
* Blogger (hosting)
* Google Forms (data input)
* Google Sheets (live reporting)
* Google Apps Script (admin automation)
* Custom HTML/CSS/JS dashboard
🔑 Key Features
* Darkmode IT dashboard
* Multiple embedded Google Forms
* Live Google Sheet view
* Floating action buttons (Admin / Call shortcuts)
* Realtime date & time
* Clean Blogger layout override
💡 Why It Matters
This project demonstrates:
* Workflow automation
* Lightweight infrastructure design
* Google Workspace integration
* UI customization inside constrained environments
* Practical IT operations management
It shows how enterprise tools can be combined to build structured internal systems without expensive infrastructure.
🏠 Project 3: Villa Network Monitoring Dashboard
🎯 Objective
Design a homelab style network monitoring panel to simulate realworld IT network operations.
📡 Features
🌐 WAN Monitoring
* Fast.com embedded speed test
* Public uptime monitoring page
* External network status tracking
🏠 LAN Monitoring
* Local speed test service
* Local monitoring dashboard
* LANonly service access (Private IP)
🎛️ Admin Dashboard UI
* Darkmode interface
* Floating quickaccess menu
* Realtime clock
* Blogger layout override
* Embedded monitoring tools
🧠 Concepts Applied
* Private vs Public IP separation
* LAN vs WAN monitoring
* Service endpoint testing
* Network visibility design
* Infrastructure thinking
* Dashboard engineering
This project simulates a mini Network Operations Center (NOC).
🔥 Combined Skills Demonstrated Across All Projects
These three projects together showcase:
✅ Networking fundamentals
✅ Subnetting & IP concepts
✅ DNS & hosting analysis
✅ Monitoring & uptime awareness
✅ Web development (Vanilla JS)
✅ API integration
✅ Clientside file processing
✅ Google Workspace automation
✅ Dashboard UI engineering
✅ Infrastructure visibility
✅ Lightweight system architecture
✅ Mobile deployment thinking
📈 What I Gained From These Builds
Through these projects, I strengthened my knowledge in:
* Practical subnet mathematics
* REST API integration
* Web security considerations
* Monitoring system design
* Internal workflow automation
* Frontend performance optimization
* Realworld IT troubleshooting approach
Most importantly:
I moved from “using tools” to “building tools”.
🚀 Future Enhancements
Planned improvements include:
* Prometheus + Grafana monitoring
* Dockerbased backend services
* SNMP monitoring integration
* JSON formatter & hash generator
* Authentication layer
* Progressive Web App (PWA) deployment
* Cloud deployment on AWS/Azure
💼 Final Thoughts
These projects reflect my approach as an IT professional:
Understand the problem.
Design lightweight systems.
Integrate existing tools intelligently.
Build practical solutions.
Rather than focusing only on theory, I focus on building real working systems that combine networking, web technologies, and infrastructure concepts.