Personal Catalogue: React & Firebase — Chapter 9, Exercise 1
=====================================================================

TASK
Move the Firebase config in firebase.js into VITE_-prefixed
environment variables, create separate .env.development and
.env.production files pointing at two different real Firebase
projects, and confirm npm run dev connects to the development project
while a production build connects to the other.

SOLUTION

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

# .env.development
VITE_FIREBASE_API_KEY=AIzaSy...dev
VITE_FIREBASE_AUTH_DOMAIN=catalogue-dev.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=catalogue-dev

# .env.production
VITE_FIREBASE_API_KEY=AIzaSy...prod
VITE_FIREBASE_AUTH_DOMAIN=catalogue-prod.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=catalogue-prod

Test 1 — development:
npm run dev, then add a test item through the running app. Checking
the Firebase console confirms the new document appears in the
catalogue-dev project's own Firestore data, not catalogue-prod.

Test 2 — production build:
npm run build, then serve the dist/ folder locally (e.g. `npx serve
dist`) and add a test item through that build. Checking the Firebase
console this time confirms the document appears in catalogue-prod
instead — Vite automatically loads .env.production values into any
build produced by `npm run build`, with no manual switch needed.

WHY THIS WORKS AS AN ANSWER
----------------------------
It moves every config value into environment variables rather than
just one, creates two real, separate Firebase projects rather than
reusing one, and confirms the isolation actually works by checking
which real project's own Firestore data receives a test write under
each mode.