Merge branch 'main' into router

.github/workflows/check_duplicate_tools.yml

@@ -13,14 +13,14 @@ jobs:
 
     - name: Check for duplicate entries in product.json
       run: |
-        # Check for duplicate entries in product.json
-        jq -r '.[].productName' product.json | sort | uniq -d > duplicates.txt
+        # Check for duplicate entries based on the 'link' field in product.json
+        jq -r '.[].link' product.json | sort | uniq -d > duplicates.txt
         if [ -s duplicates.txt ]; then
-          echo "Duplicate entries found in product.json:"
+          echo "Duplicate entries found in product.json based on 'link':"
           cat duplicates.txt
           exit 1
         else
-          echo "No duplicate entries found."
+          echo "No duplicate entries found based on 'link'."
         fi
 
   close-issues:
@@ -46,4 +46,4 @@ jobs:
                -H "Accept: application/vnd.github.v3+json" \
                https://api.github.com/repos/${{ github.repository }}/issues/$ISSUE \
                -d '{"state":"closed"}'
-        done
+        done

README.md

@@ -1,3 +1,4 @@
+<a id="top"></a>
 <div align="center">
   <h1><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Laptop.png" alt="Laptop" width="50" height="50" /> DevLabs</h1>
   <p>Welcome to DevLabs, a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. On DevLabs, you can discover a collection of free tools that can assist you in various aspects of your life. Moreover, you have the opportunity to contribute to this project by adding more tools to the database.</p>
