Implemented NavBar and routing

frontend/src/Components/App.js

@@ -5,14 +5,40 @@ import CreateEvent from '../Pages/CreateEvent';
 import MyTickets from '../Pages/MyTickets';
 import Marketplace from '../Pages/Marketplace';
 import NavBar from './NavBar';
-// import { BrowserRouter } from 'react-router-dom';
-
+import NotFound from '../Pages/NotFound'
+import { BrowserRouter, Switch, Routes , Route} from 'react-router-dom'
+import SignUp from '../Pages/SignUp';
 
 function App() {
   return (
-    
+    <>
+    <BrowserRouter>
       <NavBar />
-    
+      <Switch>
+        <Route exact path='/'>
+          <Marketplace />  
+        </Route>
+        <Route exact path='/Marketplace'>
+          <Marketplace />  
+        </Route>
+        <Route exact path='/CreateEvent'>
+          <CreateEvent />  
+        </Route>
+        <Route exact path='/MyTickets'>
+          <MyTickets />  
+        </Route>
+        <Route exact path='/Login'>
+          <Login />  
+        </Route>
+        <Route exact path='/SignUp'>
+          <SignUp />  
+        </Route>
+        <Route>
+          <NotFound />  
+        </Route>
+      </Switch>
+    </BrowserRouter>
+    </>
   );
 }
 

frontend/src/Components/NavBar.js

 import React from 'react';
-// import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 const NavBar = () => {
     return (
-        <nav>
-            {/* <Link to='/'>Tickcrypt</Link> */}
+        <nav className='flex justify-between items-center pt-5 h-20 '>
+            <Link to='/' className='font-montserrat font-extrabold pl-20 text-2xl'>Tickcrypt</Link>
+            <div className='px-4 cursor-pointer md:hidden'>
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" /></svg>
+            </div>
+            <div className='pr-20 md:block hidden'> 
+                <Link to='/Marketplace' className='pt-12 px-12 font-montserrat font-bold'>Marketplace</Link>
+                <Link to='/CreateEvent' className='pt-12 px-12 font-montserrat font-bold'>Create Event</Link>
+                <Link to='/MyTickets' className='pt-12 px-12 font-montserrat font-bold'>My Tickets</Link>
+                <Link to='/Login' className='ml-10 p-5 px-24 bg-purple-500 hover:bg-purple-400 text-white rounded font-montserrat font-bold'>Login</Link>
+            </div>
         </nav>
-    
+       
     );
 };
 

frontend/src/Pages/NotFound.js

@@ -3,7 +3,7 @@ import React from 'react';
 const NotFound = () => {
     return (
         <div>
-            This is a fallback err page, no pag found!
+            This is a fallback err page, no page found!
         </div>
     );
 };

frontend/src/Pages/SignUp.js

 import React from 'react';
 
-const NignUp = () => {
+const SignUp = () => {
     return (
         <div>
             sign up on this page

frontend/src/index.css

+/* Montserrat font import */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+/* Tailwind CSS  */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file

frontend/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import App from './Components/App';
 import './index.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    
+      <App />
+    
   </React.StrictMode>,
   document.getElementById('root')
 );

package.json

@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^6.0.2",
-    "react-router-dom": "^6.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

tailwind.config.js

@@ -2,7 +2,14 @@ module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        insaneorange: "#FC5130",
+      },
+      fontFamily: {
+        'montserrat': ['Montserrat']
+      },
+    },
   },
   variants: {
     extend: {},