commenting

src/App.jsx

@@ -1,3 +1,24 @@
+/**
+ * Main Application Component for Smart Home
+ * Author: Jonah Carpenter
+ * Course: CSCI 354
+ * 
+ * 
+ * Description:
+ * This is the root component of the Smart Home application.
+ * It handles the main routing logic and protected routes implementation.
+ * The application uses React Router for navigation and implements
+ * authentication-based route protection.
+ * 
+ * Components Overview:
+ * - Homepage: Dashboard view for users
+ * - CatalogPage: Display of available IoT devices
+ * - DevicePage: Individual device management
+ * - EcosystemPage: IoT ecosystem integration
+ * - SecurityPage: Security settings and monitoring
+ * - Authentication components (Login, Signup, ResetPass)
+ */
+
 import React from 'react';
 import HomePage from './components/HomePage';
 import CatalogPage from './components/CatalogPage';
@@ -12,15 +33,19 @@ import Signup from './components/Signup';
 const App = () => {
   return (
     <>
+      {/* Main routing configuration */}
       <Routes>
+        {/* Public routes - Authentication related */}
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
+        <Route path="/reset-password" element={<ResetPass />} />
+
+        {/* Protected routes - Require authentication */}
         <Route path="/" element={<ProtectedRoute><HomePage /></ProtectedRoute>} />
         <Route path="/catalog" element={<ProtectedRoute><CatalogPage /></ProtectedRoute>} />
         <Route path="/devices" element={<ProtectedRoute><DevicePage /></ProtectedRoute>} />
         <Route path="/ecosystems" element={<ProtectedRoute><EcosystemPage /></ProtectedRoute>} />
         <Route path="/security" element={<ProtectedRoute><SecurityPage /></ProtectedRoute>} />
-        <Route path="/reset-password" element={<ResetPass />} />
       </Routes>
     </>
   );

src/components/CatalogPage.jsx

@@ -1,3 +1,32 @@
+/**
+ * @component CatalogPage
+ * @description Interactive catalog displaying smart home products and ecosystems
+ * 
+ * Features:
+ * - Dynamic data fetching from Firebase Realtime Database
+ * - Hierarchical display of products (categories -> devices -> models)
+ * - Expandable/collapsible sections with animations
+ * - Price and feature comparisons
+ * - Responsive design
+ * 
+ * Data structure:
+ * catalog/
+ *   ├── devices/
+ *   │   └── [device]/
+ *   │       └── models/
+ *   │           └── [model]/
+ *   │               ├── modelName
+ *   │               ├── price
+ *   │               ├── features[]
+ *   │               └── competitionDiff
+ *   ├── ecosystems/
+ *   ├── security/
+ *   └── additions/
+ * 
+ * @uses {firebase/database} for real-time data
+ * @uses {firebase/auth} for authentication
+ */
+
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { getAuth, signOut } from 'firebase/auth';
@@ -72,6 +101,13 @@ const CatalogPage = () => {
     }));
   };
 
+  /**
+   * Renders individual model information with expandable details
+   * @param {string} categoryKey - Category identifier
+   * @param {string} deviceKey - Device identifier
+   * @param {string} modelKey - Model identifier
+   * @param {Object} model - Model data object
+   */
   const renderModel = (categoryKey, deviceKey, modelKey, model) => (
     <div key={modelKey} className="model-card">
       <div onClick={() => toggleModel(categoryKey, deviceKey, modelKey)}>

src/components/DevicePage.jsx

@@ -7,6 +7,14 @@ import "../styles.css";
 import RobotHAS from '/images/robot_has.jpg'; // with import
 import RobotHK from '/images/robot_homekit.jpg'; // with import
 
+/**
+ * DevicePage Component
+ * 
+ * Presents comprehensive information about various smart home devices.
+ * Includes sections on thermostats, cleaning robots, smart lights, and misc devices.
+ * Features comparison images showing different ecosystem implementations.
+ */
+
 const DevicePage = () => {
   const navigate = useNavigate();
   const auth = getAuth();
@@ -39,6 +47,10 @@ const DevicePage = () => {
     });
   };
 
+  /**
+   * Gallery configuration for device comparison examples
+   * Shows how same devices appear in different ecosystems
+   */
   const galleryItems = [
     { src: RobotHAS, alt: "Robot Vacuum in Home Assistant" },
     { src: RobotHK, alt: "Robot Vacuum in HomeKit" },

src/components/EcosystemPage.jsx

@@ -7,6 +7,15 @@ import "../styles.css";
 import Alexa from '/images/alexa.jpg'; // with import
 import HK from '/images/homekit.jpg'; // with import
 import HAS from '/images/has.jpg'; // with import
+
+/**
+ * EcosystemPage Component
+ * 
+ * Provides detailed information about different smart home ecosystems.
+ * Features comparative analysis of major platforms (Alexa, HomeKit, etc.)
+ * Includes interactive image gallery with modal view functionality.
+ */
+
 const EcosystemPage = () => {
   const navigate = useNavigate();
   const auth = getAuth();
@@ -39,6 +48,10 @@ const EcosystemPage = () => {
     });
   };
 
