adding prerequise tree (#33)

* sidebar component add

* tailwind workin, beggining page building

* structure

* fixed app

* Main design layout

* initial sidebar

* courseView init

* the course page initial tests

* Make it run on my comuter

* Tree without database integration

* fixes

* npm update

* add to page

---------

Co-authored-by: kexana <deotsts@gmail.com>
Co-authored-by: Sami Al Saati <sami.alsaati@hotmail.com>
Co-authored-by: Kacper Lisik <lisik@kth.se>

Author: 4 people

my-app/package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.17",
+    "autoprefixer": "^10.4.21",
     "firebase": "^11.5.0",
     "ldrs": "^1.1.6",
     "mobx": "^6.13.7",
@@ -19,6 +20,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.4.0",
+    "reactflow": "^11.11.4",
     "tailwindcss": "^4.0.17"
   },
   "devDependencies": {

my-app/package.json

@@ -77,4 +77,4 @@ export const model = {
         );
         this.setCurrentSearch(searchResults);
     }
-};
+};

my-app/src/model.js

@@ -27,4 +27,4 @@ function App() {
 	);
 }
 
-export default App;
+export default App;

my-app/src/pages/App.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function PrerequisiteTree(props) {
+    return (
+        <div class ="flex ">
+
+        </div>
+    );
+}
+
+export default PrerequisiteTree;

my-app/src/views/Components/PrerequisiteTreeComponents/BoxTest.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PrerequisiteTree from "./PrerequisiteTree.jsx";
 // import {model} from '/src/model.js';
 
 export default function CourseView({ course }) {
@@ -48,6 +49,12 @@ export default function CourseView({ course }) {
                 <p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
             </div>
 
+            {/* Prerequisite Graph Tree Section */}
+            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
+                <h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
+                {/* Placeholder for graph tree */}
+                <PrerequisiteTree />
+            </div>
         </div>
     );
 }

my-app/src/views/CourseView.jsx

@@ -98,4 +98,4 @@ function ListView(props) {
     );
 }
 
-export default ListView;
+export default ListView;