Addeed voting and home page ✔

2024-11-07 12:05:27 +05:30
parent 0a6faad13e
commit ece2b33eb7
8 changed files with 158 additions and 39 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,9 @@
      "name": "frontend",
      "version": "0.0.0",
      "dependencies": {
+        "chart.js": "^4.4.6",
        "react": "^18.3.1",
+        "react-chartjs-2": "^5.2.0",
        "react-dom": "^18.3.1",
        "react-icons": "^5.3.0",
        "react-router-dom": "^6.27.0"
@@ -1004,6 +1006,12 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1871,6 +1879,18 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chart.js": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
    "node_modules/chokidar": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -4413,6 +4433,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,9 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "chart.js": "^4.4.6",
    "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.27.0"
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,6 +7,7 @@ import LoginPage from "./pages/LoginPage";
 import Register from "./pages/Register";
 import Dashboard from "./pages/Dashboard";
 import Bookmark from "./pages/Bookmark";
+import VotingPage from "./pages/VotingPage";

 function App() {
  return (
@@ -18,6 +19,7 @@ function App() {
        <Route path="/register" element={<Register/>} />
        <Route path="dashboard" element={<Dashboard/>} />
        <Route path="bookmark" element={<Bookmark/>} />
+        <Route path="/voting/:pollId" element={<VotingPage />} />
      </Routes>
    </BrowserRouter>
  );
--- a/frontend/src/components/Header/Header.jsx
+++ b/frontend/src/components/Header/Header.jsx
@@ -1,42 +1,20 @@
 import React from 'react'
+import { Link } from 'react-router-dom'

 function Header() {
+
  return (
    <div className="navbar bg-base-100">
  <div className="flex-1">
-    <a className="btn btn-ghost text-xl">daisyUI</a>
+    <Link to={"/"}><a className="btn btn-ghost text-xl">LivePoll</a></Link>
  </div>
  <div className="flex-none">
-    <div className="dropdown dropdown-end">
-      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
-        <div className="indicator">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
-          </svg>
-          <span className="badge badge-sm indicator-item">8</span>
-        </div>
-      </div>
-      <div
-        tabIndex={0}
-        className="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow">
-        <div className="card-body">
-          <span className="text-lg font-bold">8 Items</span>
-          <span className="text-info">Subtotal: $999</span>
-          <div className="card-actions">
-            <button className="btn btn-primary btn-block">View cart</button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ul className="menu menu-horizontal px-1">
+      <li><Link to={"/login"}>Login</Link></li>
+      <li><Link to={'/bookmark'}>Bookmarks</Link></li>
+    </ul>
+  </div>  
+  <div className="flex-none">
    <div className="dropdown dropdown-end">
      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
        <div className="w-10 rounded-full">
@@ -49,12 +27,11 @@ function Header() {
        tabIndex={0}
        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
        <li>
-          <a className="justify-between">
+          <Link to={'/dashboard'}><a className="justify-between" >
            Profile
            <span className="badge">New</span>
-          </a>
+          </a></Link>
        </li>
-        <li><a>Settings</a></li>
        <li><a>Logout</a></li>
      </ul>
    </div>
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -2,8 +2,42 @@ import React from 'react'

 function Home() {
  return (
-    <div>
-      Home
+    <div className="flex bg-base-200 min-h-screen flex-col items-center text-white p-8">
+      <h1 className="text-4xl md:text-5xl font-bold mb-6">Welcome to <span className='bg-slate-800 px-4 rounded-md relative'>LivePoll</span></h1>
+      <p className="text-lg text-center max-w-2xl mb-8">
+        LivePoll is your platform for real-time, interactive polling. Create polls, participate in
+        active discussions, and get instant feedback with live updates and visualizations. Discover
+        what people think on topics that matter to you and have your voice heard!
+      </p>
+      <div className="flex flex-col lg:flex-row gap-6 mb-8">
+        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
+          <h2 className="text-3xl font-semibold mb-4">Create Polls</h2>
+          <p className="text-gray-400">
+            Create custom polls on any topic and share them with others. Add options, set
+            permissions, and see the responses roll in real-time.
+          </p>
+        </div>
+        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
+          <h2 className="text-3xl font-semibold mb-4">Vote & Participate</h2>
+          <p className="text-gray-400">
+            Browse a variety of public polls or join private ones shared with you. Cast your vote
+            and see the real-time results as others participate.
+          </p>
+        </div>
+        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
+          <h2 className="text-3xl font-semibold mb-4">Bookmark & Track</h2>
+          <p className="text-gray-400">
+            Bookmark polls to save them for later, view your past participation, and stay updated
+            on topics you care about.
+          </p>
+        </div>
+      </div>
+      <button
+        className="btn btn-primary px-6 py-3 font-semibold text-lg"
+        onClick={() => navigate("/login")}
+      >
+        Get Started
+      </button>
    </div>
  )
 }
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -1,5 +1,6 @@
 // LoginPage.js
 import React from 'react';
+import { Link } from 'react-router-dom';

 const LoginPage = () => {
  return (
@@ -56,7 +57,7 @@ const LoginPage = () => {
        {/* Sign Up Link */}
        <p className="text-center text-gray-300">
          Don’t have an account?{' '}
-          <a href="#" className="text-primary hover:underline">Sign up</a>
+          <Link to="/register" href="#" className="text-primary hover:underline">Sign up</Link>
        </p>
      </div>
    </div>
--- a/frontend/src/pages/Register.jsx
+++ b/frontend/src/pages/Register.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";

 function Register() {
  return (
@@ -63,9 +64,9 @@ function Register() {
        {/* Login Link */}
        <p className="text-center text-gray-300">
          Already have an account?{" "}
-          <a href="#" className="text-primary hover:underline">
+          <Link to="/login" className="text-primary hover:underline">
            Login
-          </a>
+          </Link>
        </p>
      </div>
    </div>
--- a/frontend/src/pages/VotingPage.jsx
+++ b/frontend/src/pages/VotingPage.jsx
@@ -0,0 +1,72 @@
+// VotingPage.js
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import { Chart as ChartJS, BarElement, CategoryScale, LinearScale } from "chart.js";
+
+ChartJS.register(BarElement, CategoryScale, LinearScale);
+
+function VotingPage() {
+  // Dummy poll data
+  const pollData = {
+    title: "What's your favorite programming language?",
+    options: [
+      { id: 1, label: "JavaScript", votes: 20 },
+      { id: 2, label: "Python", votes: 35 },
+      { id: 3, label: "Java", votes: 25 },
+      { id: 4, label: "C++", votes: 15 },
+    ],
+    creator: {
+      name: "John Doe",
+      image: "https://via.placeholder.com/100",
+    },
+  };
+
+  // Dummy chart data for visualization
+  const chartData = {
+    labels: pollData.options.map(option => option.label),
+    datasets: [
+      {
+        label: "Votes",
+        data: pollData.options.map(option => option.votes),
+        backgroundColor: ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  return (
+    <div className="bg-base-200 min-h-screen p-6 text-white flex flex-col items-center">
+      {/* Poll Creator Info */}
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <img
+          src={pollData.creator.image}
+          alt={pollData.creator.name}
+          className="rounded-full h-7 md:h-10 w-7 md:w-10"
+        />
+        <h2 className="text-lg md:text-xl font-semibold">{pollData.creator.name}</h2>
+      </div>
+
+      {/* Poll Title */}
+      <h1 className="text-xl md:text-3xl font-bold mb-4 text-center">{pollData.title}</h1>
+
+      {/* Voting Options */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-lg mb-6">
+        {pollData.options.map(option => (
+          <div
+            key={option.id}
+            className="md:p-4 p-2 bg-base-100 rounded-lg shadow-md flex items-center justify-center cursor-pointer hover:bg-base-300 transition"
+          >
+            <span className="text-lg">{option.label}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Chart Visualization */}
+      <div className="w-full max-w-lg">
+        <Bar data={chartData} options={{ responsive: true, maintainAspectRatio: false }} />
+      </div>
+    </div>
+  );
+}
+
+export default VotingPage;