added seo meta tags using react helmet

README.md

@@ -10,7 +10,7 @@ A Notes Taking Web App Built With Simplicity.
 
 Please give this repo a ⭐ it really helps us!
 
-Visit At <a href="https://noteslify.vercel.app" target="_blank">noteslify.vercel.app</a> Using v1.0.0 ( Latest v1.1.8-beta, Latest Stable v1.1.0 )
+Visit At <a href="https://noteslify.vercel.app" target="_blank">noteslify.vercel.app</a> Using v1.0.0 ( Latest v1.1.8-beta, Latest Stable v1.2.0 )
 
 Our System Statuspage is Available At <a href="https://dvstechlabs.statuspage.io" target="_blank">dvstechlabs.statuspage.io</a>
 

frontend/package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-detect-click-outside": "^1.1.7",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.4.0",
     "react-js-switch": "^1.1.6",
     "react-router-dom": "^6.3.0",

frontend/public/index.html

@@ -6,7 +6,6 @@
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Your Privacy Friendly, Open Source. Notes App." />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <script src="https://kit.fontawesome.com/c2536b674d.js" crossorigin="anonymous"></script>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">

frontend/src/components/Account/Account.js

@@ -6,6 +6,7 @@ import "react-toastify/dist/ReactToastify.css";
 import LoadingBar from "react-top-loading-bar";
 import Switch from "react-js-switch";
 import GlobalContext from "../../context/GlobalContext";
+import {Helmet} from "react-helmet";
 
 const Account = () => {
   const [isSwitchOn, setIsSwitchOn] = useState(true);
@@ -77,6 +78,10 @@ const Account = () => {
 
   return (
     <>
+      <Helmet>
+        <title>Noteslify | My Account</title>
+        <meta name="description" content="Manage Your Noteslify Account From Here." />
+      </Helmet>
       <LoadingBar
         color="#f11946"
         progress={progress}

frontend/src/components/Error/ErrorPage.js

@@ -4,10 +4,15 @@ import Footer from '../LandingPage/Components/Footer/Footer'
 import './ErrorPage.css'
 import errorImg from '..//../assets/error404.png'
 import {Link} from 'react-router-dom'
+import {Helmet} from "react-helmet";
 
 const ErrorPage = () => {
   return (
     <>
+      <Helmet>
+        <title>Noteslify | Error 404 Not Found</title>
+        <meta name="description" content="Noteslify. The page your looking for was not found." />
+      </Helmet>
     <Navbar/>
     <div className='errorpage_container'>
         <img className="error_banner" src={errorImg} alt="404 error image" />

frontend/src/components/ForgotPassword/ForgotPassword.js

@@ -3,6 +3,7 @@ import './ForgotPassword.css';
 import { Link } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import {Helmet} from "react-helmet";
 
 const ForgotPassword = () => {
   const [email, setEmail] = useState("");
@@ -30,6 +31,10 @@ const ForgotPassword = () => {
   }
   return (
     <div>
+      <Helmet>
+        <title>Noteslify | Forgot Password</title>
+        <meta name="description" content="Noteslify. Reset Your Password From Here." />
+      </Helmet>
       <div class="form-wrapper">
         <h1>Forgot Password?</h1>
         <br></br>

frontend/src/components/Login/Login.js

@@ -4,6 +4,7 @@ import authImg from'../../assets/authentication.svg';
 import { Link, useNavigate } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import {Helmet} from "react-helmet";
 
 const Login = () => {
     const [username, setUsername] = useState("");
@@ -83,6 +84,10 @@ const Login = () => {
 
   return (
     <>
+    <Helmet>
+        <title>Noteslify | Login</title>
+        <meta name="description" content="Noteslify. Login to your Dashboard and access your files from here." />
+    </Helmet>
     <div className="l-form">
         <div className="shape1"></div>
         <div className="shape2"></div>

frontend/src/components/Notes/Notes.js

@@ -11,6 +11,7 @@ import NotesContext from '../../context/NotesContext';
 import { marked } from 'marked';
 import RenderInWindow from './RenderInWindow';
 import MarkdownNotes from './MarkdownNotes';
+import {Helmet} from "react-helmet";
 
 const Notes = () => {
     const [isSwitchOn, setIsSwitchOn] = useState(true);
@@ -209,6 +210,10 @@ const Notes = () => {
 
   return (
     <>
+    <Helmet>
+        <title>Noteslify | Dashboard</title>
+        <meta name="description" content="Noteslify. View your files and dashboard here." />
+    </Helmet>
     <LoadingBar
         color='#f11946'
         progress={progress}

frontend/src/components/RecycleBin/RecycleBin.js

@@ -6,6 +6,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import { useNavigate } from 'react-router-dom';
 import { RiInboxUnarchiveLine } from 'react-icons/ri';
 import { AiFillDelete } from 'react-icons/ai';
+import {Helmet} from "react-helmet";
 
 const RecycleBin = () => {
     const [progress, setProgress] = useState(0);
@@ -92,6 +93,10 @@ const RecycleBin = () => {
 
   return (
     <>
+    <Helmet>
+        <title>Noteslify | Recycle Bin</title>
+        <meta name="description" content="Noteslify. Clear Or Restore Your Files from Bin." />
+    </Helmet>
     <LoadingBar
         color='#f11946'
         progress={progress}