From ece2b33eb7042f90a8bb6ed43dfa9c45df8a52f0 Mon Sep 17 00:00:00 2001 From: Manik Maity Date: Thu, 7 Nov 2024 12:05:27 +0530 Subject: [PATCH] =?UTF-8?q?Addeed=20voting=20and=20home=20page=20=E2=9C=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 30 ++++++++++ frontend/package.json | 2 + frontend/src/App.jsx | 2 + frontend/src/components/Header/Header.jsx | 45 ++++---------- frontend/src/pages/Home.jsx | 38 +++++++++++- frontend/src/pages/LoginPage.jsx | 3 +- frontend/src/pages/Register.jsx | 5 +- frontend/src/pages/VotingPage.jsx | 72 +++++++++++++++++++++++ 8 files changed, 158 insertions(+), 39 deletions(-) create mode 100644 frontend/src/pages/VotingPage.jsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b65a66d..03f49d8 100644 --- 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", diff --git a/frontend/package.json b/frontend/package.json index 540326a..7e6c216 100644 --- 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" diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8ef8b54..d81d42a 100644 --- 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() { } /> } /> } /> + } /> ); diff --git a/frontend/src/components/Header/Header.jsx b/frontend/src/components/Header/Header.jsx index c0927bd..dcc4f3c 100644 --- 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 (
-
-
-
- - - - 8 -
-
-
-
- 8 Items - Subtotal: $999 -
- -
-
-
-
+
    +
  • Login
    • +
  • Bookmarks
    • +
+
+
@@ -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">
  • - + Profile New - +
    • -
  • Settings
  • Logout
    • diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 44d44c2..86dadac 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -2,8 +2,42 @@ import React from 'react' function Home() { return ( -
    - Home +
    +

    Welcome to LivePoll

    +

    + 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! +

    +
    +
    +

    Create Polls

    +

    + Create custom polls on any topic and share them with others. Add options, set + permissions, and see the responses roll in real-time. +

    +
    +
    +

    Vote & Participate

    +

    + 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. +

    +
    +
    +

    Bookmark & Track

    +

    + Bookmark polls to save them for later, view your past participation, and stay updated + on topics you care about. +

    +
    +
    +
    ) } diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx index 7625927..91b2ce2 100644 --- 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 */}

    Don’t have an account?{' '} - Sign up + Sign up

    diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx index 6a83395..7ff7e45 100644 --- 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 */}

    Already have an account?{" "} - + Login - +

    diff --git a/frontend/src/pages/VotingPage.jsx b/frontend/src/pages/VotingPage.jsx new file mode 100644 index 0000000..5ba1313 --- /dev/null +++ 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 ( +
    + {/* Poll Creator Info */} +
    + {pollData.creator.name} +

    {pollData.creator.name}

    +
    + + {/* Poll Title */} +

    {pollData.title}

    + + {/* Voting Options */} +
    + {pollData.options.map(option => ( +
    + {option.label} +
    + ))} +
    + + {/* Chart Visualization */} +
    + +
    +
    + ); +} + +export default VotingPage;