feat(profile): add profile page with clickable posts with basic info #7

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 client/node_modules/
 server/node_modules/
+*.stationenv/
+*.env
+.DS_Store

client/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5000

client/src/App.jsx

@@ -4,18 +4,20 @@ import Home from './pages/Home';
 import Courses from './pages/Courses';
 import Quiz from './pages/Quiz';
 import Navbar from './components/Navbar';
+import Profile from './pages/Profile';
 
 function App() {
    return (
-    <>
-      <Navbar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/courses" element={<Courses />} />
-        <Route path="/" element={<Quiz />} />
-      </Routes>
-    </>
-  );
+     <>
+       <Navbar />
+       <Routes>
+         <Route path="/" element={<Home />} />
+         <Route path="/courses" element={<Courses />} />
+         <Route path="/quiz" element={<Quiz />} />
+         <Route path="/profile/:username" element={<Profile />} />
+       </Routes>
+     </>
+   );
 }
 
 export default App;

client/src/index.css

@@ -5,9 +5,27 @@
   border: 2px solid red;
 }
 
+.red-underline {
+  text-decoration: underline;
+  text-decoration-color: red;
+}
+
+.post-card {
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  background-color: white; /* default */
+}
+
+.post-card:hover {
+  background-color: rgba(245, 245, 245, 0.7);
+}
+
 body {
   margin: 0;
   font-family: Arial, sans-serif;
 
 }
-
+

client/src/pages/Profile.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+// import {  useParams } from "react-router-dom";
+
+function Profile() {
+  const { username } = useParams();
+  const [user, setUser] = useState(null);
+  const API_URL = import.meta.env.VITE_API_URL;
+
+  useEffect(() => {
+    fetch(`${API_URL}/api/users/${username}`)
+      .then((res) => res.json())
+      .then((data) => {
+        console.log("Fetched user:", data);
+        setUser(data);
+      })
+      .catch((err) => console.error("Error fetching user:", err));
+  }, [username]);
+
+  if (!user) return <div>Loading...</div>;
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1 className="red-underline">{user.username}s Profile </h1>
+      <p>Number of posts: {user.post_count}</p>
+      <h2>Posts</h2>
+      {user.posts.length === 0 ? (
+        <p>No posts yet</p>
+      ) : (
+        user.posts.map((post) => (
+          <Link
+            key={post.id}
+            to={`/profile/${user.username}`}
+            style={{ textDecoration: "none", color: "inherit" }}
+          >
+            <div className="post-card">
+              <h3>{post.title}</h3>
+              <p>{post.content}</p>
+            </div>
+          </Link>
+        ))
+      )}
+    </div>
+  );
+}
+
+export default Profile;

server/app.py

@@ -58,6 +58,21 @@ def create_post():
     posts[post_id] = post
     return jsonify(post), 201
 
+@app.route('/api/users/<string:username>', methods=['GET'])
+def get_user_profile(username):
+    if username not in users:
+        return jsonify({'error':'User not found'}), 404
+    user_posts = [
+        post for post in posts.values()
+        if post['author'] == username
+    ]
+
+    return jsonify({
+        'username': username,
+        'posts': user_posts,
+        'post_count': len(user_posts)
+    })
+
 if __name__ == '__main__':
     import os
     port = int(os.environ.get('PORT', 5000))