Instagram to Electrons

An interactive simulator that traces how online identity expression propagates through a planet-scale physical network.

Comment 1

Inspiration

Online identity feels deeply personal: a photo, a caption, a moment shared. But that act of expression only exists because of an immense amount of invisible infrastructure and decades of engineering.

I’ve always been fascinated by systems end-to-end: how human intent turns into software, how software turns into communication and internet protocols, and how those protocols ultimately become physical signals: electrons and photons moving through hardware and fiber.

This project was inspired by a simple question I kept coming back to: What actually happens, physically and logically, when I express my identity online as a post a photo on Instagram? (All the way down to the electrons when we strip away the abstractions)

Most people experience social media at the UI level. I wanted to propagate all the way down the stack, from REST APIs to sockets to syscalls to network protocols to physical transmission, electrons and quantum physics and take people along this journey.

What it does

Instagram to Electrons is an interactive visualization that reveals what the familiar upload progress bar actually represents.

On the left, a simplified Instagram-style interface allows a user to upload a photo. On the right, a vertically scrollable network stack shows what happens beneath the surface as that upload progresses.

As you scroll downward:

  • the upload bar advances toward 100%
  • each section explains what work is being done at that layer

The project walks through:

  1. application-level request construction
  2. the OS boundary and socket handoff
  3. TCP segmentation and reliability
  4. IP routing and hop-by-hop forwarding
  5. link-layer framing and MAC address resolution
  6. physical transmission as radio waves, electrical signals, and light

The goal is not to simulate every protocol detail, but to make the shape of the system visible: how responsibility shifts across layers, and how a single photo becomes part of a planet-scale physical process.

How I built it

The project is built as a Next.js application with a split-screen layout:

  • Left panel: a minimal Instagram-style UI with an upload interaction and progress bar
  • Right panel: a deterministic, scroll-based visualization of the networking stack
  • Clear abstraction boundaries between layers (application → OS → TCP → IP → link → physical)

Challenges I ran into

  • This is my first frontend heavy project. I don't do frontend at all, so I had to learn fast.
  • Choosing the right level of abstraction was difficult:
    • too shallow would be misleading
    • too deep would turn the project into a textbook
  • Translating an internal mental model into a visual experience that others could understand took more iteration than expected.
  • Resisting scope creep: networking stacks are deep enough that entire projects can be built on a single protocol.

Accomplishments that I am proud of

  • Turning a deeply technical, invisible process into an intuitive experience
  • Building an artifact that reflects how we think, not just what we can code

What I learned

  • All digital communication ultimately relies on electromagnetism and Maxwell's Equations

What's next for Instagram to Electrons

  • A full end-to-end implementation (real sockets, TCP/IP behavior, ARP, routing, and hop-by-hop forwarding) is too ambitious for a solo hackathon build, but it’s a direction I want to pursue next.

Built With

Share this project:

Updates