Updated the root structure of Client side

Client/src/App.jsx

@@ -1,43 +1,23 @@
-import * as React from 'react';
-import { useState } from 'react'
+
+import { Routes, Route } from 'react-router-dom'
 import './App.css'
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import DropDown from './Dropdown';
+import NotFound from './Pages/NotFound'
+import Login from './Pages/Login'
+import Register from './Pages/Register'
+import HomeLayout from './Layouts/HomeLayout'
+
 
 function App() {
-  const [selectedTeamMember, setSelectedTeamMember] = useState(null);
-
-  const teamMembers = [
-    { id: 1, name: 'John Doe' },
-    { id: 2, name: 'Jane Smith' },
-    { id: 3, name: 'Alex Johnson' },
-    // more team members...
-  ];
-
-  const handleTeamMemberChange = (event, value) => {
-    setSelectedTeamMember(value);
-  };
-
-  const handleSubmit = () => {
-    alert(`Selected Team Member: ${selectedTeamMember ? selectedTeamMember.name : 'None'}`);
-  };
-
   return (
     <>
-      <div className="app-container" style={{ width: '500px' }}>
-      <DropDown
-        id="team-member-autocomplete"
-        options={teamMembers}
-        label="Select team member"
-        value={selectedTeamMember}
-        onChange={handleTeamMemberChange}
-      />
-    </div>
+      <Routes>
+        <Route exact path='/' element={<HomeLayout />} />
+        <Route exact path='/register' element={<Register />} />
+        <Route exact path='/login' element={<Login />} />
+        <Route path='*' element={<NotFound />} />
+      </Routes>
     </>
-  );
+  )
 }
 
 export default App

Client/src/Components/Dropdown/index.css

@@ -0,0 +1 @@
+/* dropdown styles*/

Client/src/Components/Dropdown/index.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+const Dropdown = ({ id, label, options, onChange, value }) => {
+    return (
+        <Autocomplete
+            id={id}
+            options={options}
+            getOptionLabel={(option) => option.name}
+            value={value}
+            onChange={onChange}
+            renderInput={(params) => <TextField {...params} label={label} />}
+        />
+    );
+};
+
+// Define PropTypes for DropDown component
+Dropdown.propTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    options: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.object.isRequired,
+};
+
+export default Dropdown;

Client/src/Components/DropdownTeamMember/index.css

@@ -0,0 +1 @@
+/*Dropdown Team Member styles*/

Client/src/Components/DropdownTeamMember/index.jsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useState } from 'react'
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+// import DropDown from './Dropdown';
+import DropDown from '../Dropdown'
+
+
+
+const DropdownTeamMember = () => {
+    const [selectedTeamMember, setSelectedTeamMember] = useState(null);
+
+    const teamMembers = [
+        { id: 1, name: 'John Doe' },
+        { id: 2, name: 'Jane Smith' },
+        { id: 3, name: 'Alex Johnson' },
+        // more team members...
+    ];
+
+    const handleTeamMemberChange = (event, value) => {
+        setSelectedTeamMember(value);
+    };
+
+    const handleSubmit = () => {
+        alert(`Selected Team Member: ${selectedTeamMember ? selectedTeamMember.name : 'None'}`);
+    };
+
+    return (
+        <>
+            <div className="app-container" style={{ width: '500px' }}>
+                <DropDown
+                    id="team-member-autocomplete"
+                    options={teamMembers}
+                    label="Select team member"
+                    value={selectedTeamMember}
+                    onChange={handleTeamMemberChange}
+                />
+            </div>
+        </>
+    );
+
+}
+
+export default DropdownTeamMember

Client/src/Components/NavBar/index.css

@@ -0,0 +1 @@
+/* NavBar Component Styles*/

Client/src/Components/NavBar/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './index.css'
+
+const NavBar = () => {
+    return (
+        <div>NavBar Component</div>
+    )
+}
+
+export default NavBar

Client/src/Layouts/HomeLayout/index.css

@@ -0,0 +1 @@
+/*Homelayout styles*/

Client/src/Layouts/HomeLayout/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavBar from '../../Components/NavBar'
+import { Outlet } from 'react-router'
+import Home from '../../Pages/Home'
+import './index.css'
+
+const HomeLayout = () => {
+    return (
+        <>
+            <NavBar />
+            <Home />
+            <Outlet />
+        </>
+    )
+}
+
+export default HomeLayout

Client/src/Pages/Home/index.css

@@ -0,0 +1 @@
+/* Home Page Styles*/

Client/src/Pages/Home/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import DropdownTeamMember from '../../Components/DropdownTeamMember'
+import './index.css'
+
+
+const Home = () => {
+    return (
+        <>
+            <div>Home</div>
+            <DropdownTeamMember />
+        </>
+    )
+}
+
+export default Home

Client/src/Pages/Login/index.css

@@ -0,0 +1 @@
+/*Login styles*/

Client/src/Pages/Login/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './index.css'
+
+const Login = () => {
+    return (
+        <div>Login</div>
+    )
+}
+
+export default Login

Client/src/Pages/NotFound/index.css

@@ -0,0 +1 @@
+/*Notfoundpage styles*/

Client/src/Pages/NotFound/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './index.css'
+
+const NotFound = () => {
+    return (
+        <div>NotFoundPage</div>
+    )
+}
+
+export default NotFound

Client/src/Pages/ReadMe.md

@@ -0,0 +1 @@
+#Pages Folder

Client/src/Pages/Register/index.css

@@ -0,0 +1 @@
+/*REgister styles*/

Client/src/Pages/Register/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Register = () => {
+    return (
+        <div>Register</div>
+    )
+}
+
+export default Register

Client/src/Utils/ReadMe.md

@@ -0,0 +1 @@
+#Utils folder

Client/src/index.css

@@ -18,6 +18,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -46,9 +47,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -59,10 +62,12 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }
-}
+}

Client/src/main.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { BrowserRouter as Router, HashRouter } from 'react-router-dom'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
 )