From 23913f40bf956c1253b8c62428e56ed67feeeb5b Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Mon, 12 Aug 2024 22:28:36 +0530
Subject: [PATCH 1/8] chore: Refactor variable names for consistency

---
 src/components/Topbar/Activity/ActivityList.jsx | 4 ++--
 src/components/Topbar/Activity/index.jsx        | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Topbar/Activity/ActivityList.jsx b/src/components/Topbar/Activity/ActivityList.jsx
index 742aefca..562126ad 100644
--- a/src/components/Topbar/Activity/ActivityList.jsx
+++ b/src/components/Topbar/Activity/ActivityList.jsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function ActivityList({ value, toggle, acitvitylist, classname }) {
+function ActivityList({ value, toggle, activityList, classname }) {
   const classes = useStyles();
 
   return (
@@ -36,7 +36,7 @@ function ActivityList({ value, toggle, acitvitylist, classname }) {
       <Grid container spacing={2} className={classname}>
         <Grid item xs={12}>
           <Stack spacing={2} direction={"row"}>
-            {acitvitylist.map((item, index) => (
+            {activityList.map((item, index) => (
               <Button
                 variant="outlined"
                 color="primary"
diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx
index ae6199c2..d16a2b6a 100644
--- a/src/components/Topbar/Activity/index.jsx
+++ b/src/components/Topbar/Activity/index.jsx
@@ -18,11 +18,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Activity() {
+function Activity({ handleFeedChange }) {
   const classes = useStyles();
   const [List, setList] = useState(1);
 
-  const acitvitylist = [
+  const activityList = [
     {
       id: 1,
       icon: LocalOfferIcon,
@@ -52,8 +52,9 @@ function Activity() {
               value={List}
               toggle={item => {
                 setList(item.id);
+                handleFeedChange(activityList[item.id - 1].text);
               }}
-              acitvitylist={acitvitylist}
+              activityList={activityList}
             />
           </Grid>
         </div>

From 903866eb2c548c248160ac08a3f89f92f3c829dc Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Mon, 12 Aug 2024 22:30:14 +0530
Subject: [PATCH 2/8] feat: Update homepage feed by sorting the tutorials based
 on the selected filter type

---
 src/components/HomePage/index.jsx             | 43 +++++++++----
 .../DiscoverCodelabz/CodelabzCarousel.jsx     | 62 +++++++++++++------
 src/store/actions/tutorialPageActions.js      |  4 +-
 3 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx
index e8190e6b..504a276e 100644
--- a/src/components/HomePage/index.jsx
+++ b/src/components/HomePage/index.jsx
@@ -43,7 +43,10 @@ function HomePage({ background = "white", textColor = "black" }) {
   const dispatch = useDispatch();
   const firebase = useFirebase();
   const firestore = useFirestore();
-  const [value, setValue] = useState(2);
+  const tutorialFeedArray = useSelector(
+    ({ tutorialPage }) => tutorialPage.feed.homepageFeedArray
+  );
+  const [tutorials, setTutorials] = useState(tutorialFeedArray);
   const [selectedTab, setSelectedTab] = useState("1");
   const [visibleModal, setVisibleModal] = useState(false);
   const [footerContent, setFooterContent] = useState([
@@ -176,17 +179,35 @@ function HomePage({ background = "white", textColor = "black" }) {
     };
     getFeed();
   }, []);
-  const tutorials = useSelector(
-    ({
-      tutorialPage: {
-        feed: { homepageFeedArray }
-      }
-    }) => homepageFeedArray
-  );
 
   const notification = () => {};
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
+
+  const convertToDate = timestamp => {
+    return new Date(timestamp.seconds * 1000);
+  };
+
+  const handleFeedChange = filterType => {
+    let filteredTutorials;
+
+    switch (filterType) {
+      // TODO
+      // case "Featured":
+      //   break;
+      case "New":
+        filteredTutorials = [...tutorials].sort(
+          (a, b) => convertToDate(b.createdAt) - convertToDate(a.createdAt)
+        );
+        break;
+      case "Top":
+        filteredTutorials = [...tutorials].sort(
+          (a, b) => b.upVotes - a.upVotes
+        );
+        break;
+      default:
+        filteredTutorials = tutorials;
+    }
+
+    setTutorials(filteredTutorials);
   };
   const handleTabChange = (event, newValue) => {
     setSelectedTab(newValue);
@@ -234,7 +255,7 @@ function HomePage({ background = "white", textColor = "black" }) {
             onSidebarClick={e => closeModal(e)}
           />
           <Card className={classes.card}>
-            <Activity />
+            <Activity handleFeedChange={handleFeedChange} />
           </Card>
           <Box item sx={{ display: { md: "none" } }}>
             <TagCard tags={tags} />
diff --git a/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx b/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx
index 67fe28c7..0bf2cbff 100644
--- a/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx
+++ b/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx
@@ -52,10 +52,10 @@ const useStyles = makeStyles(theme => ({
 
 const CodelabzCarousel = ({ sortBy }) => {
   const classes = useStyles();
-
-  const tutorials = useSelector(
+  const tutorialFeedArray = useSelector(
     ({ tutorialPage }) => tutorialPage.feed.homepageFeedArray
-  ) || [0, 0, 0, 0, 0, 0];
+  );
+  const [tutorials, setTutorials] = useState(tutorialFeedArray);
   const profileData = useSelector(({ firebase: { profile } }) => profile);
   const dispatch = useDispatch();
   const firestore = useFirestore();
@@ -74,23 +74,47 @@ const CodelabzCarousel = ({ sortBy }) => {
     return () => {};
   }, [firestore, dispatch]);
 
-  console.log(tutorials);
+  useEffect(() => {
+    handleFeedChange(sortBy);
+  }, [sortBy, tutorialFeedArray]);
+
+  const convertToDate = createdAt => {
+    return new Date(createdAt.seconds * 1000);
+  };
+
+  const handleFeedChange = filterType => {
+    let filteredTutorials;
+    const oneMonthAgo = new Date().setMonth(new Date().getMonth() - 1);
+    const twoWeeksAgo = new Date().setDate(new Date().getDate() - 14);
 
-  const getTitle = () => {
-    switch (sortBy) {
+    switch (filterType) {
       case "trending":
-        return "Trending Now";
-      case "featured":
-        return "Featured on Codelabz";
+        filteredTutorials = [...tutorials]
+          .filter(tutorial => convertToDate(tutorial.createdAt) > twoWeeksAgo)
+          .sort((a, b) => b.upVotes - a.upVotes);
+        break;
       case "best":
-        return "Best of this month";
+        filteredTutorials = [...tutorials]
+          .filter(tutorial => convertToDate(tutorial.createdAt) > oneMonthAgo)
+          .sort((a, b) => b.upVotes - a.upVotes);
+        break;
+      // TODO : Add featured tutorials
+      // case "featured":
+      // break;
+      default:
+        filteredTutorials = tutorials;
     }
+
+    setTutorials(filteredTutorials);
   };
+
   return (
     <>
       <Paper variant="outlined" className={classes.container}>
         <Typography variant="h4" className={classes.heading}>
-          {getTitle()}
+          {sortBy === "trending" && "Trending Now"}
+          {sortBy === "best" && "Best of the Month"}
+          {sortBy === "featured" && "Featured on Codelabz"}
         </Typography>
         <Swiper
           modules={[Navigation]}
@@ -101,9 +125,9 @@ const CodelabzCarousel = ({ sortBy }) => {
           spaceBetween={20}
           style={{ padding: "20px 20px" }}
         >
-          {tutorials.map((tutorial, i) => {
-            return tutorial == 0 ? (
-              <SwiperSlide>
+          {tutorials.map((tutorial, i) => (
+            <SwiperSlide key={i}>
+              {!tutorial ? (
                 <Paper variant="outlined" className={classes.root}>
                   <Skeleton
                     variant="rectangular"
@@ -114,9 +138,7 @@ const CodelabzCarousel = ({ sortBy }) => {
                   <Skeleton width={"100%"} height={"25px"} />
                   <Skeleton width={"60%"} height={"25px"} />
                 </Paper>
-              </SwiperSlide>
-            ) : (
-              <SwiperSlide>
+              ) : (
                 <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
                   <Paper variant="outlined" className={classes.root}>
                     <CardActionArea>
@@ -152,9 +174,9 @@ const CodelabzCarousel = ({ sortBy }) => {
                     </CardActionArea>
                   </Paper>
                 </Link>
-              </SwiperSlide>
-            );
-          })}
+              )}
+            </SwiperSlide>
+          ))}
         </Swiper>
       </Paper>
     </>
diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js
index c716765a..221a2cc7 100644
--- a/src/store/actions/tutorialPageActions.js
+++ b/src/store/actions/tutorialPageActions.js
@@ -100,7 +100,9 @@ export const getTutorialFeedData =
             owner: tutorial?.owner,
             created_by: tutorial?.created_by,
             createdAt: tutorial?.createdAt,
-            featured_image: tutorial?.featured_image
+            featured_image: tutorial?.featured_image,
+            upVotes: tutorial?.upVotes || 0,
+            downVotes: tutorial?.downVotes || 0,
           };
           return tutorialData;
         });

From 1332fcdaed7e745c864ce086df467a146e2e9a0b Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Mon, 12 Aug 2024 22:20:29 +0530
Subject: [PATCH 3/8] Add tutorial tags functionality for improved content
 categorization and discovery

---
 src/components/Card/CardWithoutPicture.jsx    | 20 +++---
 .../Tutorials/NewTutorial/index.jsx           | 71 +++++++++++++++++--
 src/store/actions/tutorialPageActions.js      |  1 +
 src/store/actions/tutorialsActions.js         |  3 +-
 4 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/src/components/Card/CardWithoutPicture.jsx b/src/components/Card/CardWithoutPicture.jsx
index abc4ecb0..13048494 100644
--- a/src/components/Card/CardWithoutPicture.jsx
+++ b/src/components/Card/CardWithoutPicture.jsx
@@ -161,14 +161,18 @@ export default function CardWithoutPicture({ tutorial }) {
         </CardContent>
       </Link>
       <CardActions className={classes.settings} disableSpacing>
-        <Chip
-          label="HTML"
-          component="a"
-          href="#chip"
-          clickable
-          variant="outlined"
-          className={classes.margin}
-        />
+        {tutorial?.tut_tags &&
+          tutorial?.tut_tags.map((tag, index) => (
+            <Chip
+              label={tag}
+              key={index}
+              component="a"
+              href="#chip"
+              clickable
+              variant="outlined"
+              className={classes.margin}
+            />
+          ))}
         <Typography
           variant="overline"
           display="block"
diff --git a/src/components/Tutorials/NewTutorial/index.jsx b/src/components/Tutorials/NewTutorial/index.jsx
index ac826889..d6e548a8 100644
--- a/src/components/Tutorials/NewTutorial/index.jsx
+++ b/src/components/Tutorials/NewTutorial/index.jsx
@@ -5,7 +5,7 @@ import { createTutorial } from "../../../store/actions";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import { useHistory } from "react-router-dom";
 import Button from "@mui/material/Button";
-import { Alert, Box } from "@mui/material";
+import { Alert, Box, Chip } from "@mui/material";
 import TextField from "@mui/material/TextField";
 import Divider from "@mui/material/Divider";
 import { IconButton } from "@mui/material";
@@ -19,6 +19,7 @@ import DescriptionIcon from "@mui/icons-material/Description";
 import MovieIcon from "@mui/icons-material/Movie";
 import Select from "react-select";
 import { common } from "@mui/material/colors";
+import CloseIcon from "@mui/icons-material/Close";
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -32,6 +33,19 @@ const useStyles = makeStyles(theme => ({
   purple: {
     color: deepPurple[700],
     backgroundColor: deepPurple[500]
+  },
+  tagsContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    marginTop: "1rem",
+    marginBottom: "1rem"
+  },
+  chip: {
+    margin: theme.spacing(0.5)
+  },
+  button: {
+    marginLeft: theme.spacing(1),
+    padding: "0.4rem 0.4rem"
   }
 }));
 
@@ -43,10 +57,13 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
+  const [tags, setTags] = useState([]);
+  const [newTag, setNewTag] = useState("");
   const [formValue, setformValue] = useState({
     title: "",
     summary: "",
-    owner: ""
+    owner: "",
+    tags: []
   });
 
   const loadingProp = useSelector(
@@ -72,6 +89,13 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     setError(errorProp);
   }, [errorProp]);
 
+  useEffect(() => {
+    setformValue(prev => ({
+      ...prev,
+      tags: tags
+    }));
+  }, [tags]);
+
   const organizations = useSelector(
     ({
       profile: {
@@ -145,6 +169,17 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     }));
   };
 
+  const handleAddTag = () => {
+    if (newTag.trim() !== "") {
+      setTags([...tags, newTag.trim()]);
+      setNewTag("");
+    }
+  };
+
+  const handleDeleteTag = tagToDelete => {
+    setTags(tags.filter(tag => tag !== tagToDelete));
+  };
+
   const classes = useStyles();
   return (
     <Modal
@@ -166,12 +201,12 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
           background: "white",
           padding: "2rem",
           paddingTop: "1rem",
-          maxWidth: "80%"
+          maxWidth: "40%"
         }}
       >
         {error && (
           <Alert message={""} type="error" closable="true" className="mb-24">
-            description={"Tutorial Creation Failed"}/
+            description={"Tutorial Creation Failed"}
           </Alert>
         )}
         <Typography variant="h5">Create a Tutorial</Typography>
@@ -226,6 +261,34 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
             style={{ marginBottom: "2rem" }}
           />
 
+          <TextField
+            label="Enter a tag"
+            variant="outlined"
+            size="small"
+            value={newTag}
+            onChange={e => setNewTag(e.target.value)}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            onClick={handleAddTag}
+          >
+            Add Tag
+          </Button>
+
+          <div className={classes.tagsContainer}>
+            {tags.map((tag, index) => (
+              <Chip
+                key={index}
+                label={tag}
+                onDelete={() => handleDeleteTag(tag)}
+                className={classes.chip}
+                deleteIcon={<CloseIcon />}
+              />
+            ))}
+          </div>
+
           <IconButton>
             <ImageIcon />
           </IconButton>
diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js
index 221a2cc7..de918c76 100644
--- a/src/store/actions/tutorialPageActions.js
+++ b/src/store/actions/tutorialPageActions.js
@@ -101,6 +101,7 @@ export const getTutorialFeedData =
             created_by: tutorial?.created_by,
             createdAt: tutorial?.createdAt,
             featured_image: tutorial?.featured_image,
+            tut_tags: tutorial?.tut_tags,
             upVotes: tutorial?.upVotes || 0,
             downVotes: tutorial?.downVotes || 0,
           };
diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js
index 7d273c1d..1f0ef1cb 100644
--- a/src/store/actions/tutorialsActions.js
+++ b/src/store/actions/tutorialsActions.js
@@ -122,7 +122,7 @@ export const createTutorial =
   tutorialData => async (firebase, firestore, dispatch, history) => {
     try {
       dispatch({ type: actions.CREATE_TUTORIAL_START });
-      const { title, summary, owner, created_by, is_org } = tutorialData;
+      const { title, summary, owner, created_by, is_org, tags } = tutorialData;
 
       const setData = async () => {
         const document = firestore.collection("tutorials").doc();
@@ -140,6 +140,7 @@ export const createTutorial =
           tutorial_id: documentID,
           featured_image: "",
           icon: "",
+          tut_tags: tags,
           url: "",
           background_color: "#ffffff",
           text_color: "#000000",

From feaeb84b8b3a2d1d02ae079836a63794c084b109 Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Tue, 13 Aug 2024 00:34:12 +0530
Subject: [PATCH 4/8] feat: Improve feed recommendations by integrating
 tag-based matching

---
 .../TutorialPage/components/PostDetails.jsx   |  2 +-
 .../TutorialPage/components/Thumbnails.jsx    | 20 ++++++---
 .../TutorialPage/components/sideBar.jsx       | 43 +++++++++++++++----
 src/components/TutorialPage/index.jsx         |  5 ++-
 src/store/actions/index.js                    |  3 ++
 src/store/actions/tutorialPageActions.js      | 34 +++++++++++++++
 6 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/src/components/TutorialPage/components/PostDetails.jsx b/src/components/TutorialPage/components/PostDetails.jsx
index 1c46ac63..80644ac2 100644
--- a/src/components/TutorialPage/components/PostDetails.jsx
+++ b/src/components/TutorialPage/components/PostDetails.jsx
@@ -87,7 +87,7 @@ const PostDetails = ({ details }) => {
                 <Grid item>
                   <Typography sx={{ fontWeight: "700", fontSize: "1.2rem" }}>
                     {details?.title}
-                    {details?.tag?.map(tag => (
+                    {details?.tags?.map(tag => (
                       <Chip
                         label={tag}
                         variant="outlined"
diff --git a/src/components/TutorialPage/components/Thumbnails.jsx b/src/components/TutorialPage/components/Thumbnails.jsx
index 89c6bc04..b1528ec5 100644
--- a/src/components/TutorialPage/components/Thumbnails.jsx
+++ b/src/components/TutorialPage/components/Thumbnails.jsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Box, Grid, Avatar, Typography, Card } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
@@ -18,34 +19,39 @@ const useStyles = makeStyles(() => ({
 
 const Thumbnails = ({ tutorial }) => {
   const classes = useStyles();
+
   return (
     <>
       <Card className={classes.container}>
         <Grid container direction="column" rowSpacing={1}>
           <Grid item className={classes.profile}>
             <Avatar sx={{ height: "22px", width: "22px", fontSize: "12px" }}>
-              A
+              {tutorial?.created_by?.charAt(0) || "U"}
             </Avatar>
             <Typography>
-              <span className={classes.bold}>Abhishek</span> From{" "}
-              <span className={classes.bold}>Codelabz</span>
+              <span className={classes.bold}>
+                {tutorial?.created_by || "Unknown"}
+              </span>{" "}
+              From{" "}
+              <span className={classes.bold}>
+                {tutorial?.owner || "Unknown"}
+              </span>
             </Typography>
           </Grid>
           <Grid item container justifyContent="center">
             <Grid item container direction="column" xs={9}>
               <Grid item>
                 <Typography sx={{ fontWeight: "600", fontSize: "11px" }}>
-                  How to build a microservice design and architecture using
-                  proper tools
+                  {tutorial?.summary || "No summary available"}
                 </Typography>
               </Grid>
             </Grid>
-            <Grid item xs={3}>
+            {/* <Grid item xs={3}>
               <img
                 src="https://cdn-images-1.medium.com/v2/resize:fit:1080/1*SBH_Y5t32ixv8C_F1MVYzA.png"
                 alt=""
               />
-            </Grid>
+            </Grid> */}
           </Grid>
         </Grid>
       </Card>
diff --git a/src/components/TutorialPage/components/sideBar.jsx b/src/components/TutorialPage/components/sideBar.jsx
index 8a56b8fc..be9297fd 100644
--- a/src/components/TutorialPage/components/sideBar.jsx
+++ b/src/components/TutorialPage/components/sideBar.jsx
@@ -1,6 +1,9 @@
+import React, { useState, useEffect } from "react";
 import { Box, Grid, Typography, Button } from "@mui/material";
 import Thumbnails from "./Thumbnails";
 import { makeStyles } from "@mui/styles";
+import { getRecommendedTutorials } from "../../../store/actions";
+import { useFirebase, useFirestore } from "react-redux-firebase";
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -19,14 +22,37 @@ const useStyles = makeStyles(() => ({
       "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
   }
 }));
-const SideBar = () => {
+const SideBar = ({ currentTutorial }) => {
   const classes = useStyles();
+  const [tutorials, setTutorials] = useState([]);
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+
+  useEffect(() => {
+    const fetchRecommendedTutorials = async () => {
+      try {
+        const recommendedTutorials = await getRecommendedTutorials(
+          currentTutorial?.tags
+        )(firebase, firestore);
+        setTutorials(
+          recommendedTutorials.filter(
+            tutorial => tutorial.tutorial_id !== currentTutorial?.id
+          )
+        );
+      } catch (error) {
+        console.error("Error fetching recommended tutorials:", error);
+      }
+    };
+
+    fetchRecommendedTutorials();
+  }, [currentTutorial?.tags]);
+
   return (
     <>
       <Box className={classes.container}>
-        <div className={classes.load}>
+        {/* <div className={classes.load}>
           <Button sx={{ textTransform: "none" }}>Show More &darr;</Button>
-        </div>
+        </div> */}
         <Grid container direction="column">
           <Typography
             sx={{
@@ -38,13 +64,14 @@ const SideBar = () => {
           >
             More From Codelabz
           </Typography>
-          <Thumbnails />
-          <Thumbnails />
-          <Thumbnails />
+          {tutorials.length > 0 &&
+            tutorials.map((tutorial, index) => (
+              <Thumbnails key={index} tutorial={tutorial} />
+            ))}
         </Grid>
       </Box>
       <Box className={classes.container}>
-        <div className={classes.load}>
+        {/* <div className={classes.load}>
           <Button sx={{ textTransform: "none" }}>Show More &darr;</Button>
         </div>
         <Grid container direction="column">
@@ -61,7 +88,7 @@ const SideBar = () => {
           <Thumbnails />
           <Thumbnails />
           <Thumbnails />
-        </Grid>
+        </Grid> */}
       </Box>
     </>
   );
diff --git a/src/components/TutorialPage/index.jsx b/src/components/TutorialPage/index.jsx
index dd7895c2..4a0e4a98 100644
--- a/src/components/TutorialPage/index.jsx
+++ b/src/components/TutorialPage/index.jsx
@@ -51,13 +51,14 @@ function TutorialPage({ background = "white", textColor = "black" }) {
   );
 
   const postDetails = {
+    id: tutorial?.tutorial_id,
     title: tutorial?.title,
     org: tutorial?.owner,
     user: tutorial?.created_by,
     upVote: tutorial?.upVotes,
     downVote: tutorial?.downVotes,
     published_on: tutorial?.createdAt,
-    tag: tutorial?.tut_tags
+    tags: tutorial?.tut_tags
   };
 
   const steps = useSelector(
@@ -121,7 +122,7 @@ function TutorialPage({ background = "white", textColor = "black" }) {
           xs={3}
           data-testId="tutorialpageSideBar"
         >
-          <SideBar />
+          <SideBar currentTutorial={postDetails} />
         </Grid>
       </Grid>
     </Box>
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index 76520c41..acede358 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -66,3 +66,6 @@ export {
   updateStepTitle,
   uploadTutorialImages
 } from "./tutorialsActions";
+export {
+  getRecommendedTutorials,
+} from "./tutorialPageActions";
\ No newline at end of file
diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js
index de918c76..0b900e73 100644
--- a/src/store/actions/tutorialPageActions.js
+++ b/src/store/actions/tutorialPageActions.js
@@ -221,3 +221,37 @@ export const addComment = comment => async (firebase, firestore, dispatch) => {
     dispatch({ type: actions.ADD_COMMENT_FAILED, payload: e.message });
   }
 };
+
+export const getRecommendedTutorials = currentTutorialTags => async (firebase, firestore) => {
+  try {
+    const tutorialsRef = firestore.collection("tutorials");
+
+    // Fetch tutorials with matching tags
+    const querySnapshot = await tutorialsRef
+      .where("tut_tags", "array-contains-any", currentTutorialTags)
+      .get();
+
+    // Calculate relevance score based on matching tags
+    const recommendedTutorials = querySnapshot.docs
+      .map(doc => {
+        const tutorial = doc.data();
+
+        // Skip unpublished tutorials
+        if (!tutorial.isPublished) return null;
+
+        const matchingTags = tutorial.tut_tags.filter(tag => currentTutorialTags.includes(tag));
+        return {
+          ...tutorial,
+          relevanceScore: matchingTags.length
+        };
+      })
+      .filter(tutorial => tutorial !== null);  // Remove null values from the array
+
+    recommendedTutorials.sort((a, b) => b.relevanceScore - a.relevanceScore);
+
+    return recommendedTutorials;
+  } catch (error) {
+    console.error("Error fetching recommended tutorials:", error);
+    return [];
+  }
+};
\ No newline at end of file

From 5998cb1b9938cc67de81123845aefe37219adbfe Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Tue, 13 Aug 2024 00:50:44 +0530
Subject: [PATCH 5/8] chore: Reset form fields and tags when closing tutorial
 modal

---
 .../Tutorials/NewTutorial/index.jsx           | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/Tutorials/NewTutorial/index.jsx b/src/components/Tutorials/NewTutorial/index.jsx
index d6e548a8..3e5754ee 100644
--- a/src/components/Tutorials/NewTutorial/index.jsx
+++ b/src/components/Tutorials/NewTutorial/index.jsx
@@ -138,6 +138,14 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
       : null;
 
   useEffect(() => {
+    setTags([]);
+    setNewTag("");
+    setformValue({
+      title: "",
+      summary: "",
+      owner: "",
+      tags: []
+    });
     setVisible(viewModal);
   }, [viewModal]);
 
@@ -180,6 +188,13 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     setTags(tags.filter(tag => tag !== tagToDelete));
   };
 
+  const handleKeyDown = e => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddTag();
+    }
+  };
+
   const classes = useStyles();
   return (
     <Modal
@@ -267,6 +282,7 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
             size="small"
             value={newTag}
             onChange={e => setNewTag(e.target.value)}
+            onKeyDown={handleKeyDown}
           />
           <Button
             variant="contained"
@@ -303,7 +319,17 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
             <div style={{ float: "right" }}>
               <Button
                 key="back"
-                onClick={onSidebarClick}
+                onClick={() => {
+                  onSidebarClick();
+                  setTags([]);
+                  setNewTag("");
+                  setformValue({
+                    title: "",
+                    summary: "",
+                    owner: "",
+                    tags: []
+                  });
+                }}
                 id="cancelAddTutorial"
               >
                 Cancel

From 00bb855bb5705cd0e258760b8bb92997e375a863 Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Wed, 21 Aug 2024 19:30:09 +0530
Subject: [PATCH 6/8] feat: Add functionality to update tag frequencies when
 creating a tutorial

---
 src/store/actions/index.js            |  2 ++
 src/store/actions/tutorialsActions.js | 34 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index acede358..dd4e743e 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -52,6 +52,7 @@ export {
   getCurrentStepContentFromFirestore,
   getCurrentTutorialData,
   getOrgTutorialsBasicData,
+  getTutorialsByTopTags,
   getUserTutorialsBasicData,
   hideUnHideStep,
   publishUnpublishTutorial,
@@ -64,6 +65,7 @@ export {
   setTutorialTheme,
   updateStepTime,
   updateStepTitle,
+  updateTagFrequencies,
   uploadTutorialImages
 } from "./tutorialsActions";
 export {
diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js
index 1f0ef1cb..65eb4a92 100644
--- a/src/store/actions/tutorialsActions.js
+++ b/src/store/actions/tutorialsActions.js
@@ -160,6 +160,8 @@ export const createTutorial =
         return documentID;
       };
 
+      await updateTagFrequencies(tags)(firebase, firestore);
+
       if (is_org) {
         const documentID = await setData("organization");
         history.push(`/tutorials/${owner}/${documentID}`);
@@ -174,6 +176,38 @@ export const createTutorial =
     }
   };
 
+export const updateTagFrequencies = (tags) => async (firebase, firestore) => {
+  const tagCollectionRef = firestore.collection('tag_frequencies')
+
+  for (const tag of tags) {
+    const tagDocRef = tagCollectionRef.doc(tag);
+    await firestore.runTransaction(async (transaction) => {
+      const tagDoc = await transaction.get(tagDocRef);
+      if (tagDoc.exists) {
+        const newCount = (tagDoc.data().count || 0) + 1;
+        transaction.update(tagDocRef, { count: newCount });
+      } else {
+        transaction.set(tagDocRef, { count: 1 });
+      }
+    });
+  }
+};
+
+export const getTutorialsByTopTags = (limit = 10) => async (firebase, firestore) => {
+  const tutorialCollectionRef = firestore.collection('tutorials');
+  const tagCollectionRef = firestore.collection('tag_frequencies');
+
+  const tagSnapshot = await tagCollectionRef.orderBy('count', 'desc').limit(limit).get();
+  const topTags = tagSnapshot.docs.map(doc => doc.id);
+  // console.log("topTags", topTags);
+
+  // Query tutorials that contain any of the top tags
+  const tutorialSnapshot = await tutorialCollectionRef.where('tut_tags', 'array-contains-any', topTags).get();
+  const tutorials = tutorialSnapshot.docs.map(doc => doc.data());
+
+  return tutorials;
+};
+
 const checkUserOrOrgHandle = handle => async firestore => {
   const userHandleExists = await checkUserHandleExists(handle)(firestore);
   const orgHandleExists = await checkOrgHandleExists(handle)(firestore);

From f2bbb51f1765aee5e3c4b01a850efc67007b95e6 Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Fri, 23 Aug 2024 13:19:53 +0530
Subject: [PATCH 7/8] feat: Update homepage feed by adding "Featured" filter
 option

---
 src/components/CodelabCard/index.jsx          |  6 ++--
 src/components/HomePage/index.jsx             | 29 +++++++++++++------
 .../DiscoverCodelabz/CodelabzCarousel.jsx     | 14 +++++----
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/CodelabCard/index.jsx b/src/components/CodelabCard/index.jsx
index 74575bf8..c209dde7 100644
--- a/src/components/CodelabCard/index.jsx
+++ b/src/components/CodelabCard/index.jsx
@@ -53,9 +53,7 @@ const CardComponent = ({
                       className={classes.logoImg}
                     />
                     <img
-                      src={
-                        require(`../../../assets/images/${profilePic}`).default
-                      }
+                      src={require(`../../assets/images/${profilePic}`).default}
                       alt=""
                       height="20rem"
                       width="20rem"
@@ -65,7 +63,7 @@ const CardComponent = ({
                 </Grid>
               ) : (
                 <img
-                  src={require(`../../../assets/images/${profilePic}`).default}
+                  src={require(`../../assets/images/${profilePic}`).default}
                   alt=""
                   className={classes.avatar}
                 />
diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx
index 504a276e..e716f6ca 100644
--- a/src/components/HomePage/index.jsx
+++ b/src/components/HomePage/index.jsx
@@ -37,6 +37,7 @@ import {
   getTutorialFeedData,
   getTutorialFeedIdArray
 } from "../../store/actions/tutorialPageActions";
+import { getTutorialsByTopTags } from "../../store/actions";
 
 function HomePage({ background = "white", textColor = "black" }) {
   const classes = useStyles();
@@ -60,7 +61,7 @@ function HomePage({ background = "white", textColor = "black" }) {
       link: "https://dev.codelabz.io/"
     }
   ]);
-
+  let tutorialIdArray;
   const windowSize = useWindowSize();
   const [openMenu, setOpen] = useState(false);
   const toggleSlider = () => {
@@ -170,7 +171,7 @@ function HomePage({ background = "white", textColor = "black" }) {
   const profileData = useSelector(({ firebase: { profile } }) => profile);
   useEffect(() => {
     const getFeed = async () => {
-      const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+      tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
         firebase,
         firestore,
         dispatch
@@ -186,20 +187,25 @@ function HomePage({ background = "white", textColor = "black" }) {
     return new Date(timestamp.seconds * 1000);
   };
 
-  const handleFeedChange = filterType => {
+  const handleFeedChange = async filterType => {
     let filteredTutorials;
-
     switch (filterType) {
-      // TODO
-      // case "Featured":
-      //   break;
+      case "Featured":
+        filteredTutorials = await getTutorialsByTopTags()(
+          firebase,
+          firestore,
+          dispatch
+        );
+        break;
       case "New":
-        filteredTutorials = [...tutorials].sort(
+        await fetchNewTutorials();
+        filteredTutorials = [...tutorialFeedArray].sort(
           (a, b) => convertToDate(b.createdAt) - convertToDate(a.createdAt)
         );
         break;
       case "Top":
-        filteredTutorials = [...tutorials].sort(
+        await fetchNewTutorials();
+        filteredTutorials = [...tutorialFeedArray].sort(
           (a, b) => b.upVotes - a.upVotes
         );
         break;
@@ -209,6 +215,11 @@ function HomePage({ background = "white", textColor = "black" }) {
 
     setTutorials(filteredTutorials);
   };
+
+  const fetchNewTutorials = async () => {
+    await getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+  };
+
   const handleTabChange = (event, newValue) => {
     setSelectedTab(newValue);
   };
diff --git a/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx b/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx
index 0bf2cbff..d53c428d 100644
--- a/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx
+++ b/src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx
@@ -20,7 +20,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useFirestore, useFirebase } from "react-redux-firebase";
 import Default from "../../../assets/images/logo.jpeg";
 import { Link } from "react-router-dom";
-import { clearOrgData, getLaunchedOrgsData } from "../../../store/actions";
+import { getTutorialsByTopTags } from "../../../store/actions";
 import {
   getTutorialFeedIdArray,
   getTutorialFeedData
@@ -82,7 +82,7 @@ const CodelabzCarousel = ({ sortBy }) => {
     return new Date(createdAt.seconds * 1000);
   };
 
-  const handleFeedChange = filterType => {
+  const handleFeedChange = async filterType => {
     let filteredTutorials;
     const oneMonthAgo = new Date().setMonth(new Date().getMonth() - 1);
     const twoWeeksAgo = new Date().setDate(new Date().getDate() - 14);
@@ -98,9 +98,13 @@ const CodelabzCarousel = ({ sortBy }) => {
           .filter(tutorial => convertToDate(tutorial.createdAt) > oneMonthAgo)
           .sort((a, b) => b.upVotes - a.upVotes);
         break;
-      // TODO : Add featured tutorials
-      // case "featured":
-      // break;
+      case "Featured":
+        filteredTutorials = await getTutorialsByTopTags()(
+          firebase,
+          firestore,
+          dispatch
+        );
+        break;
       default:
         filteredTutorials = tutorials;
     }

From fda7b73b806678f53cb625c75ab62f9191172655 Mon Sep 17 00:00:00 2001
From: Mallepally Lokeshwar Reddy <lokeshwar777@gmail.com>
Date: Sat, 24 Aug 2024 16:44:49 +0530
Subject: [PATCH 8/8] feat: Display tutorials on Profile Page

---
 .../User/UserProfile/UserProfile.jsx          | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/User/UserProfile/UserProfile.jsx b/src/components/User/UserProfile/UserProfile.jsx
index c0e31882..b2b52aea 100644
--- a/src/components/User/UserProfile/UserProfile.jsx
+++ b/src/components/User/UserProfile/UserProfile.jsx
@@ -9,6 +9,12 @@ import OrgUser from "../../../assets/images/org-user.svg";
 import { userList } from "../../HomePage/userList";
 import Card from "@mui/material/Card";
 import UserHighlights from "./UserHighlights";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import {
+  getTutorialFeedData,
+  getTutorialFeedIdArray
+} from "../../../store/actions/tutorialPageActions";
 
 const useStyles = makeStyles(theme => ({
   parentBody: {
@@ -50,6 +56,32 @@ const useStyles = makeStyles(theme => ({
 
 function UserProfile(props) {
   const classes = useStyles();
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const dispatch = useDispatch();
+  getTutorialFeedData;
+
+  const profileData = useSelector(({ firebase: { profile } }) => profile);
+
+  useEffect(() => {
+    const getFeed = async () => {
+      const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+        firebase,
+        firestore,
+        dispatch
+      );
+      getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+    };
+    getFeed();
+  }, []);
+
+  const tutorials = useSelector(
+    ({
+      tutorialPage: {
+        feed: { homepageFeedArray }
+      }
+    }) => homepageFeedArray
+  );
 
   const [organizations, setUpOrganizations] = useState([
     {
@@ -104,11 +136,14 @@ function UserProfile(props) {
           </Grid>
 
           <Grid>
-            {userList.persons.map(person => {
-              return person.Heading == "CardWithoutPicture" ? (
-                <CardWithoutPicture {...person} className={classes.card} />
+            {tutorials.map(tutorial => {
+              return !tutorial?.featured_image ? (
+                <CardWithoutPicture
+                  tutorial={tutorial}
+                  className={classes.card}
+                />
               ) : (
-                <CardWithPicture {...person} className={classes.card} />
+                <CardWithPicture tutorial={tutorial} className={classes.card} />
               );
             })}
           </Grid>