Best Restaurant Meeting Point

This project is a React + TypeScript + Vite application that teaches Dijkstra's Algorithm through a restaurant meeting-point problem.

Two friends start on opposite sides of a coordinate grid. Several restaurants are placed between them. The app runs Dijkstra from each friend, visualizes how shortest-path estimates change over time, and then compares restaurants to choose the best meeting point by combined travel distance.

Features

• SVG-based weighted graph visualization
• Hidden coordinate grid used for layout and edge distance calculation
• Visible graph nodes limited to:
  • Friend A
  • Friend B
  • restaurants
• Step-by-step Dijkstra replay from both friends
• Educational explanation panel with:
  • how to read the visualization
  • current algorithm explanation
  • live distance table
• Restaurant scoring phase after both shortest-path runs complete
• Final recommended restaurant highlight with shortest paths

Tech Stack

• React 18
• TypeScript
• Vite
• Plain SVG rendering
• Inline style objects in src/styles/styles.ts

Project Structure

• src/App.tsx Main orchestration for graph generation, replay, and scoring phases.
• src/components/Controls.tsx Generate, run, and reset controls.
• src/components/GraphView.tsx SVG graph rendering, live distance badges, node states, and final path highlights.
• src/components/InfoPanel.tsx Educational explanation panel and distance / scoring tables.
• src/logic/generator.ts Graph generation for the two friends and restaurant nodes.
• src/logic/dijkstra.ts Dijkstra implementation, replay snapshots, and path reconstruction helpers.
• src/logic/scoring.ts Restaurant ranking and best-candidate selection.
• src/types/graph.ts Shared graph, replay, and scoring types.
• src/styles/styles.ts Shared colors and visual styles.

How It Works

1. Graph Generation

• The app uses a fixed 12 x 8 coordinate grid as a spatial reference.
• Friend A is placed near the left side.
• Friend B is placed near the right side.
• 4 to 7 restaurants are placed in the middle region.
• Edges are explicitly defined between nodes.
• Edge weights use Euclidean distance.

Important:

• The background grid is not the graph.
• Only connected nodes can be traversed.
• Nearby nodes are not automatically connected.

2. Dijkstra Replay

The app runs Dijkstra twice:

• Phase A: from Friend A
• Phase B: from Friend B

During replay:

• unexplored nodes stay neutral
• discovered nodes are highlighted red
• finalized nodes are highlighted green
• the active edge is highlighted blue
• live shortest-known distances are shown beside each visible node

3. Scoring Phase

After both shortest-path runs finish:

• each restaurant is scored using distance from A + distance from B
• restaurants are compared one by one
• the restaurant with the smallest total is selected

The final state highlights:

• the chosen restaurant
• the final shortest paths
• the total score comparison result

Getting Started

Requirements

• Node.js 20.x

This project includes:

• .nvmrc
• package.json engine constraint: >=20 <21

If you use nvm:

nvm use

Install

npm install

Start Dev Server

npm run dev

Vite is configured to use:

• dev server: 127.0.0.1:5173
• preview server: 127.0.0.1:4173

Build

npm run build

Preview Production Build

npm run preview

Git Notes

This repo includes a .gitignore for:

• node_modules/
• dist/
• *.tsbuildinfo
• .DS_Store

That keeps git add . fast and prevents generated files from being committed by mistake.

Known Limitations

• The current UI assumes exactly two friends: A and B.
• Restaurant selection currently uses combined-distance sum mode in the main app.
• The project is educational and replay-driven, so the animation intentionally favors clarity over speed.

Suggested Next Steps

• add a UI toggle for sum vs minimax scoring
• add automated tests for graph generation, Dijkstra replay snapshots, and scoring
• update PROJECT_STATUS.md so it matches the current visible-node-only graph model