Added mindmap page

.env

@@ -0,0 +1 @@
+OPENAI_API_KEY="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"

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
+.env
 
 # testing
 /coverage

src/api/openAI/openAI-API.ts

@@ -0,0 +1,28 @@
+import { OpenAI } from "openai";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+console.log(process.env);
+
+const openAIClient = new OpenAI({
+    apiKey: "OPENAI_API_KEY",
+});
+
+const systemPrompt =
+    "You will be given a list of links. Each link contains JSON file. In each JSON file there a 'url' field that contains a class/course material from university. Your task is to return a one short sentence question about any of these materials.";
+
+export default async function getSubtask(files: string[]) {
+    const chatCompletion = await openAIClient.chat.completions.create({
+        model: "gpt-4o-mini",
+        messages: [
+            { role: "system", content: systemPrompt },
+            {
+                role: "user",
+                content: `${files.toString()}`,
+            },
+        ],
+    });
+
+    return chatCompletion.choices[0].message.content;
+}

src/app/mindmap/page.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import './App.css'; // Make sure to add styles here
+
+// Example of notes array (similar to the content in the image)
+const notes = [
+    "The average attention span is 8.25 s",
+    "E = mc^2",
+    "We are a team of dreamers!",
+    "Our names are Kaz, Tymur, Daniil, and Mark!",
+    "LET'S GO TECH",
+    "In my free time, I do poster design for my dorm room"
+];
+
+// Utility function to generate random sizes and positions
+const getRandomStyles = () => {
+    const randomWidth = Math.floor(Math.random() * (200 - 100 + 1)) + 100; // Width between 100 and 200px
+    const randomHeight = Math.floor(Math.random() * (150 - 80 + 1)) + 80; // Height between 80 and 150px
+    const randomX = Math.floor(Math.random() * 40); // Left margin (to simulate shifting)
+    const randomY = Math.floor(Math.random() * 20); // Top margin (for shifting vertically)
+    const randomBackground = getRandomColor(); // Assign a random background color
+
+    return {
+        width: `${randomWidth}px`,
+        height: `${randomHeight}px`,
+        marginLeft: `${randomX}px`,
+        marginTop: `${randomY}px`,
+        backgroundColor: randomBackground,
+        borderRadius: '20px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '1.1rem',
+        padding: '10px',
+        color: '#fff', // White text color
+        fontWeight: 'bold'
+    };
+};
+
+// Helper function to generate a random color from a predefined list
+const getRandomColor = () => {
+    const colors = ['#F7DC6F', '#E74C3C', '#48C9B0', '#85C1E9', '#F1948A', '#5DADE2'];
+    return colors[Math.floor(Math.random() * colors.length)];
+};
+
+export default function Landing() {
+    return (
+        <div className="mindmap-container">
+            <h1>Your personal mind space</h1>
+            <div className="notes-container">
+                {notes.map((note, index) => (
+                    <div key={index} style={getRandomStyles()}>
+                        {note}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}