Finalized project structure

App.jsx

@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from "react";
+import mockProfiles from "./mockData";
+import {
+  Home,
+  Search,
+  MessageCircle,
+  UserCircle,
+  Heart,
+  X,
+} from "lucide-react";
+import Login from "./components/Login";
+
+function App() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [matches, setMatches] = useState([]);
+  const [showContactDialog, setShowContactDialog] = useState(false);
+  const [userPreferences, setUserPreferences] = useState(() => {
+    const saved = localStorage.getItem("userPreferences");
+    return saved ? JSON.parse(saved) : null;
+  });
+
+  const [sortedProfiles, setSortedProfiles] = useState([]);
+
+  useEffect(() => {
+    if (userPreferences) {
+      localStorage.setItem("userPreferences", JSON.stringify(userPreferences));
+      fetchCompatibility(userPreferences, mockProfiles);
+    }
+  }, [userPreferences]);
+
+const fetchCompatibility = async (userProfile, candidates) => {
+  try {
+    const response = await fetch("http://127.0.0.1:8000/compute_compatibility", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        user_profile: userProfile,
+        candidate_profiles: candidates.map((p) => p.profile),
+      }),
+    });
+
+    const data = await response.json();
+    console.log("API Response:", data); 
+
+    if (data.all_matches) {
+      const mergedProfiles = candidates.map((profile) => {
+        const match = data.all_matches.find((m) => m.profile === profile.profile.name);
+
+        return {
+          profile: {
+            name: profile.profile.name,
+            age: profile.profile.age || "N/A",
+            occupation: profile.profile.occupation || "Unknown",
+            imageUrl: profile.profile.imageUrl || "/default.jpg",
+            bio: profile.profile.bio || "No bio available.",
+            budget: profile.profile.budget || "N/A", 
+          },
+          compatibility: match ? match.compatibility : 0,
+          matchReasons: match ? match.matchReasons : [],
+        };
+      });
+
+      console.log("Merged Profiles:", mergedProfiles);
+
+      setSortedProfiles(mergedProfiles.sort((a, b) => b.compatibility - a.compatibility));
+    }
+  } catch (error) {
+    console.error("Error fetching compatibility:", error);
+    setSortedProfiles(mockProfiles); 
+  }
+};
+
+const handleLogout = () => {
+  setUserPreferences(null);
+  localStorage.removeItem("userPreferences"); 
+  setSortedProfiles([]); 
+  setMatches([]); 
+  setCurrentIndex(0); 
+};
+
+
+
+  const currentMatch = sortedProfiles[currentIndex];
+
+  const handleLike = () => {
+    setShowContactDialog(true);
+  };
+
+  const handleConfirmContact = () => {
+    setMatches([...matches, currentMatch.profile.id]);
+    setShowContactDialog(false);
+    handleNext();
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => prevIndex + 1);
+  };
+
+  if (!userPreferences?.isLoggedIn) {
+    return <Login setUserPreferences={setUserPreferences} />;
+  }
+
+  if (!currentMatch || currentIndex >= sortedProfiles.length) {
+    return (
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <div className="bg-white p-8 rounded-xl shadow-lg text-center">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">
+            No More Profiles
+          </h2>
+          <p className="text-gray-600">You've viewed all available matches!</p>
+          {matches.length > 0 && (
+            <div className="mt-4">
+              <p className="text-green-600 font-semibold">
+                You matched with {matches.length} potential roommates!
+              </p>
+            </div>
+          )}
+          <button
+            onClick={handleLogout}
+            className="mt-6 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex space-x-8">
+              <Home className="w-6 h-6 text-green-600" />
+              <Search className="w-6 h-6 text-gray-400" />
+              <MessageCircle className="w-6 h-6 text-gray-400" />
+              <UserCircle className="w-6 h-6 text-gray-400" />
+            </div>
+            <div className="text-green-600 font-semibold">RoomieMatch AI</div>
+            <button
+              onClick={handleLogout}
+              className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-5xl mx-auto px-4 py-8">
+        <div className="flex flex-col items-center">
+          <div className="bg-white rounded-xl shadow-lg overflow-hidden max-w-md w-full">
+            {currentMatch?.profile ? (
+              <>
+                <div className="relative h-96">
+                  <img
+                    src={currentMatch.profile.imageUrl || "/default.jpg"} // Fallback Image
+                    alt={currentMatch.profile.name || "Profile"}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
+                    <div className="flex justify-between items-center">
+                      <h2 className="text-2xl font-bold text-white">
+                        {currentMatch.profile.name || "Unknown"}, {currentMatch.profile.age || "N/A"}
+                      </h2>
+                    <div className="bg-green-500 rounded-full px-3 py-1">
+                      <span className="text-white font-semibold">
+                        {currentMatch.compatibility || 0}% Match
+                      </span>
+                    </div>
+                    </div>
+                    <p className="text-white/90">{currentMatch.profile.occupation || "No Occupation Info"}</p>
+                  </div>
+                </div>
+
+                <div className="p-6">
+                  <div className="mb-4">
+                    <h3 className="font-semibold text-gray-700 mb-2">About</h3>
+                    <p className="text-gray-600">
+                      {currentMatch.profile.bio || "No bio available."}
+                    </p>
+                  </div>
+
+                  <div className="mb-4">
+                    <h3 className="font-semibold text-gray-700 mb-2">
+                      Match Reasons
+                    </h3>
+                    <ul className="list-disc list-inside text-sm text-gray-600">
+                      {currentMatch.matchReasons?.length > 0 ? (
+                        currentMatch.matchReasons.map((reason, index) => (
+                          <li key={index}>{reason}</li>
+                        ))
+                      ) : (
+                        <li>No specific reasons provided.</li>
+                      )}
+                    </ul>
+                  </div>
+                 
+                  <div className="mb-6">
+                  <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                    Budget
+                  </h3>
+                  <p className="text-sm text-gray-600">
+                    {currentMatch?.profile?.budget ? `$${currentMatch.profile.budget} per month` : "N/A"}
+                  </p>
+                </div>
+
+                  <div className="flex justify-center gap-4 mt-6">
+                    <button
+                      onClick={handleNext}
+                      className="p-4 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
+                    >
+                      <X className="w-6 h-6 text-gray-600" />
+                    </button>
+                    <button
+                      onClick={handleLike}
+                      className="p-4 rounded-full bg-green-100 hover:bg-green-200 transition-colors"
+                    >
+                      <Heart className="w-6 h-6 text-green-600" />
+                    </button>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="w-full h-96 flex items-center justify-center bg-gray-200">
+                <span className="text-gray-500">No Profile Found</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {showContactDialog && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-lg p-6 max-w-sm w-full">
+            <h3 className="text-xl font-bold text-gray-900 mb-4">
+              Contact {currentMatch?.profile?.name}?
+            </h3>
+            <p className="text-gray-600 mb-6">
+              Would you like to initiate contact with{" "}
+              {currentMatch?.profile?.name}?
+            </p>
+            <div className="flex justify-end gap-4">
+              <button
+                onClick={() => setShowContactDialog(false)}
+                className="px-4 py-2 text-gray-600 hover:text-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleConfirmContact}
+                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+              >
+                Confirm Contact
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;