How I Got Started With GSoC: Choosing My Org, Facing UI Challenges & Finding Community
Abhi MuraliThis kicks off a biweekly series documenting my GSoC 2025 journey with the Palisadoes Foundation on the “Enhanced SwitchMap-NG Web Features” project. I’ll share why I chose this org, early UI design challenges, and the amazing community support so far.
Why I Chose This Org for GSoC
I wanted to:
Work on a real-world problem (network monitoring)
Contribute primarily to frontend UI/UX improvements while gaining backend experience
Join a welcoming, mentor-driven community with full-stack opportunities
“Enhanced SwitchMap-NG Web Features” by Palisadoes Foundation matched perfectly. SwitchMap-NG is an SNMP-based network monitoring tool with a frontend in need of a refresh and backend components to learn from—ideal for my goal of becoming a full-stack developer with a frontend focus.
The First Task: UI Redesign
I dove into the existing setup and created a Figma prototype for the dashboard and device views.
What I Started With:
Researched LibreNMS and Cacti for UI inspiration
Structured flow: Dashboard → Device Details with tabs
Focused on responsiveness, intuitive charts, and simple navigation
Iteration, Feedback, and Fixes
What Didn’t Work:
Chart selection dropdowns caused slow loading and caching issues
Hover popups in Figma conflicted with click actions
Nested tabs were complex to prototype
What We Did Instead:
Collapsible chart lists per port for faster loading and caching
Mouse enter + delay workaround for clickable tooltips
Duplicated pages to simulate tabs instead of nested components
Removed separate Port Page; port-level details and charts integrated under Device Details tabs for better UX
Figma Tips That Helped
Wrapping components in frames fixed scrolling issues
Google Sheets Sync plugin helped import connection tables (manual fixes needed)
Invert Color plugin for light/dark mode previews
Bulk editing with multi-select + search saved time
Week 1-2 Output Summary
Dashboard: Device list split into SwitchMap-monitored and non-monitored
Device Details:
Tab 1: Device Overview—Mini topology, metadata, CPU/memory/uptime charts
Tab 2: Connection Details—Port-level data table integrated here
Tab 3: Connection Charts—Collapsible port list with time range filters and charts (bandwidth, packets, errors, discards)
The Best Part So Far: The Community
The Palisadoes Foundation community has been fantastic. Mentors are responsive, feedback is constructive, and the vibe on GitHub makes me feel part of something meaningful. If you’re considering GSoC, this org is definitely worth checking out.
What’s Next
Start frontend implementation with Next.js
Style skeleton pages and integrate placeholder data
Collaborate with backend developers to understand API and data flow
Media
🎥 Design Walkthrough Video
🔗 Figma Prototype
Let’s Connect
Feedback or experience with Figma and dashboards? Drop a comment or connect with me on GitHub!
More details: GSoC GitHub Discussion Thread
References & Credits
UI Design: Based on the Free Dark Admin Dashboards template from the Figma Community.
Icons: Sourced from the VisioVisio Icon Library and Cyber Security Icons.
Charts: Screenshot sourced from Observium, used for visual reference only in the design mockup.
Subscribe to my newsletter
Read articles from Abhi Murali directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by