Bug Fix: Dot and Cross Product Visualizations (BUG-020)

[TechGenius-Karan]

📘 Pull Request Template – PhysicsHub

Thank you for contributing to PhysicsHub!
Please complete the sections below to help us review your pull request efficiently.

---

🔍 Description

What was wrong:
The VectorsOperations simulation had both the dot product and cross product modes drawing identical
visuals — just three plain lines for vectors A, B, and a result. There was no visual difference
between the two operations, making the simulation useless for understanding what each operation
actually means geometrically.

What was fixed:

• Cross product now draws a shaded parallelogram formed by vectors A and B, which is the standard
  geometric representation (the magnitude of the cross product equals the area of this
  parallelogram). The result vector is drawn perpendicular to indicate the out-of-plane direction.
• Dot product now draws a projection of vector A onto vector B, with a right-angle marker at the
  foot of the projection — showing the geometric meaning of the dot product as "how much of A points
  in the direction of B."

---

Bug Fix: Node.js 22+ SSR Compatibility (localStorage TypeError)

What was wrong:
Node.js 22 and above ships with a built-in localStorage global. However, without a
--localstorage-file path configured, the object exists but its methods (getItem, setItem, etc.) are
undefined. When Next.js renders pages on the server, it hits this broken global and throws:
TypeError: localStorage.getItem is not a function
This caused the entire app to return a 500 error on every page load.

What was fixed:

• Added instrumentation.ts (a Next.js server startup hook) that detects the broken Node.js
  localStorage stub and replaces it with a safe in-memory no-op before any rendering happens. This
  only runs on the server — browsers continue using real localStorage normally.
• Also hardened useTheme.tsx to use window.localStorage?.getItem() with a try-catch as an extra
  defensive layer.

Closes #BUG-020 (if applicable)

---

✅ Checklist

Before requesting a review, please ensure that you have:

• Verified that the project builds and runs locally (npm run dev)
• Ensured no ESLint or TypeScript warnings/errors remain
• Updated documentation, comments, or in-code explanations where needed
• Verified responsiveness across devices (desktop, tablet, mobile)
• Followed the CONTRIBUTING.md guidelines

---

🎨 Visual Changes (if UI-related)

Visual Changes – Before & After

Before (both modes looked identical):

Both modes rendered the same three plain lines — there was no visual difference between them,
making the simulation misleading.

---

After:
Dot Product (After) :

Dot Product — Shows vector A projected onto vector B, with a right-angle marker at the base of the
projection. Make sure to select "Dot Product" from the operation dropdown to see this view.

Cross Product (After) :

Cross Product — Shows a shaded parallelogram formed by vectors A and B. The area of this
parallelogram represents the magnitude of the cross product.

---

📂 Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• ♻️ Refactor / code quality improvement
• 🎨 UI/UX enhancement
• 🔒 Security improvement

---

🧩 Additional Notes for Reviewers

Maybe try running these changes on your local system first, before merging it directly. The localStorage issue was a big problem on my system, but I am not sure if it is the same for everyone.

[vercel]

@TechGenius-Karan is attempting to deploy a commit to the PhysicsHub's projects Team on Vercel.

A member of the Team first needs to authorize it.

[mattqdev]

Hey! Thank you for this!