Merge pull request #18 from trishan9/trishan

feat: organized scalable folder structure for the project

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+pnpm-lock.yaml
 dist
 dist-ssr
 *.local

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

src/App.jsx

@@ -1,27 +1,25 @@
-import React, { useEffect, useState } from 'react';
-// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
-import './App.css';
-import './index.css';
+import { useEffect, useState } from "react";
+import "./styles/App.css";
+import "./styles/index.css";
 import {
   BrowserRouter as Router,
   Routes,
   Route,
   Navigate,
-  useLocation
-} from 'react-router-dom';
-import SearchResults from './components/search';
-import Login from './components/login';
-import SignUp from './components/register';
-import Home from './components/home';
-import Profile from './components/profile';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { auth } from './components/firebase';
-import Navbar from './components/Navbar';
-import CourseDetail from './components/CourseDetail';
-import Dashboard from './components/dashboard';
-import courses from './components/courseData';
-import Footer from './components/Footer';
+} from "react-router-dom";
+import SearchResults from "./pages/Search";
+import Login from "./pages/Login";
+import SignUp from "./pages/Register";
+import Home from "./pages/Home";
+import Profile from "./pages/Profile";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { auth } from "./services/firebase";
+import Navbar from "./components/Navbar";
+import CourseDetail from "./pages/CourseDetail";
+import Dashboard from "./pages/Dashboard";
+import courses from "./data/courseData";
+import Footer from "./components/Footer";
 
 function App() {
   const [user, setUser] = useState(null);
@@ -49,12 +47,14 @@ function App() {
     <Router basename={import.meta.env.BASE_URL}>
       {/* <RedirectWithState /> */}
       <div className="App">
-        <Navbar loggedin={user ? 'true' : 'false'} />
+        <Navbar loggedin={user ? "true" : "false"} />
         <div className="auth-wrapper">
           <div className="auth-inner">
-
             <Routes>
-              <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} />
+              <Route
+                path="/"
+                element={user ? <Navigate to="/profile" /> : <Login />}
+              />
               <Route path="/home" element={<Home />} />
               <Route
                 path="/login"
@@ -68,13 +68,12 @@ function App() {
               <Route path="/courses/:courseName" element={<CourseDetail />} />
               <Route path="/" element={<Dashboard courses={courses} />} />
               <Route path="/search" element={<SearchResults />} />
-
             </Routes>
             <ToastContainer />
           </div>
         </div>
       </div>
-       <Footer />
+      <Footer />
     </Router>
   );
 }

