Bar2

dist/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="favicon.ico" />
+    <base href="/" />
     <title>Capstone 1</title>
     <script defer src="main.js"></script>
   </head>

package.json

@@ -19,8 +19,10 @@
     "@babel/preset-react": "^7.27.1",
     "axios": "^1.10.0",
     "babel-loader": "^10.0.0",
+    "chart.js": "^4.5.0",
     "dotenv": "^17.1.0",
     "react": "^19.1.0",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.3",
     "webpack": "^5.99.9",

src/App.jsx

@@ -1,38 +1,66 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, use } from "react";
 import { createRoot } from "react-dom/client";
 import axios from "axios";
 import "./AppStyles.css";
 import NavBar from "./components/NavBar";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { API_URL } from "./shared";
+import { useNavigate } from "react-router-dom";
+
 import Login from "./components/Login";
 import Signup from "./components/Signup";
 import Home from "./components/Home";
 import NotFound from "./components/NotFound";
-import { API_URL } from "./shared";
+import FriendsPage from "./components/FriendsPage";
+import Friends from "./components/Friends";
+import Profile from "./components/Profile";
+import NewPoll from "./components/NewPoll";
+import PollList from "./components/PollList";
+import UsersPage from "./components/UsersPage";
+import UserCard from "./components/UserCard";
+import DraftPoll from "./components/DraftPoll";
+import PollDetails from "./components/PollDetails";
+import AboutUs from "./components/AboutUs";
 
+//Alex branch
 const App = () => {
   const [user, setUser] = useState(null);
+  const [polls, setPolls] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchPolls = async () => {
+    try {
+      const response = await axios.get(`${API_URL}/api/polls`);
+      setPolls(response.data);
+    } catch {
+      console.log("failed to get polls");
+      setPolls([]);
+    }
+  };
 
   const checkAuth = async () => {
     try {
       const response = await axios.get(`${API_URL}/auth/me`, {
         withCredentials: true,
       });
-      setUser(response.data.user);
-    } catch {
-      console.log("Not authenticated");
+      setUser(response.data);
+    } catch (error) {
+      console.error("Auth check failed:", error);
       setUser(null);
+    } finally {
+      setLoading(false);
     }
   };
 
-  // Check authentication status on app load
   useEffect(() => {
     checkAuth();
+    fetchPolls();
   }, []);
 
+  const navigate = useNavigate();
+
   const handleLogout = async () => {
     try {
-      // Logout from our backend
       await axios.post(
         `${API_URL}/auth/logout`,
         {},
@@ -46,14 +74,32 @@ const App = () => {
     }
   };
 
+  console.log(user);
+
   return (
     <div>
       <NavBar user={user} onLogout={handleLogout} />
       <div className="app">
         <Routes>
           <Route path="/login" element={<Login setUser={setUser} />} />
           <Route path="/signup" element={<Signup setUser={setUser} />} />
+          <Route path="/friends-page" element={<FriendsPage />} />
           <Route exact path="/" element={<Home />} />
+          <Route exact path="/friends" element={<Friends />} />
+          <Route exact path="new-poll" element={<NewPoll user={user} />} />
+          <Route exact path="/users" element={<UsersPage />} />
+          <Route path="/users/:id" element={<UserCard />} />
+          <Route path="/edit-draft" element={<DraftPoll user={user} />} />
+          <Route path="/edit-draft/:id" element={<DraftPoll user={user} />} />
+          <Route path="/AboutUs" element={<AboutUs />} />
+
+          <Route
+            exact
+            path="/me"
+            element={<Profile user={user} authLoading={loading} />}
+          />
+          <Route exact path="poll-list" element={<PollList polls={polls} />} />
+          <Route path="/polls/:id" element={<PollDetails user={user} />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </div>

src/components/AboutUs.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import "./CSS/AboutUs.css";
+
+const AboutUs = () => {
+  return (
+    <div className="about-container">
+      <section>
+        <h1>About Us</h1>
+        <p className="styled-paragraph">
+          This platform was built with a simple goal: to make decision-making
+          fair, fast, and accessible to everyone.
+        </p>
+        <p className="styled-paragraph">
+          Whether you're planning a night out, organizing an event, or just
+          settling a debate, our ranked-choice poll system ensures the results
+          reflect the group's true consensus.
+        </p>
+      </section>
+
+      <section>
+        <h2>Why Ranked-Choice?</h2>
+        <p className="styled-paragraph">
+          Traditional polls can be skewed by vote splitting or tactical voting.
+          With ranked-choice, every vote counts more fairly. Voters rank the
+          options in order of preference, and a winner is chosen through a
+          series of instant-runoff rounds.
+        </p>
+        <p className="styled-paragraph">
+          This method leads to more satisfying outcomes because it rewards broad
+          support, not just a passionate minority.
+        </p>
+      </section>
+    </div>
+  );
+};
+
+export default AboutUs;

src/components/CSS/AboutUs.CSS

@@ -0,0 +1,44 @@
+/* AboutUs.css */
+
+.about-container {
+  padding: 60px 20px;
+  max-width: 1000px;
+  margin: 0 auto;
+  color: #e2e8f0;
+  background-color: #0f111a;
+  font-family: "Segoe UI", Roboto, sans-serif;
+}
+
+.about-container h1,
+.about-container h2 {
+  color: #ffffff;
+  margin-bottom: 20px;
+}
+
+.about-container p {
+  color: #cbd5e1;
+  font-size: 17px;
+  line-height: 1.7;
+  margin-bottom: 24px;
+  max-width: 800px;
+}
+
+.about-container ul {
+  list-style-type: disc;
+  padding-left: 20px;
+  margin-bottom: 40px;
+}
+
+.about-container li {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.about-container a {
+  color: #818cf8;
+  text-decoration: underline;
+}
+
+.about-container a:hover {
+  color: #6366f1;
+}

src/components/CSS/Dropdown.css

@@ -0,0 +1,37 @@
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-toggle {
+    padding: 8px 14px;
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    width: 100%;
+    white-space: nowrap;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    list-style: none;
+    padding: 0;
+    margin: 4px 0 0 0;
+    min-width: 100%;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background-color: #ffffff;
+}
+
+.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-item {
+    white-space: nowrap;
+}