Protocols Visualizer: An Interactive Way to Learn Network Protocols

Understanding how network protocols work is often heavy going: RFCs and textbooks explain the concepts, but it's hard to "see" handshakes, packet structure, and attacks in action. Protocols Visualizer is a free, interactive web app that turns those ideas into visual, step-by-step flows and simulations. Try it here: https://protocols-visualizer.vercel.app/en The app is built around the OSI model . You can browse all seven layers — from Physical (Bluetooth, USB, Coaxial) up to Application (HTTP, DNS, FTP, SMTP) — and open each protocol to explore three main areas: Communication Flow (animated sequence diagrams), Packet Anatomy (interactive headers), and Attack Simulation (e.g. SYN Flood, ARP Spoofing, deauth, Bad USB). The goal is to make dense topics like TCP handshakes, IP routing, or common attacks easier to grasp by showing them in motion instead of only in text. The project is implemented with Next.js , React , TypeScript , and Tailwind CSS , and is available in English and Portugue