src/components/Navbar.jsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import logo from '../assets/images/logo.png';
-import { Link, useNavigate } from 'react-router-dom';
-import courses from './courseData'; 
+import React, { useState } from "react";
+import logo from "@/assets/images/logo.png";
+import { Link, useNavigate } from "react-router-dom";
+import courses from "@/data/courseData";
 
 function Navbar({ loggedin }) {
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [suggestions, setSuggestions] = useState([]);
   const navigate = useNavigate();
 
@@ -16,7 +16,7 @@ function Navbar({ loggedin }) {
 
     if (searchInput.trim()) {
       const filteredSuggestions = coursesArray.filter((course) =>
-        course.title.toLowerCase().includes(searchInput.toLowerCase())
+        course.title.toLowerCase().includes(searchInput.toLowerCase()),
       );
       setSuggestions(filteredSuggestions);
     } else {
@@ -28,7 +28,7 @@ function Navbar({ loggedin }) {
     event.preventDefault();
     if (searchTerm.trim()) {
       navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
-      setSuggestions([]); 
+      setSuggestions([]);
     }
   };
 
@@ -41,43 +41,90 @@ function Navbar({ loggedin }) {
   return (
     <nav className="navbar navbar-expand-lg sticky-top bg-body-tertiary">
       <div className="container-fluid">
-        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
-          data-bs-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarExample"
+          aria-controls="navbarExample"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
           <span className="navbar-toggler-icon"></span>
         </button>
-        <Link className="navbar-brand" to="/"><img src={logo} width="36" alt="Logo" className="rounded-circle" /></Link>
+        <Link className="navbar-brand" to="/">
+          <img src={logo} width="36" alt="Logo" className="rounded-circle" />
+        </Link>
         <div className="collapse navbar-collapse" id="navbarExample">
           <ul className="navbar-nav me-auto mb-0">
-            {loggedin === 'true' ? (
+            {loggedin === "true" ? (
               <li className="nav-item">
-                <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
+                <Link
+                  className="nav-link active"
+                  aria-current="page"
+                  to="/home"
+                >
+                  Home
+                </Link>
               </li>
             ) : (
               <li className="nav-item">
-                <Link className="nav-link active" aria-current="page" to="/">Home</Link>
+                <Link className="nav-link active" aria-current="page" to="/">
+                  Home
+                </Link>
               </li>
             )}
             <li className="nav-item">
-              <Link className="nav-link" aria-current="page" to="/events">Events</Link>
+              <Link className="nav-link" aria-current="page" to="/events">
+                Events
+              </Link>
             </li>
             <li className="nav-item dropdown">
-              <Link className="nav-link dropdown-toggle" to="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Courses</Link>
+              <Link
+                className="nav-link dropdown-toggle"
+                to="#"
+                role="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                Courses
+              </Link>
               <ul className="dropdown-menu">
-                <li><Link className="dropdown-item" to="/programming-languages">Programming Languages</Link></li>
-                <li><Link className="dropdown-item" to="/frameworks">Frameworks</Link></li>
-                <li><hr className="dropdown-divider" /></li>
-                <li><Link className="dropdown-item" to="/roadmaps">Roadmaps</Link></li>
+                <li>
+                  <Link className="dropdown-item" to="/programming-languages">
+                    Programming Languages
+                  </Link>
+                </li>
+                <li>
+                  <Link className="dropdown-item" to="/frameworks">
+                    Frameworks
+                  </Link>
+                </li>
+                <li>
+                  <hr className="dropdown-divider" />
+                </li>
+                <li>
+                  <Link className="dropdown-item" to="/roadmaps">
+                    Roadmaps
+                  </Link>
+                </li>
               </ul>
             </li>
           </ul>
 
-          {loggedin === 'true' ? (
+          {loggedin === "true" ? (
             <div className="d-flex align-items-center flex-column flex-lg-row">
-
               <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">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-search" viewBox="0 0 16 16">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      className="bi bi-search"
+                      viewBox="0 0 16 16"
+                    >
                       <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
                     </svg>
                   </span>
@@ -91,24 +138,34 @@ function Navbar({ loggedin }) {
                 </form>
 
                 {suggestions.length > 0 && (
-                  <ul className="list-group position-absolute w-100 mt-1 z-index-1000" style={{ zIndex: '1000' }}>
+                  <ul
+                    className="list-group position-absolute w-100 mt-1 z-index-1000"
+                    style={{ zIndex: "1000" }}
+                  >
                     {suggestions.map((suggestion, index) => (
                       <li
                         key={index}
                         className="list-group-item"
                         onClick={() => handleSuggestionClick(suggestion)}
-                        style={{ cursor: 'pointer' }}
+                        style={{ cursor: "pointer" }}
                       >
                         {suggestion.title}
                       </li>
                     ))}
                   </ul>
                 )}
               </div>
-              <span><Link className="btn clk rounded-circle" to="/profile"><i className="fa-regular fa-user"></i></Link> Profile</span>
+              <span>
+                <Link className="btn clk rounded-circle" to="/profile">
+                  <i className="fa-regular fa-user"></i>
+                </Link>{" "}
+                Profile
+              </span>
             </div>
           ) : (
-            <Link className="btn btn-primary clk" to="/login">Sign up</Link>
+            <Link className="btn btn-primary clk" to="/login">
+              Sign up
+            </Link>
           )}
         </div>
       </div>

src/context/ThemeContext.jsx

@@ -0,0 +1,21 @@
+import { createContext, useState, useContext } from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  return useContext(ThemeContext);
+};

src/hooks/useDemo.jsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+const useDemo = (initialValue = 0) => {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => {
+    setCount((prevCount) => prevCount + 1);
+  };
+
+  const decrement = () => {
+    setCount((prevCount) => prevCount - 1);
+  };
+
+  const reset = () => {
+    setCount(initialValue);
+  };
+
+  return { count, increment, decrement, reset };
+};
+
+export default useDemo;

src/main.jsx

@@ -1,13 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./styles/index.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
 
-
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);