+  /**
+   * Gallery configuration for ecosystem UI examples
+   * Contains image source and alt text for each ecosystem interface
+   */
   const galleryItems = [
     { src: Alexa, alt: "UI Example for Alexa" },
     { src: HK, alt: "UI Example for HomeKit" },

src/components/HomePage.jsx

@@ -1,3 +1,11 @@
+/**
+ * HomePage Component
+ * 
+ * Serves as the main landing page for the smart home application.
+ * Features navigation to different sections, an interactive image modal,
+ * and authentication protection.
+ */
+
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { getAuth } from 'firebase/auth';
@@ -30,6 +38,13 @@ const HomePage = () => {
     setModalContent({ isVisible: false, src: "", alt: "" });
   };
 
+  /**
+   * Navigation sections configuration
+   * Each section contains:
+   * - title: Display name for the section
+   * - description: Brief overview of section contents
+   * - link: Router path to the section
+   */
   const sections = [
     {
       title: "Devices",

src/components/Login.jsx

@@ -5,6 +5,24 @@ import { useNavigate } from 'react-router-dom';
 import firebaseConfig from '../secrets/firebase';
 import Footer from './Footer';
 
+/**
+ * @component Login
+ * @description Handles user authentication using Firebase
+ * 
+ * Features:
+ * - Email/password authentication
+ * - Form validation
+ * - Loading states
+ * - Success/error messages
+ * - Auto-redirect for authenticated users
+ * 
+ * Security features:
+ * - Firebase authentication integration
+ * - Session management
+ * - Protected route redirection
+ * - Loading state prevention of double submission
+ */
+
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);

src/components/Nav.jsx

@@ -1,3 +1,21 @@
+/**
+ * @component Nav
+ * @description Main navigation component with responsive design
+ * 
+ * Features:
+ * - Responsive hamburger menu
+ * - Dynamic route links
+ * - Animated menu transitions
+ * - Logout functionality
+ * - Click outside to close
+ * 
+ * Implementation details:
+ * - Uses CSS transitions for smooth animations
+ * - Manages body scroll during menu open
+ * - Handles authentication state
+ * - Provides visual feedback during logout
+ */
+
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { getAuth, signOut } from 'firebase/auth';

src/components/ProtectedRoute.jsx

@@ -1,3 +1,19 @@
+/**
+ * @component ProtectedRoute
+ * @description Higher-order component that protects routes from unauthorized access
+ * 
+ * Features:
+ * - Authentication state monitoring
+ * - Automatic redirect to login
+ * - Handles logout state
+ * - Loading state management
+ * 
+ * @param {ReactNode} children - The components to render if authenticated
+ * @returns {ReactNode} Protected route content or redirect
+ * 
+ * Note: Uses Firebase Auth to manage authentication state
+ */
+
 import React, { useState, useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import { getAuth, onAuthStateChanged } from 'firebase/auth';

src/components/ResetPass.jsx

@@ -1,3 +1,20 @@
+/**
+ * @component ResetPass
+ * @description Handles password reset functionality using Firebase Authentication
+ * 
+ * Features:
+ * - Current password verification
+ * - New password validation
+ * - Password confirmation matching
+ * - Success/error message display
+ * - Automatic redirect after success
+ * 
+ * Security measures:
+ * - Re-authentication before password change
+ * - Password confirmation check
+ * - Error handling for invalid credentials
+ */
+
 import React, { useState } from 'react';
 import { getAuth, signInWithEmailAndPassword, updatePassword } from 'firebase/auth';
 import { useNavigate } from 'react-router-dom';

src/components/SecurityPage.jsx

@@ -5,6 +5,13 @@ import Nav from './Nav';
 import Footer from './Footer';
 import "../styles.css";
 
+/**
+ * SecurityPage Component
+ * 
+ * Displays information about smart home security features and best practices.
+ * Implements authentication check to ensure only logged-in users can access the page.
+ * Contains detailed sections about various security devices and their implementation.
+ */
 const SecurityPage = () => {
   const navigate = useNavigate();
   const auth = getAuth();
@@ -27,6 +34,10 @@ const SecurityPage = () => {
     });
   };
 
+  /**
+   * Main sections data structure containing security information
+   * Each section has a title and an array of content paragraphs
+   */
   const sections = [
     {
       title: "Enhance Your Security with Smart Devices",

src/components/Signup.jsx

@@ -3,6 +3,20 @@ import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';
 import { useNavigate } from 'react-router-dom';
 import Footer from './Footer';
 
+/**
+ * @component Signup
+ * @description Handles new user registration using Firebase Authentication
+ * 
+ * Features:
+ * - Email and password validation
+ * - Error handling and display
+ * - Navigation to login page
+ * - Protected route integration
+ * 
+ * @uses {firebase/auth} for user creation
+ * @uses {react-router-dom} for navigation
+ */
+
 const Signup = () => {
   const navigate = useNavigate();
   const [email, setEmail] = useState('');

src/styles.css

@@ -1,6 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
-
-/* Base variables */
+/* Main stylesheet for Smart Home IoT Hub
+   Author: [Your Name]
+   Course: CSCI 354 - Web Development
+   Professor: [Professor's Name]
+   Description: This stylesheet provides comprehensive styling for the Smart Home IoT Hub,
+   implementing a modern, responsive design with a focus on accessibility and user experience.
+*/
+
+/* Base CSS Variables - Used for consistent theming across components */
 :root {
   --color-primary: #2d3436;
   --color-accent: #6c5ce7;
@@ -29,7 +35,7 @@
   --font-size-2xl: 2rem;
 }
 
-/* Global body styling */
+/* Global styling for basic elements */
 body {
   font-family: var(--font-primary);
   margin: 0;
@@ -45,7 +51,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Layout */
+/* Layout Components - Organized in a mobile-first approach */
 .page {
   min-height: 100vh;
   display: flex;
@@ -62,7 +68,7 @@ body {
   flex-direction: column;
 }
 
-/* Content styling */
+/* Component-Specific Styles - Modular design pattern */
 .content {
   max-width: 1200px;
   margin: 0 auto;
@@ -942,7 +948,7 @@ header {
   display: none;
 }
 
-/* Mobile Responsiveness */
+/* Responsive Design Breakpoints - Supporting multiple device sizes */
 @media screen and (max-width: 768px) {
   .nav {
     background: var(--color-primary);