added error page

.gitignore

@@ -0,0 +1 @@
+./node_modules

client/.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+../node_modules

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

client/src/App.js

@@ -1,15 +1,54 @@
 import logo from './logo.svg';
 import './App.css';
+import Error_ from './components/error/Error';
+import history from './history';
+import {
+  Route,
+  Router,
+  Switch,
+  BrowserRouter as Routerr,
+} from 'react-router-dom';
+import { useState, useEffect } from 'react';
+
+import Home from './components/home/Home';
+import screenGif from './gif/splash-screen.gif';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Hello, All-Notes :)</h1>
-
-      </header>
-    </div>
-  );
+  const [onLoading, changeLoading] = useState(true);
+  let content = <img src={screenGif} alt='Loading...' />;
+
+  // let content = 'Loading...';
+
+  if (!onLoading)
+    content = (
+      <div className='App'>
+        <Router history={history}>
+          <Switch>
+            <Route path='/' exact component={Home} />
+            <Route path='/:error' exact component={Error_} />
+          </Switch>
+        </Router>
+      </div>
+    );
+
+  useEffect(() => {
+    changeLoading(false);
+  }, []);
+
+  // let contentToShow = (
+  //   <div className='App'>
+  //     <Router history={history}>
+  //       <Switch>
+  //         <Route path='/' exact component={Home} />
+  //         <Route path='/:error' exact component={Error_} />
+  //       </Switch>
+  //     </Router>
+  //   </div>
+  // );
+
+  return content;
+
+  // {onLoading ? { contentToShow } : <div>" loading" </div>}
 }
 
 export default App;

client/src/components/error/Error.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import error_image from './error-screen-desktop.png';
+import { Link, Router } from 'react-router-dom';
+import history from '../../history';
+
+function Error() {
+  return (
+    <div>
+      <h2> Error 404 !</h2>
+      <Router history={history}>
+        <Link to='/'>
+          <div className='App-header'>
+            <img src={error_image} alt='Error 404' />
+          </div>
+        </Link>
+      </Router>
+    </div>
+  );
+}
+
+export default Error;

client/src/components/home/Home.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Home() {
+  return (
+    <div>
+      <header className='App-header'>
+        <h1>Hello, All-Notes </h1>
+      </header>
+    </div>
+  );
+}
+
+export default Home;

client/src/history.js

@@ -0,0 +1,3 @@
+const createHistory = require('history').createBrowserHistory;
+
+export default createHistory();

server/Routes/Delete/Delete.js

@@ -0,0 +1,26 @@
+const express = require('express');
+const app = express();
+
+// assuming model to be of name - User
+const User = mongoose.model('User');
+
+module.exports.DeleteRoute = (req, res) => {
+  const { body } = req;
+  const { name, email, _id } = body;
+
+  if (!name || !email || !_id)
+    return res.send({
+      message: ' Error ! Product not found ',
+    });
+
+  User.findByIdAndRemove(_id, (err, docs) => {
+    if (err) {
+      return res.send({
+        message: ' Sorry ! The process could not be completed',
+      });
+    } else
+      return res.send({
+        message: ' User sucessfully deleted !',
+      });
+  });
+};

server/index.js

@@ -1,18 +1,23 @@
-const express = require('express')
+const express = require('express');
 const app = express();
 const port = 8000;
+const router = express.Router();
+
+// Delete Route
+import Delete from './Routes/Delete/Delete';
 
 var project = [
-    {
-       "name":"All Notes"
-    }
- ]
-
+  {
+    name: 'All Notes',
+  },
+];
+
+router.delete('/delete/user', Delete.DeleteRoute);
 
 app.get('/', (req, res) => {
-    res.json(project)
-  });
-  
-  app.listen(port, () => {
-    console.log(`Application listening on port ${port}!`)
-  });
+  res.json(project);
+});
+
+app.listen(port, () => {
+  console.log(`Application listening on port ${port}!`);
+});