Firebase integration & module loading bug

While building FuturePath, one big hurdle was integrating Firebase (Firestore) with my vanilla HTML/JS quiz. I switched my scripts to

type="module"

to use

import

for the Firebase SDK, but after that the quiz stopped working: questions were not random, the timer and XP bar were not updating, and nothing obvious was failing.

At first there were no clear errors in the console, which made debugging confusing. I eventually realized the issue was how I was loading the modules and how the files were referenced. The browser could not find the correct

firebase-init.js

file via the relative path, so the import silently failed and the rest of the logic never ran properly.

To fix it, I:

• Opened DevTools and carefully checked the Network and Console tabs.
• Verified the folder structure and corrected the import paths (for example,

  import { db } from './firebase-init.js';

  vs

  ./js/firebase-init.js

  ).
• Made sure my

  <script type="module" src="js/quiz.js"></script>

  was at the bottom of the HTML and that Firebase SDK URLs were correct.

Once I fixed the module paths and script tags, the quiz logic (random questions, timer, XP/levels) started working as expected, and Firebase logging worked reliably. This taught me to always double-check module paths and use the browser console/network tab instead of guessing.