feat: axios connection (#22)

* chore: init axios

* feat: projects axios connection

* chore: temp cors

Author: larrylaa

backend/bitmatch/bitmatch/settings.py

@@ -66,12 +66,12 @@
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
-    "corsheaders.middleware.CorsMiddleware",
 ]
 
 ROOT_URLCONF = 'bitmatch.urls'
@@ -151,5 +151,11 @@
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-CORS_ALLOW_ALL_ORIGINS = True
-CORS_ALLOWS_CREDENTIALS = True
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:5173",  # Vite development server URL
+    "http://localhost:5174",
+    "http://localhost:5175",
+    "http://localhost:5176",
+]
+
+CORS_ALLOW_CREDENTIALS = True

frontend/bitmatch/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.24.0",
     "@radix-ui/react-slot": "^1.1.2",
+    "axios": "^1.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",

frontend/bitmatch/package.json

@@ -16,7 +16,9 @@ export default function ProjectCardLarge({ project, highlighted = false }) {
     : "border border-gray-200";
 
   return (
-    <div className={`flex flex-col h-full ${borderClass} rounded-lg overflow-hidden transition-all duration-300 hover:border-blue-500 hover:shadow-lg`}>
+    <div
+      className={`flex flex-col h-full ${borderClass} rounded-lg overflow-hidden transition-all duration-300 hover:border-blue-500 hover:shadow-lg`}
+    >
       {/* Header */}
       <div className="bg-gray-800 text-white p-2 flex justify-between">
         <span>{project.group}</span>
@@ -27,25 +29,33 @@ export default function ProjectCardLarge({ project, highlighted = false }) {
         {/* Match Percentage */}
         <div
           className={`absolute top-2 left-2 text-xs px-2 py-1 rounded font-bold ${
-            project.matchPercentage >= 90 ? "bg-green-700 text-white"
-            : project.matchPercentage >= 80 ? "bg-green-600 text-white"
-            : project.matchPercentage >= 70 ? "bg-yellow-600 text-white"
-            : project.matchPercentage >= 60 ? "bg-yellow-500 text-white"
-            : project.matchPercentage >= 50 ? "bg-yellow-400 text-white"
-            : project.matchPercentage >= 40 ? "bg-orange-600 text-white"
-            : project.matchPercentage >= 30 ? "bg-orange-500 text-white"
-            : project.matchPercentage >= 20 ? "bg-red-600 text-white"
-            : "bg-red-700 text-white"
+            project.match_percentage >= 90
+              ? "bg-green-700 text-white"
+              : project.match_percentage >= 80
+              ? "bg-green-600 text-white"
+              : project.match_percentage >= 70
+              ? "bg-yellow-600 text-white"
+              : project.match_percentage >= 60
+              ? "bg-yellow-500 text-white"
+              : project.match_percentage >= 50
+              ? "bg-yellow-400 text-white"
+              : project.match_percentage >= 40
+              ? "bg-orange-600 text-white"
+              : project.match_percentage >= 30
+              ? "bg-orange-500 text-white"
+              : project.match_percentage >= 20
+              ? "bg-red-600 text-white"
+              : "bg-red-700 text-white"
           }`}
         >
-          {project.matchPercentage}% Match
+          {project.match_percentage}% Match
         </div>
 
         {/* Image */}
         <div className="bg-gray-200 h-48 flex items-center justify-center text-gray-500 text-sm">
-          {project.imageUrl ? (
+          {project.image_url ? (
             <img
-              src={project.imageUrl}
+              src={project.image_url}
               alt={`${project.title} Cover`}
               className="w-full h-full object-cover"
             />
@@ -108,7 +118,7 @@ export default function ProjectCardLarge({ project, highlighted = false }) {
 ProjectCardLarge.propTypes = {
   project: PropTypes.shape({
     group: PropTypes.string.isRequired,
-    matchPercentage: PropTypes.number.isRequired,
+    match_percentage: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
     institution: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
@@ -119,7 +129,7 @@ ProjectCardLarge.propTypes = {
         title: PropTypes.string.isRequired,
       })
     ).isRequired,
-    imageUrl: PropTypes.string,
+    image_url: PropTypes.string,
   }).isRequired,
   highlighted: PropTypes.bool,
 };