Merge remote-tracking branch 'origin/main'

frontend/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

frontend/src/Component/Home.js

@@ -315,23 +315,6 @@ function Home(props) {
           </ul>
         </div>
       </div>
-      <div className="contributors-section">
-        <h2>Faces of Dedication: Our Contributing Heroes</h2>
-        <div className="contributors-grid">
-          {contributors.map((contributor) => (
-            <a
-              key={contributor.id}
-              href={contributor.html_url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="contributor"
-            >
-              <img src={contributor.avatar_url} alt={contributor.login} />
-              <p>{contributor.login}</p>
-            </a>
-          ))}
-        </div>
-      </div>
     </div>
   );
 }

frontend/src/Component/Navbar/NavbarCenter.js

@@ -1,10 +1,11 @@
-// NavbarCenter.jsx
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import "../../style/Navbar.css";
 import NavbarItem from "./NavbarItem";
 import Modal from "../../Component/Modal";
 import RateUsComponent from "../../Component/Rateus"; // Import the RateUsComponent
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome, faBookmark, faCode, faInfoCircle, faQuestionCircle, faStar, faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
 function NavbarCenter() {
   const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0;
@@ -18,25 +19,25 @@ function NavbarCenter() {
     <nav className="navbar-center">
       <ul className="navbar-content mb-2">
         <li className="nav-item">
-          <NavbarItem description="Home" to="/" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faHome} /> Home</>} to="/" />
         </li>
         <li className="nav-item">
-          <NavbarItem description={`Bookmark (${totalBookmarks})`} to="/bookmark" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faBookmark} /> Bookmark ({totalBookmarks})</>} to="/bookmark" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="Open Source" to="/open-source" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faCode} /> Open Source</>} to="/open-source" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="About Us" to="/about" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faInfoCircle} /> About Us</>} to="/about" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="FAQ's" to="/faq" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faQuestionCircle} /> FAQ's</>} to="/faq" />
         </li>
         <li className="nav-item" onClick={handleRateUsClick}>
-          <NavbarItem description="Rate Us" to="#" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faStar} /> Rate Us</>} to="#" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="Contact" to="https://www.linkedin.com/in/himanshunarware/" />
+          <NavbarItem description={<><FontAwesomeIcon icon={faEnvelope} /> Contact</>} to="https://www.linkedin.com/in/himanshunarware/" />
         </li>
       </ul>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>

frontend/src/Component/Navbar/NavbarLeft.js

