add qr code to home page

frontend/package.json

@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

frontend/src/components/HomePage.js

@@ -10,8 +10,10 @@ import {
   FormControl,
   Stack,
   Alert,
+  Box,
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
+import QRCode from 'react-qr-code';
 
 function HomePage() {
   const [quizID, setQuizID] = useState('');
@@ -68,6 +70,9 @@ function HomePage() {
     navigate('/create-quiz');
   };
 
+  // Get the current page URL
+  const pageURL = window.location.href;
+
   return (
     <Container maxWidth="sm">
       <Typography variant="h4" gutterBottom>
@@ -142,6 +147,21 @@ function HomePage() {
           Create a New Quiz
         </Button>
       </Stack>
+
+      <Box sx={{ marginTop: 4, textAlign: 'center' }}>
+        <Typography variant="h6" gutterBottom>
+          Share this Page
+        </Typography>
+        <Box
+          sx={{
+            background: 'white',
+            display: 'inline-block',
+            padding: '16px',
+          }}
+        >
+          <QRCode value={pageURL} size={128} />
+        </Box>
+      </Box>
     </Container>
   );
 }

frontend/src/components/QuizPage.js

@@ -1,4 +1,3 @@
-// QuizPage.js
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import {

frontend/src/components/ResultPage.js

@@ -1,4 +1,3 @@
-// ResultPage.js
 import React, { useEffect, useState, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import {