feat: individual project pages (#16)

* feat: luis-frontend

* feat: routing for project cards

* fix: wrong routing

* feat: luis-frontend

* feat: luis-frontend

* feat. changes to individual project page

* chore: react tabs

* feat: axios for individual projects

---------

Co-authored-by: Larry La <[email protected]>

Author: luisd101

.DS_Store

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.6 on 2025-03-12 07:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='project',
+            name='images',
+            field=models.JSONField(default=list),
+        ),
+    ]

backend/bitmatch/projects/migrations/0002_project_images.py

@@ -12,6 +12,7 @@ class Project(models.Model):
     likes = models.IntegerField(default=0)
     positions = models.JSONField(default=list)  
     image_url = models.URLField(blank=True, null=True)
+    images = models.JSONField(default=list)
 
     def __str__(self):
         return self.title

backend/bitmatch/projects/models.py

@@ -1,38 +1,39 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
+      "react/jsx-no-target-blank": "off",
+      "no-unused-vars": "warn",
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-]
+];

frontend/.DS_Store

@@ -19,6 +19,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.2.0",
+    "react-tabs": "^6.1.0",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7"
   },

frontend/bitmatch/eslint.config.js

@@ -8,7 +8,8 @@ import {
 import { Button } from "./components/ui/button";
 import HomePage from "./views/HomePage";
 import ProjectListPage from "./views/ProjectListPage";
-import './styles/global.css';
+import ProjectDetailPage from "./views/IndividualProjectPage";
+import "./styles/global.css";
 
 export default function App() {
   return (
@@ -31,7 +32,9 @@ export default function App() {
           <header className="w-full bg-white shadow-md p-4 fixed top-0 left-0 z-50">
             <div className="max-w-[1485px] mx-auto flex justify-between items-center">
               <a href="/">
-                <h2 className="font-sans text-xl font-black text-gray-800">BITMATCH</h2>
+                <h2 className="font-sans text-xl font-black text-gray-800">
+                  BITMATCH
+                </h2>
               </a>
               <UserButton />
             </div>
@@ -43,6 +46,9 @@ export default function App() {
 
             {/* Project List Page */}
             <Route path="/project-list" element={<ProjectListPage />} />
+
+            {/* Individual List Page */}
+            <Route path="/projects/:id" element={<ProjectDetailPage />} />
           </Routes>
         </SignedIn>
       </div>

frontend/bitmatch/package-lock.json

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+
+
+const Modal = ({ isOpen, onClose, children }) => {
+    if (!isOpen) return null;
+  
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+        <div className="bg-white p-6 rounded-2xl shadow-lg w-96">
+          <button className="absolute top-2 right-2 text-gray-600" onClick={onClose}>
+            ✕
+          </button>
+          <div>{children}</div>
+        </div>
+      </div>
+    );
+  };
+  
+  export default Modal;
+