Rajeev Singh Submission

README.md

@@ -1,3 +1,17 @@
+# Web App Details
+1. Helps user login using their name
+2. Login redirects to the products page, currently we are using dummy data from dummyjson.com and with a limit of 100, moving forward we can add more data to this list.
+3. User can add items to the cart by clicking on the add item button.
+4. User can search items through typing text in the search bar or giving input through narration by clicking on the mic icon and saying the product name. This filters the data for the user.
+5. After adding, they will see a pop up mentioning added item to the cart and the cart symbol will update with current item in the cart.
+6. User can see all the items in the cart, their quantity and total cost of the cart and per item.
+7. They can share this cart with someone by clicking on share cart button and entering the email id.
+
+# Future Improvements:-
+1. Improving UI
+2. Adding more levels of security and a well maintained backend system, as current data is being stored in sessionstorage due to given scope of the project.
+3. Having a customized emailing template and a custom email sending function rather than using EmailJs. 
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

package.json

@@ -11,8 +11,10 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
+    "emailjs-com": "^3.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "web-vitals": "2.1.4"
   },

similarity.js

@@ -0,0 +1,36 @@
+const stringSimilarity = require('string-similarity');
+
+// Sample passage
+const passage = `
+Mens Casual Premium Slim Fit T-Shirts Slim-fitting style, 
+contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable 
+and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual 
+fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.
+Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday
+`;
+
+// Function to search for similar text
+function searchSimilarText(query, passage, numResults = 3) {
+  const sentences = passage.split('\n').filter((sentence) => sentence.trim() !== '');
+
+  // Calculate the similarity between the query and each sentence
+  const similarities = sentences.map((sentence) => ({
+    sentence,
+    similarity: stringSimilarity.compareTwoStrings(query, sentence),
+  }));
+
+  // Sort by similarity and return the top results
+  similarities.sort((a, b) => b.similarity - a.similarity);
+
+  return similarities.slice(0, numResults);
+}
+
+// Example usage
+const query = 'Slim Fit TShirt';
+const results = searchSimilarText(query, passage);
+
+console.log('Query:', query);
+console.log('Similar Text:');
+results.forEach((result) => {
+  console.log(`Sentence: ${result.sentence}, Similarity: ${result.similarity}`);
+});

src/App.js

@@ -1,98 +1,121 @@
 import React, { useEffect, useState } from 'react'
-
-import CssBaseline from '@mui/material/CssBaseline'
-
 import {
-  createTheme,
-  ThemeProvider,
-  responsiveFontSizes,
-} from '@mui/material/styles'
-
-import Stack from '@mui/material/Stack'
-
-import Content from './components/Content'
-import Loading from './components/Loading'
-
-
-let theme = createTheme({
-  palette: {
-    primary: {
-      main: '#de6720',
-    },
-    secondary: {
-      main: '#0077ea',
-    },
-  },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        html: {
-          WebkitFontSmoothing: 'auto',
-        },
-        body: {
-          background: '#fefefe',
-          overflow: 'hidden',
-          padding: '5px',
-          width: '450px',
-          color: '#333',
-        },
-      },
-    },
-    MuiLinearProgress: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'rgba(222, 103, 32, 0.25)',
-        },
-        bar: {
-          backgroundColor: 'rgba(222, 103, 32, 1)',
-        },
-      },
-    },
-  },
-})
-theme = responsiveFontSizes(theme)
-
-
-const App = () => {
-
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-
-    // show a loading indicator
-    setLoading(true)
-
-    setTimeout(() => {
-
-      // hide loading indicator
-      setLoading(false)
-    }, 1000) // 1 second
-
-    // hide loading indicator
-    return () => {
-      setLoading(false)
-    }
-  }, [])
-
-  const renderLoading = () => {
-    if ( !loading ) { return }
-    return <Loading text='loading..' />
-  }
-
-  const renderContent = () => {
-    if ( loading ) { return }
-    return <Content />
-  }
-
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link
+} from "react-router-dom";
+// import CssBaseline from '@mui/material/CssBaseline'
+
+// import {
+//   createTheme,
+//   ThemeProvider,
+//   responsiveFontSizes,
+// } from '@mui/material/styles'
+
+// import Stack from '@mui/material/Stack'
+
+// import Content from './components/Content'
+// import Loading from './components/Loading'
+import Login from './components/login'
+import Dashboard from './components/Dashboard';
+import MyComponent from './components/fetch';
+import Cart from './components/Cart';
+// import Appmail from './components/sendEmail';
+// let theme = createTheme({
+//   palette: {
+//     primary: {
+//       main: '#de6720',
+//     },
+//     secondary: {
+//       main: '#0077ea',
+//     },
+//   },
+//   components: {
+//     MuiCssBaseline: {
+//       styleOverrides: {
+//         html: {
+//           WebkitFontSmoothing: 'auto',
+//         },
+//         body: {
+//           background: '#fefefe',
+//           overflow: 'hidden',
+//           padding: '5px',
+//           width: '450px',
+//           color: '#333',
+//         },
+//       },
+//     },
+//     MuiLinearProgress: {
+//       styleOverrides: {
+//         root: {
+//           backgroundColor: 'rgba(222, 103, 32, 0.25)',
+//         },
+//         bar: {
+//           backgroundColor: 'rgba(222, 103, 32, 1)',
+//         },
+//       },
+//     },
+//   },
+// })
+// theme = responsiveFontSizes(theme)
+
+
+// const App = () => {
+
+//   const [loading, setLoading] = useState(false)
+
+//   useEffect(() => {
+
+//     // show a loading indicator
+//     setLoading(true)
+
+//     setTimeout(() => {
+
+//       // hide loading indicator
+//       setLoading(false)
+//     }, 1000) // 1 second
+
+//     // hide loading indicator
+//     return () => {
+//       setLoading(false)
+//     }
+//   }, [])
+
+//   const renderLoading = () => {
+//     if ( !loading ) { return }
+//     return <Loading text='loading..' />
+//   }
+
+//   const renderContent = () => {
+//     if ( loading ) { return }
+//     return <Content />
+//   }
+
+//   return (
+//     <ThemeProvider theme={theme}>
+//       <CssBaseline />
+//       <Stack spacing={2}>
+//         {/* {renderLoading()}
+//         {renderContent()} */}
+
+//       </Stack>
+//     </ThemeProvider>
+//   )
+// }
+function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Stack spacing={2}>
-        {renderLoading()}
-        {renderContent()}
-      </Stack>
-    </ThemeProvider>
-  )
+    <Router>
+        <Routes>
+          <Route exact path="/login" element={<><Login/></>}/>
+          <Route exact path="/dashboard" element={<><Dashboard/></>}/>
+          <Route exact path="/fetch" element={<><MyComponent/></>}/>
+          <Route exact path="/cart" element={<><Cart/></>}/>
+          {/* <Route exact path="/mail" element={<><Appmail/></>}/> */}
+          </Routes>
+    </Router>
+  );
 }
 
+
 export default App