Merge branch 'main' into Cisco-NetCad

CODE_OF_CONDUCT.md

@@ -59,8 +59,8 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-.
+reported to the community leaders responsible for enforcement at [email protected] .
+
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -84,6 +84,6 @@ eg: chore: added tool #issuenumber
 2. The tags which can be used for url submission are as follows:
 fix: , feat: , docs: , test: , chore: , ci: , perf: , refactor: , revert: , style: , data:
 3. Put an x between the braces to select the keypoint and leave a space if you don't want to select it.
-eg: [x] I foolow the contribution guidelines.
+eg: [x] I follow the contribution guidelines.
 8. Wait for your PR review and merge approval!
 9. **Star this repository** if you had fun contributing!

README.md

@@ -1,13 +1,14 @@
-Welcome 👋
+<div align="center">
+  <h1>Welcome <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="25px"></h1>
 
-Free-Hit is an web application that is used to search for free tools that are both free and helpful for our needs. It is built by the amazing open-source community. Here you will find a list of free tools that can help you in your day-to-day life. You can also contribute to this project by adding more tools to our database.
 
+Free-Hit is 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 Free-Hit, 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.</div>
 > You can check out the live project https://free-hit.vercel.app
-> ![free-hit](https://github.com/JasonDsouza212/free-hit/assets/88102392/3bd18ef6-fc72-4882-85c3-9591c7d94067)
 
+> ![free-hit](https://github.com/JasonDsouza212/free-hit/assets/88102392/3bd18ef6-fc72-4882-85c3-9591c7d94067)
 
-## 💻 Tech Stack
 
+## Tech Stack
 - [Reactjs](https://react.dev) - Reactjs is a JavaScript library for building user interfaces.
 - [Vite](https://vitejs.dev) - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
 - [PNPM](https://pnpm.io) - PNPM is a fast, disk space efficient package manager that helps to fetch packages from the registry.
@@ -32,7 +33,10 @@ Contributions are welcome! If you have any ideas, suggestions, or bug fixes, ple
 
 
 
+## License
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+Terms and conditions for use, reproduction and distribution are under the [MIT License](https://opensource.org/license/mit/).
 
 ## ✨ Authors(only for GSSoC'23)
 

extenstion/DB/product.json

@@ -1061,7 +1061,7 @@
     "productName": "Moviesmod",
     "category": "movies",
     "image": "https://bit.ly/3ZMrGen",
-    "link": "https://moviesmod.net.in/",
+    "link": "https://moviesmod.one/",
     "description": "Download HD quality movies and series"
   },
   {
@@ -2573,6 +2573,13 @@
   "link": "https://app.haikei.app/",
   "description": "Generate Blob, Wave, Blurry Gradients, Circle Scatter, Blob Scene, Layered Waves, etc."
 },
+{
+  "productName": "sflix",
+  "category": "movies",
+  "image": "https://sflix.video/",
+  "link": "https://sflix.video/",
+  "description": "sflix have old bollywood and hollywood movie which is completely free"
+},
 {
   "productName": "Gitter",
   "category": "tools",

src/App.jsx

@@ -6,7 +6,7 @@ import BookMarks from './pages/Bookmarks'
 import NotFound from './pages/NotFound'
 import Community from './pages/Community'
 import Layout from './components/Layout'
-import {Analytics} from '@vercel/analytics/react'
+import { Analytics } from '@vercel/analytics/react'
 
 const ToolContext = createContext()
 const LOCAL_STORAGE_KEY = 'freehit.bookmarks'
@@ -18,7 +18,10 @@ function App() {
   const [bookmarks, setBookmarks] = useState([])
 
   // dark mode
-  const [darkMode, setDarkMode] = useState(localStorage.getItem("darkMode") || false);
+  const [darkMode, setDarkMode] = useState(
+    localStorage.getItem('darkMode') ||
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+  )
 
   // initial Storage
   useEffect(() => {
@@ -33,18 +36,15 @@ function App() {
 
   //dark-mode
   useEffect(() => {
-    const darkmodejson = localStorage.getItem("darkMode")
+    const darkmodejson = localStorage.getItem('darkMode')
     if (darkmodejson != null) setDarkMode(JSON.parse(darkmodejson))
     // else setDarkMode([])
   }, [])
-  
+
   useEffect(() => {
-    localStorage.setItem("darkMode", JSON.stringify(darkMode))
+    localStorage.setItem('darkMode', JSON.stringify(darkMode))
   }, [darkMode])
 
-
-
-
   // Add bookmark
   function handelBookmarkAdd(bookmark) {
     const newBookmark = {
@@ -57,15 +57,23 @@ function App() {
     setBookmarks([...bookmarks, newBookmark])
   }
 
-
-
   // Remove Bookmark
   function deleteres(product) {
     setBookmarks(
       bookmarks.filter((res) => res.productName !== product.productName)
     )
   }
 
+  //search box debouncing
+  const debounce = (fn, delay) => { 
+  let timerId = null;
+  return (...args) => {
+    if(time)
+      clearTimeout(timerId);
+      timerId = setTimeout(() => fn(...args), delay);
+  };
+}
+
   // values to pass to context hook s
   const toolContextValue = {
     handelBookmarkAdd,
@@ -74,27 +82,28 @@ function App() {
     gridView,
     setGridView,
     darkMode,
-    setDarkMode
+    setDarkMode,
+    debounce
   }
 
   return (
     <>
       <div className="app">
         <ToolContext.Provider value={toolContextValue}>
           <div className="routes-holder">
-              <Routes>
-                <Route path="/" element={<Layout />}>
-                  <Route index element={<Card />} />
-                  <Route path="about" element={<About />} />
-                  <Route path="bookmarks" element={<BookMarks />} />
-                  <Route path="community" element={<Community />} />
-                  <Route path="*" element={<NotFound />} />
-                </Route>
-              </Routes>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route index element={<Card />} />
+                <Route path="about" element={<About />} />
+                <Route path="bookmarks" element={<BookMarks />} />
+                <Route path="community" element={<Community />} />
+                <Route path="*" element={<NotFound />} />
+              </Route>
+            </Routes>
           </div>
         </ToolContext.Provider>
       </div>
-      <Analytics/>
+      <Analytics />
     </>
   )
 }

src/DB/product.json

@@ -1,4 +1,20 @@
 [
+  {
+    "productName": "Hi TV",
+    "category": "movies",
+    "image": "https://tinyurl.com/4xhvbctb",
+    "link": "https://www.gohitv.com/",
+    "description": "Binge Latest Korean shows and Movies for free"
+  },
+
+   {
+    "productName": "Appwrite",
+    "category": "tools",
+    "image": "bit.ly/44JAwMJ",
+    "link": "https://appwrite.io/",
+    "description": "backend platform for developing Web, Mobile, and Flutter applications"
+  },
+
   {
     "productName": "BlockSite",
     "category": "extensions",
@@ -1169,7 +1185,7 @@
     "productName": "Moviesmod",
     "category": "movies",
     "image": "https://bit.ly/3ZMrGen",
-    "link": "https://moviesmod.net.in/",
+    "link": "https://moviesmod.one/",
     "description": "Download HD quality movies and series"
   },
   {
@@ -1989,7 +2005,7 @@
   "description": "Roadmap.sh is an effort to create roadmaps and guides to help developers in picking up the path"
 },
 {
-    "productName": "felxjobs",
+    "productName": "flexjobs",
     "category": "remote",
     "image": "https://tinyurl.com/ybfchtmw",
     "link": "https://www.flexjobs.com/",
@@ -3298,6 +3314,15 @@
   "image": "bit.ly/3XHUlRw",
   "link": "https://bit.ly/46IGKNU",
   "description": "Automatically integrate your Leetcode & GeeksforGeeks submissions to GitHub"
+
+  },
+  {
+  "productName": "NPTEL",
+  "category": "courses",
+  "image": "https://storage.googleapis.com/swayam2-node/assets/img/swayam_images/swayam_logo.png",
+  "link": "https://onlinecourses.nptel.ac.in/",
+  "description": "NPTEL is a project of MHRD initiated by 7 IITs along with the IISc, Bangalore in 2003, to provide quality education to anyone interested in learning from the IITs."
+
 },
 {
   "productName": "Flexbox Defense",
@@ -3341,6 +3366,12 @@
   "link": "https://goku.sx/home",
   "description": "This website offers animes, movies, cartoons, series, etc. in HD quality"
 },
+{ "productName": "Codementor",
+  "category": "coding", 
+   "image": "https://user-images.githubusercontent.com/84512164/249226971-111a6f09-4c8e-4921-a9f6-4aacdadf1f45.jpg",
+   "link": "https://www.codementor.io/projects",
+   "description": "This platform helps developers to Build JavaScript Projects and also connects them with mentors" 
+},
 {
   "productName":"Instahyre",
   "category":"remote",
@@ -3355,6 +3386,13 @@
   "link": "https://www.stylized.ai/",
   "description": "Helps e-commerce sellers create professional product photos in seconds."
 },
+{
+  "productName": "Library-genesis",
+  "category": "Online library",
+  "image": "https://bit.ly/44EEZzy",
+  "link": "https://libgen.is/",
+  "description": "Library Genesis is an online library providing free access to a wide range of books, articles, and scientific papers."
+},
 {
   "productName":"Coding Game",
   "category":"tools",
@@ -3375,5 +3413,19 @@
   "image":"https://rb.gy/rif10",
   "link":"https://www.netacad.com/",
   "description":"Learn the technology-JavaScript, land your dream job."
+},
+{
+  "productName": "Asura Scans",
+  "category": "comics",
+  "image": "https://t.ly/jlYZI",
+  "link": "https://t.ly/RbjWn",
+  "description": "Read Mangas, Manhwas and other comics at no cost."
+},
+{
+  "productName":"Numerous.ai",
+  "category":"ai",
+  "image":"https://rb.gy/6yq5o",
+  "link":"https://numerous.ai/",
+  "description":"Helps you to extract text, categorize, generate formulas, and use ChatGPT right inside your spreadsheet."
 }
 ]

src/components/Footer.jsx

@@ -1,6 +1,5 @@
 import freehitlogo from '../assets/footer-logo.png'
 import "../styles/Footer.css"
-
 const Footer = () => {
   // gettin year dynamically
   const date = new Date();
@@ -9,7 +8,9 @@ const Footer = () => {
     <footer>
       <div className="footer-content">
         <h3>
+          <a class="" href="/about">
           <img className="free-logo-footer" src={freehitlogo} alt="logo" />
+            </a>
         </h3>
         <p>
           Find the tools you need without breaking the bank

src/components/Navbar.jsx

@@ -9,13 +9,15 @@ import Sidebar from './Sidebar'
 import { ToolContext } from '../App';
 import { useContext } from 'react';
 import mobilelogo from '../assets/mobileview.png'
+import { useState } from 'react'
 
 
 const Header = ({ filteredSuggestions }) => {
   const [searchParams, setSearchParams] = useSearchParams()
-  const { darkMode } = useContext(ToolContext);
+  const { darkMode ,debounce } = useContext(ToolContext);
   const location = useLocation()
   const sideNavRef = useRef(null)
+  const [search ,setSearch]=useState('')
 
   const searchTerm = searchParams.get('q') || ''
 
@@ -46,6 +48,8 @@ const Header = ({ filteredSuggestions }) => {
   const handleChangeInInput = (event) => {
     const val = event.target.value
     setSearchTerm(val)
+    setSearch(val)
+  debounce(setSearchTerm,500)(val);
   }
 
   return (
@@ -76,7 +80,7 @@ const Header = ({ filteredSuggestions }) => {
               type="text"
               className="input"
               placeholder="Search..."
-              value={searchTerm}
+              value={search}
               onChange={(e) => handleChangeInInput(e)}
             />
             <div className="btn btn_common">

src/components/Pagination.jsx

@@ -17,22 +17,24 @@ export default function Pagination({ totalPages, atTop }) {
 	return (
 		atTop
 			? <div className="pagination-top top-pagination">
-				{currentPage > 1 && <button className="paginate-nav" onClick={() => handleClick(currentPage - 1)} > &lt;  </button>}
+				{currentPage > 1 && <button className="nextbutton" onClick={() => handleClick(currentPage - 1)} > &lt; </button>}
 				{
 					pageNumbers.slice(currentPage - 2 >= 0 ? currentPage - 2 : 0, currentPage + 1).map(number =>
 						<button className={`paginate-button ${currentPage == number ? 'selected-page' : ''}`} key={number} onClick={() => { handleClick(number) }} >{number}</button>
 					)
 				}
-				{currentPage < totalPages && <button className="paginate-nav" onClick={() => handleClick(currentPage + 1)}> &gt;</button>}
+				{currentPage < totalPages && <button className="nextbutton" onClick={() => handleClick(currentPage + 1)}> &gt;</button>}
 			</div>
 			: <div className="pagination">
-				{currentPage > 1 && <button className="paginate-nav" onClick={() => handleClick(currentPage - 1)} > &lt; Prev</button>}
+			<button className="firstbutton" onClick={() => handleClick(1)}><b>&lt;&lt;</b>&nbsp;</button>
+				{currentPage > 1 && <button className="prevbutton" onClick={() => handleClick(currentPage - 1)} > &lt;</button>}
 				{
 					pageNumbers.slice(currentPage - 2 >= 0 ? currentPage - 2 : 0, currentPage + 1).map(number =>
 						<button className={`paginate-button ${currentPage == number ? 'selected-page' : ''}`} key={number} onClick={() => { handleClick(number) }} >{number}</button>
 					)
 				}
-				{currentPage < totalPages && <button className="paginate-nav" onClick={() => handleClick(currentPage + 1)}>Next &gt;</button>}
+				{currentPage < totalPages && <button className="prevbutton" onClick={() => handleClick(currentPage + 1)}> &gt;</button>}
+			    <button className="lastbutton" onClick={() => handleClick(totalPages)}>&nbsp;<b>&gt;&gt;</b></button>
 			</div>
 
 	)

src/styles/Home.css

@@ -203,8 +203,7 @@ img {
 }
 
 .dark-mode .card_view svg {
-  /* fill: var(--primary-white); */
-  color: var(--primary-white);
+  filter: invert(100%);
 }
 
 .dark-mode .no-results {
@@ -226,4 +225,11 @@ img {
 
 .card_container .card-container .not-found-wrapper .no-results.dark-mode {
   color: white;
+}
+
+@media screen and (max-width: 350px) {
+  .top-pagination {
+
+    margin-left: 0px;
+  }
 }