feedback backend and frontend added and many bug fixed

client/package.json

@@ -15,6 +15,7 @@
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "axios": "^1.6.5",
+    "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "firebase": "^10.7.2",
     "pdf-lib": "^1.17.1",
@@ -27,11 +28,12 @@
     "react-pdf": "^8.0.2",
     "react-rating-stars-component": "^2.2.0",
     "react-router": "^6.21.0",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.23.1",
     "react-select-search": "^4.1.7",
     "react-share": "^5.1.0",
     "react-spinners": "^0.13.8",
-    "react-toastify": "^10.0.4",
+    "react-toastify": "^10.0.5",
+    "styled-components": "^6.1.11",
     "unique-filename": "^3.0.0",
     "uuid": "^9.0.1"
   },

client/src/App.jsx

@@ -13,14 +13,15 @@ import LeaderBoard from "./components/Leaderboard/LeaderBoard";
 import Notifcation from "./components/NotifcationPage/Notifcation";
 import Settings from "./components/Settings/Setting";
 import MasterPage from "./MasterPage";
+import Feedback from "./components/feedback/Feedback";
 
 function App() {
   return (
     <UserContextProvider>
           <Routes>
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
-            <Route path="/verifyxOtp" element={<VerifyOtp />} />
+            <Route path="/verifyOtp" element={<VerifyOtp />} />
 
             <Route path="/" element={<MasterPage/>}>
               <Route index element={<Dashboard />}/>
@@ -30,6 +31,8 @@ function App() {
               <Route path="/request" element={<RequestPage />} />
               <Route path="/leaderboard" element={<LeaderBoard />} />
               <Route path="/settings" element={<Settings />} />
+              <Route path="/feedback" element={<Feedback />} />
+
             </Route>
           </Routes>
           <Analytics />

client/src/components/Footer/index.jsx

@@ -32,16 +32,21 @@ const Footer = () => {
               </a>
             </li>
             <li>
-              <a href="/contact" className="hover:underline">
+              <a href="/contact" className="hover:underline me-4 md:me-6">
                 Contact
               </a>
             </li>
+            <li>
+              <a href="/feedback" className="hover:underline">
+                Feedback
+              </a>
+            </li>
           </ul>
         </div>
-        <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-        <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
+        <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+        <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
           © {new Date().getFullYear()}
-          <a href="https://flowbite.com/" class="hover:underline">
+          <a href="https://flowbite.com/" className="hover:underline">
             ExamTime
           </a>
           . All Rights Reserved.

client/src/components/Login/Login.jsx

@@ -9,6 +9,7 @@ import { toast, Bounce, ToastContainer } from "react-toastify";
 import { Loader } from "../Loader/Loader";
 
 const Login = () => {
+
   const {
     register,
     handleSubmit,
@@ -36,8 +37,10 @@ const Login = () => {
       .post(`${import.meta.env.VITE_BASE_URL}/user/login`, data)
       .then((res) => {
         console.log(res.data.message);
+        console.log("client cheking")
         if (res.data.message === "login success") {
           localStorage.setItem("token", res.data.token);
+          console.log(res.data.token)
           setUser(res.data.user);
           setloginError("");
           setTimeout(() => {

client/src/components/Navbar/Navbar.jsx

@@ -163,7 +163,7 @@ const Navbar = () => {
                     ))}
 
                     <div className="text-gray-200  mt-2 ml-2">
-                      Coins:{user.coins}
+                      Coins:{user ? user.coins : null}
                     </div>
                   </div>
                 </div>

client/src/components/Signup/Signup.jsx

@@ -98,6 +98,11 @@ const Signup = () => {
   if (loading) {
     return <Loader />;
   }
+  const isAdminEmail = (email) => {
+    // Define your admin email here
+    const adminEmail = "admin@example.com";
+    return email === adminEmail;
+  };
 
   return (
     <>
@@ -117,6 +122,8 @@ const Signup = () => {
           <form
             className="space-y-6"
             onSubmit={handleSubmit((data) => {
+              // Add logic to set the role based on the email
+              data.role = isAdminEmail(data.email) ? "admin" : "user";
               registerUser(data);
             })}
           >

client/src/components/feedback/Feedback.jsx

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+import { Link, useNavigate } from 'react-router-dom';
+import feedbackImage from '../../assets/feedback.jpg';
+import axios from 'axios';
+import { toast } from 'react-toastify';
+
+const enlargeShrinkAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+`;
+
+const FeedbackContainer = styled.div`
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
+`;
+
+const BackgroundContainer = styled.div`
+  width: 50%;
+  max-width: 100%; /* Added max-width */
+  background: url(${feedbackImage});
+  background-size: cover;
+`;
+
+const ContentContainer = styled.div`
+  width: 50%;
+  max-width: 50%; /* Added max-width */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+git checkout -b feed
+
+
+const FeedbackHeader = styled.h2`
+  color: #fff;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 22px;
+`;
+
+const StarContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+`;
+
+const Star = styled.span`
+  font-size: 24px;
+  color: ${(props) => (props.selected ? '#FFD700' : '#ccc')};
+  cursor: pointer;
+`;
+
+const TextArea = styled.textarea`
+  width: 100%;
+  height: 150px;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: none;
+  font-size: 16px;
+`;
+
+const SubmitButton = styled.button`
+  background-color: #4caf50;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 18px;
+  transition: background-color 0.3s;
+  margin-top: 20px;
+`;
+
+
+
+const EnlargingLink = styled(Link)`
+  font-size: 18px;
+  text-decoration: none;
+  color: #4caf50;
+  margin-top: 20px;
+  display: inline-block;
+  animation: ${enlargeShrinkAnimation} 3s infinite;
+`;
+
+const PopupHeader = styled.h3`
+  color: #fff;
+  font-size: 24px;
+  margin-bottom: 10px;
+`;
+
+const Popup = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  background: #003285;
+  border-radius: 20px;
+  color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+`;
+
+function Feedback() {
+  const navigate = useNavigate();
+  const [rating, setRating] = useState(0);
+  const [feedback, setFeedback] = useState('');
+  const [showPopup, setShowPopup] = useState(false);
+  const [popupMessage, setPopupMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+  // const history = useHistory();
+
+  const handleStarClick = (star) => {
+    setRating(star);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const token = localStorage.getItem("token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        withCredentials: true,
+      };
+
+      const response = await axios.post(
+        `${import.meta.env.VITE_BASE_URL}/feedback/create`,
+        { rating, feedbackMessage: feedback },
+        config
+      );
+
+      if (response.status === 201) {
+        setPopupMessage('Feedback submitted successfully!');
+        setShowPopup(true);
+        setRating(0);
+        setFeedback('');
+      } else {
+        setPopupMessage('Error submitting feedback. Please try again later.');
+        setShowPopup(true);
+      }
+    } catch (error) {
+      console.error('Error submitting feedback:', error.message);
+      setPopupMessage('Error submitting feedback. Please try again later.');
+      setShowPopup(true);
+    }
+  };
+
+
+  const getGreeting = () => {
+    if (rating > 3) {
+      return 'Thank you for your positive feedback!';
+    } else {
+      return 'We appreciate your feedback.';
+    }
+  };
+
+  return (
+    <FeedbackContainer>
+      <BackgroundContainer />
+      <ContentContainer>
+        <FeedbackHeader>{getGreeting()}</FeedbackHeader>
+        <StarContainer>
+          {[1, 2, 3, 4, 5].map((star) => (
+            <Star
+              key={star}
+              selected={star <= rating}
+              onClick={() => handleStarClick(star)}
+            >
+              &#9733;
+            </Star>
+          ))}
+        </StarContainer>
+        <TextArea
+          placeholder="Write your feedback here..."
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+        />
+        <SubmitButton onClick={handleSubmit}>Submit</SubmitButton>
+        <EnlargingLink to="/">Go to home</EnlargingLink>
+      </ContentContainer>
+      {showPopup && (
+        <Popup>
+          <PopupHeader>Feedback Submission Status</PopupHeader>
+          <h4>{popupMessage}</h4>
+          <button onClick={() => setShowPopup(false)}>Close</button>
+        </Popup>
+      )}
+    </FeedbackContainer>
+  );
+}
+
+export default Feedback;

server/app.js

@@ -18,12 +18,14 @@ const userRoutes = require("./routes/user.routes.js");
 const noteRoutes = require("./routes/note.routes.js");
 const subjectRoutes = require("./routes/subject.routes.js");
 const requestRoutes = require("./routes/request.routes.js");
+const feedbackroutes = require("./routes/feedback.routes.js");
 
 // routes declare
 app.use("/user", userRoutes);
 app.use("/note", noteRoutes);
 app.use("/subject", subjectRoutes);
 app.use("/request", requestRoutes);
+app.use("/feedback", feedbackroutes);
 
 app.get("/", (req, res) => {
   res.send("Yupp The server is runnng 🎉 !");