Inspiration
Have you ever tried logging into your home router just to check who or what is currently connected to your Wi-Fi? It usually means digging up passwords, clicking through clunky, outdated menus, and waiting forever just to see a basic list of devices. I wanted to build something much better: a fast, modern, and lightweight dashboard that gives me a crystal-clear overview of my local network in seconds—no router login required.
What it does
The project is built using a streamlined full-stack architecture: ⚬ Backend: A Node.js and Express server utilizing the local-devices package to dynamically scan and retrieve active network device data (names, IP addresses, and MAC addresses). ⚬ Frontend: A clean, responsive user interface built with HTML, CSS, and vanilla JavaScript that fetches data asynchronously via the standard fetch API. ⚬ Delivery: The Express server acts as both the API provider and the static file host (express.static), allowing me to test the application seamlessly across different devices on my home network.
How we built it
Tackling this project came with several hurdles that really tested my debugging skills: ⚬ CORS & Connection Issues: Figuring out how to smoothly bridge the gap between the frontend UI and the local backend server. ⚬ Asynchronous Data Handling: Ensuring that network scan responses were correctly parsed as JSON and cleanly rendered in the UI without crashing. ⚬ Multi-Device Testing: Troubleshooting why my smartphone couldn't initially reach the local server, which gave me a much deeper understanding of local IP configurations and network routing.
Challenges we ran into
Tackling this project came with several hurdles that really tested my debugging skills: ⚬ CORS & Connection Issues: Figuring out how to smoothly bridge the gap between the frontend UI and the local backend server. ⚬ Asynchronous Data Handling: Ensuring that network scan responses were correctly parsed as JSON and cleanly rendered in the UI without crashing. ⚬ Multi-Device Testing: Troubleshooting why my smartphone couldn't initially reach the local server, which gave me a much deeper understanding of local IP configurations and network routing.
What we learned
Building this project taught me so much. I gained practical, hands-on experience with asynchronous JavaScript (fetch), backend routing with Express, and handling real-world network data. Most importantly, I learned how to push through roadblocks, debug errors step-by-step, and bring a fully functional project from scratch to life!
Log in or sign up for Devpost to join the conversation.