minor code changes

src/App.css

@@ -49,9 +49,8 @@ background: rgb(186 22 163) !important;
   transition: width 0.3s ease-in-out;
 }
 
-/* Expanded state when the input is focused */
 .search-expanded .form-control {
-  width: 300px; /* You can adjust this width */
+  width: 300px; 
 }
 .btn{
   background-color: rgb(186 22 163) !important;

src/App.jsx

@@ -49,13 +49,11 @@ function App() {
     <Router basename={import.meta.env.BASE_URL}>
       {/* <RedirectWithState /> */}
       <div className="App">
-        {/* Pass user status as loggedin prop to Navbar */}
         <Navbar loggedin={user ? 'true' : 'false'} />
         <div className="auth-wrapper">
           <div className="auth-inner">
 
             <Routes>
-              {/* Redirect to profile if the user is logged in */}
               <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} />
               <Route path="/home" element={<Home />} />
               <Route

src/components/CourseDetail.jsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import courses from './courseData'; // Ensure the path is correct
+import courses from './courseData'; 
 import YouTubeEmbed from './YouTubeEmbed';
-import { marked } from 'marked';  // Import the marked library
+import { marked } from 'marked';  
 
 function CourseDetail() {
   const { courseName } = useParams();
-  const courseKey = courseName.toLowerCase(); // Ensure proper formatting
-  const course = courses[courseKey]; // Lookup using the sanitized course key
+  const courseKey = courseName.toLowerCase(); 
+  const course = courses[courseKey]; 
 
   if (!course) {
     return <h2 className="text-center">Course not found</h2>;
   }
 
-  // Function to convert markdown to HTML using 'marked'
   const renderMarkdown = (markdownText) => {
     return { __html: marked(markdownText) };
   };
@@ -25,8 +24,6 @@ function CourseDetail() {
       <p className='text-center'>{course.description}</p>
       <h4 className='text-center'>Course Content:</h4>
       <YouTubeEmbed videoId={course.ytb_vid} />
-
-      {/* Use dangerouslySetInnerHTML to inject the HTML from the markdown */}
       <div dangerouslySetInnerHTML={renderMarkdown(course.content)} />
 
       <h6><span className="badge bg-primary"><i className="fa-solid fa-pen-nib"></i> {course.author}</span></h6>

src/components/Footer.jsx

@@ -6,9 +6,9 @@ export default function Footer() {
 
   return (
     <footer className=" text-center text-lg-start align-items-center fixed-bottom">
-      {/* Back and Forward Buttons */}
+
       <div className="d-flex justify-content-between p-3">
-        {/* Back Button - Left Side */}
+
         <button className="btn btn-secondary" onClick={() => navigate(-1)}>
           <i className="fa-solid fa-circle-left"></i> back
         </button>
@@ -21,9 +21,6 @@ export default function Footer() {
         </button>
       </div>
 
-      {/* Copyright */}
-
-      {/* Copyright */}
     </footer>
   );
 }

src/components/Navbar.jsx

@@ -1,19 +1,17 @@
 import React, { useState } from 'react';
 import logo from '../assets/images/logo.png';
 import { Link, useNavigate } from 'react-router-dom';
-import courses from './courseData'; // Assuming this is your courses object
+import courses from './courseData'; 
 
 function Navbar({ loggedin }) {
   const [searchTerm, setSearchTerm] = useState('');
   const [suggestions, setSuggestions] = useState([]);
   const navigate = useNavigate();
 
-  // Handle search input change
   const handleSearchChange = (event) => {
     const searchInput = event.target.value;
     setSearchTerm(searchInput);
 
-    // Convert courses object to an array for filtering
     const coursesArray = Object.values(courses);
 
     if (searchInput.trim()) {
@@ -26,16 +24,14 @@ function Navbar({ loggedin }) {
     }
   };
 
-  // Handle search submission when "Enter" is pressed
   const handleSearchSubmit = (event) => {
     event.preventDefault();
     if (searchTerm.trim()) {
       navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
-      setSuggestions([]); // Clear suggestions after search
+      setSuggestions([]); 
     }
   };
 
-  // Handle suggestion click
   const handleSuggestionClick = (suggestion) => {
     setSearchTerm(suggestion.title);
     navigate(`/search?query=${encodeURIComponent(suggestion.title)}`);
@@ -75,10 +71,9 @@ function Navbar({ loggedin }) {
             </li>
           </ul>
 
-          {/* Profile or Sign up Button */}
           {loggedin === 'true' ? (
             <div className="d-flex align-items-center flex-column flex-lg-row">
-              {/* Search Bar */}
+
               <div className="me-2 mb-2 mb-lg-0 position-relative">
                 <form className="input-group" onSubmit={handleSearchSubmit}>
                   <span className="input-group-text" id="basic-addon1">
@@ -95,7 +90,6 @@ function Navbar({ loggedin }) {
                   />
                 </form>
 
-                {/* Suggestions Dropdown */}
                 {suggestions.length > 0 && (
                   <ul className="list-group position-absolute w-100 mt-1 z-index-1000" style={{ zIndex: '1000' }}>
                     {suggestions.map((suggestion, index) => (

src/components/courseData.js

@@ -244,7 +244,7 @@ const courses = {
       \n### Why Oh My Zsh?
       \n<code>Oh My Zsh</code> is an open source framework, used to customize zsh as well as manage its configs.
       \n## Steps Performed:
-      \n---
+      \n--- 
       \n### ZSH Installation
       \nInstallation may differ according to your OS. [See here](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH)
       \n**For Ubuntu**: <code> $ sudo apt intall zsh</code>

src/components/firebase.jsx

@@ -1,12 +1,6 @@
-// Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
-
-// Your web app's Firebase configuration
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
   apiKey: "AIzaSyCYeWoa0iKtDr9VV2iSZ9tZQqyWuBHWXnU",
   authDomain: "opencourses-6a478.firebaseapp.com",
@@ -16,8 +10,6 @@ const firebaseConfig = {
   appId: "1:139996396922:web:5e0aec9a81d6aa30182ac3",
   measurementId: "G-1T13ESR8EJ"
 };
-
-// Initialize Firebase
 const app = initializeApp(firebaseConfig);
 
 export const auth=getAuth();

src/components/home.jsx

@@ -1,11 +1,10 @@
-// Home.jsx
 import React from 'react';
 import Dashboard from './dashboard';
 import courses from './courseData';
 
 function Home() {
   return (
-    <Dashboard courses={courses} />  // Pass the courses as props
+    <Dashboard courses={courses} />  
   );
 }
 

src/components/login.jsx

@@ -2,7 +2,7 @@ import { signInWithEmailAndPassword } from "firebase/auth";
 import React, { useState } from "react";
 import { auth } from "./firebase";
 import { toast } from "react-toastify";
-import { Link } from "react-router-dom"; // Import Link from react-router-dom
+import { Link } from "react-router-dom"; 
 
 function Login() {
   const [email, setEmail] = useState("");
@@ -13,7 +13,7 @@ function Login() {
     try {
       await signInWithEmailAndPassword(auth, email, password);
       console.log("User logged in Successfully");
-      window.location.href = "/profile"; // Keep this as it is if using a full page reload
+      window.location.href = "/profile"; 
       toast.success("User logged in Successfully", {
         position: "top-center",
       });

src/components/profile.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { auth, db } from "./firebase";
 import { doc, getDoc } from "firebase/firestore";
-import Navbar from "./Navbar";
 function Profile() {
   const [userDetails, setUserDetails] = useState(null);
   const fetchUserData = async () => {
@@ -33,7 +32,6 @@ function Profile() {
   }
   return (
     <div className="text-center">
-      {/* <Navbar loggedin='true'></Navbar> */}
       {userDetails ? (
         <>
           <div style={{ display: "flex", justifyContent: "center" }}>
@@ -45,10 +43,7 @@ function Profile() {
           </div>
           <h3>Welcome, {userDetails.firstName} 🤗!</h3>
           <div>
-            <p>Email: {userDetails.email}</p>
-            {/* <p>First Name: {userDetails.firstName}</p> */}
-            {/* <p>Last Name: {userDetails.lastName}</p> */}
-
+            <p>Email: {userDetails.email}</p> 
           </div>
           <button className="btn" onClick={handleLogout}>
             <i className="fa-solid fa-right-from-bracket"></i> Logout

src/components/register.jsx

@@ -3,8 +3,7 @@ import React, { useState } from "react";
 import { auth, db } from "./firebase";
 import { setDoc, doc } from "firebase/firestore";
 import { toast } from "react-toastify";
-import { Link } from "react-router-dom"; // Import Link from react-router-dom
-
+import { Link } from "react-router-dom"; 
 function Register() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -39,7 +38,7 @@ function Register() {
 
   return (
     <>
-      {/* <Navbar/> */}
+
       <form onSubmit={handleRegister} className="container mt-5 w-25">
         <h3>Sign Up</h3>
 

src/components/search.jsx

@@ -10,8 +10,6 @@ const useQuery = () => {
 function SearchResults() {
   const query = useQuery();
   const searchTerm = query.get('query')?.toLowerCase() || '';
-
-  // Filter courses based on the search term
   const filteredCourses = Object.entries(courses).filter(([key, course]) =>
     course.title.toLowerCase().includes(searchTerm) ||
     course.description.toLowerCase().includes(searchTerm)