@@ -212,7 +213,9 @@ If you would like to contribute to the project then kindly go through [Contribut
   <h2>Let's Collaborate and Make DevLabs Even Better! 💻🌟</h2>
 </div>
 
-### ✨ Features
+<details>
+<summary><h2>✨ Features</h2></summary>
+
 
 1. User Authentication:
    Secure user registration and login using JWT.
@@ -255,12 +258,30 @@ If you would like to contribute to the project then kindly go through [Contribut
 ### 📚 Learn
 To know more about project, please go through [Learn](learn.md)
 
+</details>
+
 ### 🌍 Community
 
-### 🏆 Contributors
+<hr>
 
-Recognize the individuals who have contributed to the project. You can use tools like All Contributors to automatically generate a list of contributors.
+<h2 align = "center">Our Contributors ❤️</h2>
+<div align = "center">
+ <h3>Thank you for contributing to our repository</h3>
 
-```bash
-npx all-contributors-cli add <username> <contribution>
-```
+ <a href="https://github.com/HimanshuNarware/Devlabs/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=HimanshuNarware/Devlabs" />
+</a>
+
+</div>
+
+<hr>
+<div>
+  <h2><img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f64f_1f3fb/512.webp" width="35" height="35"> Support </h2>
+</div>
+
+<div>
+  Don't forget to leave a star<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f31f/512.webp" width="35" height="30"> for this project!
+</div> <br>
+
+<a href="#top" style="position: fixed; bottom: 20px; right: 20px; background-color: black ; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; border-radius: 5px; font-family: Arial; font-size: 16px;">Go to Top</a>
+`

frontend/src/Component/BookMark.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { deleteSource } from "../Slice/DataSlice";
 import bookmarkAnimation from "../lottie/bookmark.json";
@@ -7,19 +7,18 @@ import Lottie from "lottie-react";
 import toast from "react-hot-toast";
 
 function BookMark() {
-  const sourceData = useSelector((state) => state.SourceReducer.sourceData);
+  const sourceData = useSelector((state) => state.SourceReducer.sourceData); // Adjust the selector to match your state structure
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
   const [postPerPage] = useState(8); // Number of bookmarks per page
+
+  useEffect(() => {
+    localStorage.setItem("bookmarks", JSON.stringify(sourceData));
+  }, [sourceData]);
+
   const handleDeleteBookmark = (name) => {
+    console.log("remove", name);
     dispatch(deleteSource({ name }));
-
-    const bookmarksInStorage =
-      JSON.parse(localStorage.getItem("bookmarks")) || [];
-    const updatedBookmarks = bookmarksInStorage.filter(
-      (bookmark) => bookmark.name !== name
-    );
-    localStorage.setItem("bookmarks", JSON.stringify(updatedBookmarks));
     toast.success("Bookmark removed successfully");
   };
 
@@ -39,10 +38,17 @@ function BookMark() {
         {currentBookmarks?.length > 0 ? (
           currentBookmarks?.map((data, index) => (
             <div className="bookmark__box" key={index}>
-              <img className="bookmark__logo" src={data.image} alt={data.name} />
+              <img
+                className="bookmark__logo"
+                src={data.image}
+                alt={data.name}
+              />
               <h2>{data.name}</h2>
               <p className="bookmark__box-text">{data.desc}</p>
-              <button className="bookmark__button" onClick={() => window.open(data.link)}>
+              <button
+                className="bookmark__button"
+                onClick={() => window.open(data.link)}
+              >
                 Link
               </button>
               <button
@@ -103,7 +109,9 @@ function BookMark() {
             style={{ height: "200px" }}
           />
           <h1 className="text-2xl font-semibold">No bookmark Found</h1>
-          <h3 className="mb-4">Explore Devlabs and add them to your bookmark</h3>
+          <h3 className="mb-4">
+            Explore Devlabs and add them to your bookmark
+          </h3>
         </div>
       )}
     </div>

frontend/src/Component/Navbar/Navbar.js

@@ -5,13 +5,15 @@ import NavbarLeft from "./NavbarLeft";
 import NavbarCenter from "./NavbarCenter";
 function Navbar(props) {
   const [showSideNav, setShowSideNav] = useState(false);
-  
+
   return (
     <header>
       <div className="navbar">
         <NavbarLeft showSideNav={showSideNav} setShowSideNav={setShowSideNav} />
-        <NavbarCenter showSideNav={showSideNav} />
-
+        <div style={{ marginLeft: "auto" }}>
+          <NavbarCenter showSideNav={showSideNav} />
+        </div>
+
         {/* Pass setSearchQuery directly 
         <NavbarRight setSearchQuery={props.setSearchQuery} />
         */}

frontend/src/Slice/DataSlice.js

@@ -11,26 +11,17 @@ const DataSlice = createSlice({
   },
   reducers: {
     setSource: (state, action) => {
-      state.sourceData.push({
-        image: action.payload.image,
-        name: action.payload.name,
-        desc: action.payload.desc,
-        link: action.payload.link,
-      });
+      state.sourceData.push(action.payload);
       state.totalBookmarks = state.sourceData.length;
-      localStorage.setItem('bookmarks', JSON.stringify(state.sourceData));
     },
     deleteSource: (state, action) => {
-      // Find the index of the bookmark to delete by matching the name
       const indexToDelete = state.sourceData.findIndex(
         (bookmark) => bookmark.name === action.payload.name
       );
 
       if (indexToDelete !== -1) {
-        // Remove the bookmark from the array by index
         state.sourceData.splice(indexToDelete, 1);
         state.totalBookmarks = state.sourceData.length;
-        localStorage.setItem('bookmarks', JSON.stringify(state.sourceData));
       }
     },
   },

frontend/src/pages/Extension.jsx

@@ -73,7 +73,7 @@ const extensions = [
     version: "1.6.0",
     image: "https://i.pcmag.com/imagery/reviews/00DGg3V9SuURGDLUoe7QmD6-23.fit_lim.size_1050x591.v1605289134.png",
     developer: "ProofHub",
-  },
+  }, 
 ];
 
 const Extensions = () => (

frontend/src/style/BookMark.css

@@ -43,7 +43,7 @@
     #c35cf6,
     #6c2bb1
   );
-  
+
   border-radius: inherit;
   animation: moving 3s linear infinite;
 
@@ -72,9 +72,9 @@
   }
 }
 .bookmark__box:hover {
-transform: scale(1.1);
-box-shadow: 0px 0px 15px #b85cf6e1;
-transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 15px #b85cf6e1;
+  transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
 .bookmark__box-text {
@@ -94,6 +94,13 @@ transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
   box-shadow: 1px 1px rgb(0, 0, 0, 0.5);
 }
 
+.bookmark__button:hover {
+  background-color: rgb(226, 43, 122);
+  color: white;
+  cursor: pointer;
+  border: 1px dashed rgba(79, 71, 125, 255);
+}
+
 .bookmark__button:hover {
   color: white;
   cursor: none;
@@ -126,36 +133,32 @@ transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
     grid-template-columns: repeat(1, 1fr);
   }
 }
-.bookmarkTag{
+.bookmarkTag {
   position: relative;
 
 }
-.bookmarkTag::after{
-  content: '';
+.bookmarkTag::after {
+  content: "";
   position: absolute;
   background-color: #000000;
   width: 20%;
   height: 60%;
   color: white;
   border-radius: 4px;top:-10px;
   right: -10px;
-
-}
-.totBook{
+  }
+.totBook {
   position: absolute;
   top: -12px;
   z-index: 10;
   color: white;
   font-size: 13px;
   right: 0px;
-
-
-
 }
-.bookmarkTag::before{
-  content: '';
+.bookmarkTag::before {
+  content: "";
   position: absolute;
-  top:5px;
+  top: 5px;
   transform: translateX(0%);
   border-top: 6px solid rgb(8, 0, 0);
   width: 0;
@@ -164,52 +167,40 @@ transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
 }
-@media (max-width:1000px){
-  .bookmarkTag::after{
-    content: '';
+@media (max-width: 1000px) {
+  .bookmarkTag::after {
+    content: "";
     position: absolute;
     background-color: #000000;
     width: 15%;
     height: 60%;
     color: white;
-    border-radius: 4px;top:-10px;
-
+    border-radius: 4px;
+    top: -10px;
   }
-  .totBook{
-
+  .totBook {
     right: -13px;
-
-
-
   }
-  .bookmarkTag::before{
-
+  .bookmarkTag::before {
     right: -14px;
-
   }
 }
 
-
-
-@media (max-width:980px){
-  .bookmarkTag::after{
-    content: '';
+@media (max-width: 980px) {
+  .bookmarkTag::after {
+    content: "";
     position: absolute;
     background-color: #000000;
     width: 20%;
     height: 40%;
     color: white;
-    border-radius: 4px;top:-10px;
-
+    border-radius: 4px;
+    top: -10px;
   }
-  .totBook{
-
+  .totBook {
     right: -7px;
-
-
-
   }
-  .bookmarkTag::before{
-  opacity: 0;
+  .bookmarkTag::before {
+    opacity: 0;
   }
 }

frontend/src/style/Home.css

@@ -85,6 +85,8 @@
   list-style-type: none;
   padding: 0;
   display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 5px;
 }