feat: error 404 component added

client/src/App.js

@@ -1,44 +1,30 @@
-
-import "react-toastify/dist/ReactToastify.css";
+import { useState } from "react";
 import "./App.css";
 import Home from "./Components/Home";
-import { Route, Routes } from "react-router-dom";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import { Routes, Route } from "react-router-dom";
+import ErrorPage from "./Components/404";
 import SendNewsFeed from "./Components/SendNewsFeed";
 import Login from "./Components/Login";
 
 function App() {
-
-
+   
+  const [loading, setLoading] = useState(true);
   const spinner = document.getElementById("spinner");
   if (spinner) {
     setTimeout(() => {
       spinner.style.display = "none";
 
     }, 2000);
   }
-
-
   return (
-    <Routes>
-      <Route path="/" element={<>
-        <Home />
-      <ToastContainer
-        position="top-center"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="light"
-      /></>}/>
-      <Route path='/sendNews' element={<SendNewsFeed/>}/>
-      <Route path='/login' element={<Login/>}/>    
-    </Routes>
+    !loading && <div>
+      <Routes>
+        <Route path="/" element={<Home/>}/>
+        <Route path='/sendNews' element={<SendNewsFeed/>}/>
+        <Route path='/login' element={<Login/>}/>
+        <Route path="*" element={<ErrorPage/>}/>
+      </Routes>
+      </div>
   );
 }
 

client/src/CSS/404.css

@@ -0,0 +1,5 @@
+.error{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

client/src/Components/404.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "../CSS/404.css"
+import error404 from "../Assets/error404.png"
+
+const ErrorPage = () => {
+    return(
+
+        <div className="error">
+            <img src={error404}></img>
+        </div>
+    )
+}
+
+export default ErrorPage;

client/src/Components/Home.jsx

@@ -10,10 +10,25 @@ import Testimonials from "./Testimonials";
 import Images from "./Image";
 import "../CSS/MediaQuery.css";
 import Faq from "./Faq";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import React, { useState } from "react";
 
 const Home = () => {
   return (
     <div>
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
       <Helmet>
         <title>DevFeed</title>
       </Helmet>

client/src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import {BrowserRouter} from "react-router-dom";