WiFi Whisperer 📡

Inspiration

On college campuses, unreliable WiFi can be incredibly frustrating—especially when trying to submit assignments, attend Zoom calls, or study efficiently. I wanted to create a tool that helps students quickly find the best connectivity spots instead of guessing or wasting time moving around.

What it does

WiFi Whisperer is a real-time WiFi visualization tool that maps signal strength across a physical space. Users can scan their surroundings and contribute data points that generate a live heatmap of network quality. The system also identifies and recommends the best locations for strong, reliable connectivity.

How I built it

• Frontend: HTML, Tailwind CSS, Leaflet.js
• Backend: Python (Flask)
• Visualization: Leaflet Heatmap plugin
• Data Collection: Browser geolocation + simulated signal strength

The frontend communicates with a Flask backend that stores signal data and computes the strongest connection zones. The results are visualized as an interactive heatmap.

Challenges I ran into

• Browser security restrictions prevented direct access to WiFi signal strength
• Setting up real-time communication between devices on the same network
• Managing location permissions and ensuring consistent data flow

Accomplishments that I'm proud of

• Built a fully working real-time heatmap visualization
• Enabled cross-device interaction (phone → laptop live updates)
• Created an intuitive and visually clear interface

What I learned

• How to integrate geolocation data with mapping tools
• Building and connecting a frontend and backend in real time
• Rapid prototyping under time constraints

What's next for WiFi Whisperer

• Integrate real WiFi signal data using native or hardware-based scanning
• Add crowd-sourced data aggregation across multiple users
• Expand to indoor navigation and smart campus optimization

Built With

• html5
• leaflet.js
• python