@@ -5,7 +5,6 @@ import logo from "../../image/logo.png";
 
 function NavbarLeft(props) {
   useEffect(() => {
-    // Added event listener to handle clicks outside the navbar
     const handleDocumentClick = (e) => {
       if (!e.target.closest('.navbar-left')) {
         props.setShowSideNav(false);
@@ -50,4 +49,4 @@ function NavbarLeft(props) {
   );
 }
 
-export default NavbarLeft;
+export default NavbarLeft;

frontend/src/Component/Rateus.js

@@ -4,7 +4,6 @@ import "./../style/Rateus.css";
 function RateUsComponent({ previousContent }) {
   const [rating, setRating] = useState(0);
   const [feedback, setFeedback] = useState("");
-  const [showModal, setShowModal] = useState(false);
 
   const handleStarClick = (star) => {
     setRating(star);
@@ -15,41 +14,40 @@ function RateUsComponent({ previousContent }) {
   };
 
   const handleSubmit = () => {
-    // Reset the state after submitting
-    setRating(0);
-    setFeedback("");
-    setShowModal(false); // Hide the modal after submitting
+    // Check if both rating and feedback are provided
+    if (rating !== 0 && feedback.trim() !== "") {
+      // Reset the state after submitting
+      setRating(0);
+      setFeedback("");
+    } 
   };
 
   return (
-    <>
-      <div className="rate-us-page">
-        <div className="rate-us-container">
-          <h2 className="rate-us-heading">Rate Our Website</h2>
-          <div className="star-rating">
-            {[1, 2, 3, 4, 5].map((star) => (
-              <span
-                key={star}
-                className={star <= rating ? "star filled" : "star"}
-                onClick={() => handleStarClick(star)}
-              >
-                ★
-              </span>
-            ))}
-          </div>
-          <textarea
-            className="feedback-textarea"
-            placeholder="Write your feedback here..."
-            value={feedback}
-            onChange={handleFeedbackChange}
-          ></textarea>
-          <button className="submit-button" onClick={() => setShowModal(true)}>
-            Submit
-          </button>
+    <div className="rate-us-page">
+      <div className="rate-us-container">
+        <h2 className="rate-us-heading">Rate Our Website</h2>
+        <div className="star-rating">
+          {[1, 2, 3, 4, 5].map((star) => (
+            <span
+              key={star}
+              className={star <= rating ? "star filled" : "star"}
+              onClick={() => handleStarClick(star)}
+            >
+              ★
+            </span>
+          ))}
         </div>
+        <textarea
+          className="feedback-textarea"
+          placeholder="Write your feedback here..."
+          value={feedback}
+          onChange={handleFeedbackChange}
+        ></textarea>
+        <button className="submit-button" onClick={handleSubmit}>
+          Submit
+        </button>
       </div>
-    </>
+    </div>
   );
 }
-
 export default RateUsComponent;

frontend/src/pages/CodingPlateform.jsx

@@ -1,9 +1,35 @@
-import React from 'react'
+import React from "react";
+import "../style/CodingPlateform.css";
 
-const CodingPlateform = () => {
+const tools = [
+  { name: "CodeSandbox", description: "An online code editor and prototyping tool", link: "https://codesandbox.io/", image: "https://i.pinimg.com/564x/82/14/0e/82140ec1a4bc53413b6c9150b1e3bab3.jpg" },
+  { name: "CodePen", description: "An online community for testing and showcasing user-created HTML, CSS, and JavaScript code snippets", link: "https://codepen.io/", image: "https://i.pinimg.com/564x/0c/ea/84/0cea842d30cae99ee4e5772308fddbf8.jpg" },
+  { name: "JSFiddle", description: "An online IDE for web development, where users can create, test, and showcase HTML, CSS, and JavaScript code snippets", link: "https://jsfiddle.net/", image: "https://i.pinimg.com/736x/16/63/aa/1663aa377120b3ee56822fc19d851278.jpg" },
+  { name: "StackBlitz", description: "An online IDE for web applications, allowing developers to create, share, and collaborate on projects in the browser", link: "https://stackblitz.com/", image: "https://i.pinimg.com/564x/12/6d/c5/126dc594c84336847f0623bc1d26c0b3.jpg" },
+  { name: "Replit", description: "An online IDE for programming in multiple languages, with features like collaboration, hosting, and version control", link: "https://replit.com/", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/New_Replit_Logo.svg/1200px-New_Replit_Logo.svg.png" },
+  { name: "JSBin", description: "An online HTML, CSS, and JavaScript code editor for web developers", link: "https://jsbin.com/", image: "https://static.jsbin.com/images/logo.png" },
+  { name: "Plunker", description: "An online community for creating, collaborating on, and sharing web development projects", link: "https://plnkr.co/", image: "https://i.pinimg.com/564x/6a/0c/70/6a0c70cacbdaae750dd56bed1964b95a.jpg" },
+  { name: "Glitch", description: "A community-driven platform for creating, remixing, and hosting web apps and websites", link: "https://glitch.com/", image: "https://logos-world.net/wp-content/uploads/2021/03/Glitch-Logo-2018-present.png" },
+  { name: "Stack Overflow Code Snippet", description: "A feature of Stack Overflow that allows users to create, test, and share code snippets directly on the site", link: "https://stackoverflow.com/", image: "https://i.pinimg.com/564x/2e/30/2d/2e302de0ac09bc7085c45f03abc72472.jpg" },
+  { name: "GitHub Gists", description: "A service provided by GitHub that allows users to share code snippets and files", link: "https://gist.github.com/", image: "https://k9982874.gallerycdn.vsassets.io/extensions/k9982874/github-gist-explorer/0.2.3/1638842316475/Microsoft.VisualStudio.Services.Icons.Default" },
+];
+
+const CodingPlatform = () => {
   return (
-    <div>CodingPlateform</div>
-  )
-}
+    <div className="coding-platform">
+      <h1 className="title">Coding Platforms</h1>
+      <div className="tools-grid">
+        {tools.map((tool, index) => (
+          <div key={index} className="tool-card">
+            <img src={tool.image} alt={tool.name} className="tool-image" />
+            <h2 className="tool-name">{tool.name}</h2>
+            <p className="tool-description">{tool.description}</p>
+            <a href={tool.link} target="_blank" rel="noopener noreferrer" className="tool-link">Visit Website</a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
 
-export default CodingPlateform
+export default CodingPlatform;

frontend/src/style/About.css

@@ -123,6 +123,7 @@
 
 .content-box {
     border: 1px solid  #8b5cf6;
+    background-color: #101623;
     margin: 20px;
     padding: 12px 12px;
     border-radius: 12px;

frontend/src/style/CodingPlateform.css

@@ -0,0 +1,85 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+
+.coding-platform {
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.title {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.tools-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.tool-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  text-align: center;
+}
+
+.tool-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.tool-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
+
+.tool-name {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #007bff;
+}
+
+.tool-description {
+  font-size: 1rem;
+  margin-bottom: 20px;
+  color: #555;
+}
+
+.tool-link {
+  display: inline-block;
+  padding: 10px 20px;
+  background: #007bff;
+  color: #fff;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: background 0.3s ease;
+}
+
+.tool-link:hover {
+  background: #0056b3;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .tools-grid {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .tool-card {
+    width: 90%;
+  }
+}