Mini MapReduce

A distributed text-processing demo that simulates how large-scale systems like Hadoop or Spark work - but entirely inside my browser and Node backend.

It splits input text into "shards," maps them in parallel to count words, and then reduces those partial counts into one final result - all with live progress tracking and real-time output visualization.

Mini MapReduce

Maximum file size: 3.5MB

Maximum text size: 3.5MB

Shards
πŸ• The Pizza-Shop Analogy

How MapReduce works in real life

Imagine you own a busy pizza restaurant, and one night, you get a huge order for 10,000 pizzas - all with different toppings. There's no way a single chef could make them all in time, right? So, you decide to divide the work.

1
The Manager Splits the Orders (MAP Phase)

You take that giant list of 10,000 orders and split it into smaller chunks. You hand each chunk to one of your 10 chefs, so everyone works in parallel.

Chef 1: 300 pepperoni, 200 cheese, 500 veggie
Chef 2: 250 pepperoni, 400 cheese, 350 veggie
Chef 3: 500 pepperoni, 100 cheese, 400 veggie
...and so on

Each chef keeps a mini report of what they made. This is the Map phase - each worker processes a piece separately.

2
Manager Collects Reports (SHUFFLE Phase)

Once all chefs finish, you collect all their reports. You shuffle all the data together by pizza type:

β€’ All "pepperoni" counts β†’ one pile
β€’ All "cheese" counts β†’ another pile
β€’ All "veggie" counts β†’ another pile
3
Manager Adds Everything Up (REDUCE Phase)

You go through each pile and combine the partial results:

Pepperoni: 300 + 250 + 500 + ... = 3,150 total
Cheese: 200 + 400 + 100 + ... = 2,870 total
Veggie: 500 + 350 + 400 + ... = 3,320 total

That's the Reduce phase - merging partial data into the final output.

⚑
Everyone Works in Parallel = Huge Speed Boost

If one chef made all 10,000 pizzas alone, it would take days. But by splitting the job among 10 chefs, everyone finishes at roughly the same time - results come back way faster.

πŸ’‘ That's distributed systems: divide, process in parallel, and combine the results!

πŸ’» How This App Relates to the Pizza Shop

My Mini MapReduce app works just like this pizza shop - but instead of chefs, you have workers. And instead of pizzas, they handle text data.

MAP Phase (Like the Chefs)

The input text (like shakespeare.txt) is split into shards (small chunks).

Each worker counts the words in its shard separately - just like each chef makes their pizzas independently.

REDUCE Phase (Like the Manager)

The app combines all those partial word counts into a final total for every word - just like the manager totaling up all the pizza types.

Result: Live Visualization

You see exactly how many times each word appears, with graphs, live progress, and downloadable output - all in real time! πŸ“Š

🌍 Why It Matters

This is how Google, Amazon, and tech giants handle massive datasets:

β€’

Google splits the web across thousands of servers to index it faster

β€’

Netflix splits recommendation data across machines to calculate user preferences

β€’

Banks process transactions in parallel to handle millions per second

πŸš€ My app is a miniature version of that, showing distributed computing - right inside a browser - with real-time visualization!

Advanced Details

This project simulates true distributed computation, using event-driven APIs and async workers, wrapped in a clean UI that feels like a data science dashboard.

You can:

  • Upload or type any text
  • Choose how many shards (parallel workers) to divide the job into
  • Watch each shard map its chunk of data into partial word counts
  • See the reducer combine those into a final aggregated result
  • View the entire pipeline's progress, timings, and word-frequency visualizations
  • Simulates true distributed computation with event-driven APIs and async workers

βš™οΈ Core Architecture

Frontend (Next.js + React)
Interactive dashboard with real-time progress tracking and charting
API Layer (/api routes)
Job creation, shard scheduling, and data aggregation
Worker System
Asynchronous map and reduce endpoints simulating background workers
Storage Layer (S3-Compatible)
Stores job artifacts and intermediate results

πŸ› οΈ Tech Stack

Stack Type:
Full-stack (Frontend + API + Storage + DB)
Frontend:
Next.js 15, React, TypeScript, Tailwind CSS
Backend:
Next.js API Routes (Node runtime), Prisma, S3-compatible storage
Database:
PostgreSQL
Storage:
AWS S3
Visualization:
Recharts (charts), preformatted JSON output
Dev Tools:
pnpm, ESLint, Prettier, Vercel

🧾 Credits

Developed by:
Yousef Jaber
Tech Stack:
Next.js β€’ TypeScript β€’ Prisma β€’ Tailwind β€’ AWS SDK
Category:
Full-stack distributed systems simulation
License:
MIT