Frank2

src/App.jsx

@@ -4,14 +4,34 @@ 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 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";
 
 const App = () => {
   const [user, setUser] = useState(null);
+  const [polls, setPolls] = useState(null);
+
+  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 {
@@ -25,14 +45,14 @@ const App = () => {
     }
   };
 
-  // Check authentication status on app load
+  // Check authentication status and fetch polls on app load
   useEffect(() => {
     checkAuth();
+    fetchPolls(); // Add this line to actually fetch polls
   }, []);
 
   const handleLogout = async () => {
     try {
-      // Logout from our backend
       await axios.post(
         `${API_URL}/auth/logout`,
         {},
@@ -53,14 +73,22 @@ const 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 exact path="/me" element={<Profile user={user} />} />
+          <Route exact path="poll-list" element={<PollList polls={polls}/>} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </div>
     </div>
   );
 };
 
+
 const Root = () => {
   return (
     <Router>
@@ -71,3 +99,5 @@ const Root = () => {
 
 const root = createRoot(document.getElementById("root"));
 root.render(<Root />);
+
+//

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;
+}

src/components/CSS/PollCardStyles.css

@@ -0,0 +1,96 @@
+.poll-card {
+  background: white;
+  border: 1px solid #e1e8ed;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.poll-card:hover {
+  border-color: #1da1f2;
+  box-shadow: 0 2px 8px rgba(29, 161, 242, 0.1);
+}
+
+.poll-card.poll-ended {
+  opacity: 0.7;
+  background: #f7f9fa;
+}
+
+.poll-header {
+  margin-bottom: 12px;
+}
+
+.poll-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #14171a;
+  margin: 0 0 8px 0;
+  line-height: 1.3;
+}
+
+.poll-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.poll-creator {
+  color: #657786;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.poll-time {
+  background: #1da1f2;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.poll-time.ended {
+  background: #657786;
+}
+
+.poll-status {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.status-badge {
+  background: #f45d22;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .poll-card {
+    padding: 12px;
+  }
+
+  .poll-title {
+    font-size: 16px;
+  }
+
+  .poll-meta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .poll-time {
+    align-self: flex-end;
+  }
+}

src/components/CSS/ProfileStyles.CSS

@@ -0,0 +1,133 @@
+.profile-page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.profile-header {
+  display: flex;
+  gap: 30px;
+  align-items: flex-start;
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+.profile-picture {
+  flex-shrink: 0;
+}
+
+.profile-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid #f0f0f0;
+}
+
+.profile-info {
+  flex: 1;
+}
+
+.display-name {
+  font-size: 2rem;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+  color: #333;
+}
+
+.username {
+  font-size: 1.1rem;
+  color: #666;
+  margin: 0 0 20px 0;
+}
+
+.stats {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 20px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.stat-count {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #333;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: #666;
+  margin-top: 2px;
+}
+
+.bio {
+  font-size: 1rem;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+
+.profile-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.follow-btn, .message-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.follow-btn {
+  background-color: #f0f0f0;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.follow-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.message-btn {
+  background-color: #f0f0f0;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.message-btn:hover {
+  background-color: #e0e0e0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .profile-img {
+    width: 120px;
+    height: 120px;
+  }
+
+  .display-name {
+    font-size: 1.8rem;
+  }
+
+  .stats {
+    justify-content: center;
+  }
+}