Safenet - Networking & ICT Infrastructure

Developed the official digital platform for Safenet, Bangladesh's leading manufacturer of structured LAN cabling and ICT infrastructure. The platform replaces traditional paper catalogs with a dynamic, searchable digital inventory designed for network engineers and corporate procurement teams.

Sep 2024 - Oct 2024

live Demo

Technologies

#vue.js#Django(Python)#Bootstrap#REST API

Live Demo

Case Study Overview

# Safenet - Networking & ICT Infrastructure **Safenet is Bangladesh’s first homegrown structured LAN cabling brand, dedicated to manufacturing high-quality networking components. The platform serves as a B2B digital catalog for enterprise-grade ICT infrastructure, including Copper LAN systems, Fiber Optics, and Server Racks. My Role: Refining the digital presence of this brand involved creating a robust, data-heavy frontend that could handle complex technical specifications. As a frontend developer, I focused on building a scalable architecture that allows engineers and procurement officers to easily find and compare technical products. ### Key Contributions: * Complex Data Visualization: Designed and implemented detailed product specification tables and comparison views for technical components (e.g., cable attenuation tables). * Scalable Architecture: Built a modular Vue.js codebase that can easily expand to accommodate hundreds of new networking products. * Search & Filtering: Developed an advanced filtering system allowing users to drill down products by category, cable type (Cat6/Cat7), and connector specifications. * Brand Consistency: Ensured the UI strictly adhered to the brand's corporate identity, reflecting trust and reliability in the ICT sector. ### Tech Stack: * Frontend: Vue.js, Vuex (State Management), SCSS * Backend: Django (Python), REST Framework * Deployment: Nginx, Gunicorn

The Challenge

• Detailed Tech Specs: Presenting massive amounts of technical data (like cable resistance, voltage ratings, etc.) in a clean, readable mobile-friendly format was the biggest UI challenge. • Navigation Hierarchy: Organizing a deep catalog with multiple levels of nesting (Fiber -> Patch Cord -> Single Mode -> SC/APC) required a highly optimized navigation menu to prevent user frustration. • Image Optimization: High-resolution product zooms are critical for hardware inspection. managing these heavy assets without killing page load speed required advanced optimization strategies.

My Solution

•Modular Spec Components: Created a reusable "Specification Table" component that dynamically renders rows and columns based on the API response, ensuring consistency across all 500+ products. • Mega-Menu Implementation: Built a responsive mega-menu that visually categorizes products, reducing the number of clicks required to reach a specific item. • Dynamic Breadcrumbs: Implemented an automated breadcrumb system based on the Vue router to ensure users always know where they are in the deep hierarchy.