What is the difference between 'git pull' and 'git fetch'?

The gap in what exists

While many explanations exist, a truly interactive, visually driven sandbox that isolates and animates these specific commands is less common.

Wedge to win

Target new developers or those struggling with conceptual understanding by offering a highly visual, interactive learning experience that simplifies complex Git actions.

Reputation value (worth doing free for proof) — 60/100

A well-executed interactive visualizer could gain significant attention on developer communities (e.g., Show HN, Reddit) and be a strong portfolio piece.

Likely monetization

unclear

Incumbents to beat

Git documentationAtlassian Git tutorialLearn Git BranchingStack Overflow answers

You are an expert developer building a modern interactive web application. Create a Next.js 16 App Router project with React 19 and Tailwind v4. The application should visually explain the difference between `git pull` and `git fetch`.

Here's the core functionality:
1.  **Dashboard/Landing Page**: A clear, minimalist interface focused on the two commands.
2.  **Interactive Visualization**: For each command (`git pull` and `git fetch`), create a step-by-step animation or a 'before/after' visual representation of a local repository and a remote repository.
    *   For `git fetch`, show remote tracking branches being updated without merging into the local working branch.
    *   For `git pull`, show `git fetch` followed by `git merge` (or `git rebase`, as an option if time permits) updating the local working branch.
3.  **Key Concepts**: Provide a concise summary of when to use each command, their side effects, and the common aliases/options (`--rebase`, `--ff-only`).
4.  **Simulated Git Repository**: A simple text-based UI or a small, embedded code editor where users can 'type' `git fetch` or `git pull` and see the visual changes reflected in the animation.
5.  **Technology Stack**: Next.js 16 App Router, React 19, Tailwind v4. No external database is strictly needed for the MVP.

**MVP Slice**: Focus first on the interactive visualization of `git fetch` and `git pull` with hardcoded repository states. Ensure the visual flow is intuitive and clearly distinguishes the two.

**Build/Verify Gate**: The core interactive visualizer for both commands is functional and clearly demonstrates the difference to someone new to Git within 5 minutes of interaction.