All projects

Coursework · Apr 2024

DebDob: Wikipedia Racer

A playful Wikipedia race that turned classroom search algorithms into a very real fight with latency and scale.

My contribution

Led the frontend and backend infrastructure, including search, D3 path visualisation, caching, Docker, and HTTP integration.

DebDob: Wikipedia Racer screenshot 1
1 / 5

A familiar idea in an unfamiliar form

DebDob was both genuinely fun and unexpectedly exhausting. Our Algorithm Strategies course asked us to turn breadth-first search and iterative deepening into a race across Wikipedia.

I had seen social media trends about how many connections separate one person from another. Wikipedia racing felt like the same idea, except every step moved through an article link. The name came from our teammate Dabbir, who we called Deb. We added Dob simply because it sounded good.

At the time, I was actively learning frontend development. One teammate was especially interested in the algorithms, so our responsibilities separated naturally.

I led much of the frontend, including the search form, Wikipedia autocomplete, and graph visualization. I also worked on caching, Docker, and integration with the Go backend.

Making a search visible

A list of article titles would technically show the result, but it would not communicate how the pages connected. I wanted every article to become a node and every link to become an edge so people could see where multiple shortest paths separated and rejoined.

Building that visualization with D3 was difficult. I spent a lot of time reading documentation and studying other GitHub projects before I could turn the API response into a readable graph. That made the result especially satisfying.

The algorithms could be correct while the application still felt slow. Every expansion required downloading and parsing real Wikipedia pages. Internet speed and request limits became part of the search.

I worked on a cache so the application could reuse article links it had already discovered. It taught me that real optimization often happens around an algorithm as much as inside it.

Understanding BFS beyond the classroom

Breadth-first search is useful when finding the shortest path matters, but each level can contain an enormous number of pages. Iterative deepening explores with a growing depth limit, trading repeated work for a different memory and search profile.

Watching both strategies operate on Wikipedia made their tradeoffs concrete. The graph was no longer a small lecture diagram. It was a live network with unpredictable branching, latency, rate limits, and thousands of possible paths.

I would show live search progress, including the current depth, visited pages, and frontier size. I would also make dense graphs easier to navigate.

On the backend, I would add stronger time limits and improve the cache so the project could work reliably as a public application rather than only as coursework.

BFS:  T,S=O ⁣(bd)IDS:  T=O ⁣(bd),  S=O(bd)\mathrm{BFS:}\; T,S = O\!\left(b^{d}\right) \qquad \mathrm{IDS:}\; T = O\!\left(b^{d}\right),\; S = O(bd)
Both strategies can explore an exponential number of links, but iterative deepening trades repeated work for a much smaller memory footprint.

What stayed with me

  • A correct algorithm can still be slow when the internet is part of the loop.
  • Visualization can make an abstract search feel understandable.
  • Real optimization often happens around the algorithm.

Run it locally

Clone the source repository or download the project ZIP, then run these commands from the project folder.

Explore the complete project

Download the source, assets, and included documentation as a ZIP archive.

Download project ZIP
bash

Backend (Go)

$ cd Tubes2_BE_DebDob/src
$ go mod download
$ go run .

# listens on :8000

Frontend (second terminal)

$ cd Tubes2_FE_debdob/src
$ npm install
$ echo 'NEXT_PUBLIC_API_URL=http://localhost:8000/' > .env.local
$ npm run dev

# open http://localhost:3104/start and try
# 'Nasi goreng' to 'Padang', or 'Bandung' to 'Indonesia' for a fast one