# Project export: Mind Space

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 11.0
- Tagline: Mind Space is a web app that polls students responses anonymously to questions that gauge their energy levels. Gemini then analyzes the polling data and creates an optimal approach to lesson planning.
- Devpost: https://devpost.com/software/mind-space-2swdr6
- GitHub: https://github.com/Madesh3/MindSpace
- Team: 1 GitHub contributor(s) — Madesh (2 commits)

## Devpost submission (written by the team)

### Inspiration

More than 4 in 10 (42%) students face mental health challenges, and we've all had days when stress makes school even tougher. This platform empowers teachers with real-time insights into students' well-being and provides AI-driven suggestions to adjust lessons and workloads, creating a more supportive and successful classroom environment.

### What it does

MindSpace is a Mental Health Platform for School Students (K-12), designed to help teachers understand their students' emotional and mental well-being through real-time polls. It provides AI-generated suggestions (via the Gemini API) on how to structure lessons and manage workloads based on students' moods and feelings.

### How we built it

We built this platform using a combination of Firebase for real-time data storage, Gemini AI to generate personalized suggestions for teachers, and HTML, CSS, and JavaScript for the front-end interface. The platform collects and analyzes students' emotional data through simple polls and uses AI to recommend how teachers can adapt their lessons and workloads to best support their students' mental well-being.

### Challenges we ran into

One of the biggest challenges we faced was integrating Firebase for real-time data collection and ensuring seamless storage and retrieval of students' poll responses. Managing the dynamic data flow while keeping the interface responsive was crucial. Another challenge was integrating the Gemini API to generate personalized suggestions for teachers. Ensuring the API could process real-time emotional data from students and return meaningful, actionable feedback required precise coordination between our back-end and front-end systems. On top of that, we struggled with Wi-Fi issues at Cal Hacks, constantly having to move around to find the best spot to work. Despite these obstacles, we balanced the technical challenges while maintaining an easy-to-use interface, making the process rewarding.

### Accomplishments we're proud of

We’re incredibly proud of building this web app in just 48 hours with a team of only two. Over the course of the hackathon, we developed an 11-page platform that integrates Firebase for real-time data and the Gemini API for AI-driven suggestions. Despite the tight deadline and small team size, we successfully created a fully functional app that empowers teachers to better support their students' mental well-being.

### What we learned

Throughout this project, we learned the importance of managing time and tasks effectively, especially when working with a tight deadline. We deepened our understanding of Firebase for real-time data handling and gained valuable experience integrating third-party APIs like Gemini into a dynamic web app.

### What's next

Next for MindSpace, we're developing a mobile app for greater accessibility and adding a mental health resource hub to support students. We plan to expand the platform beyond schools to universities and even workplaces, increasing its impact on well-being across different environments.

## README (from the GitHub repository)

# MindSpace
<img width="1792" alt="Firstpage" src="https://github.com/user-attachments/assets/cc5177ef-013d-45b3-b2fa-d8fe007bee75">
<img width="1792" alt="Stdlogin" src="https://github.com/user-attachments/assets/4733be76-fb34-44d4-9d75-d43ce5182644">
<img width="1792" alt="SQ1" src="https://github.com/user-attachments/assets/154c4c9e-5520-4aa2-baf7-451b2378d396">
<img width="1792" alt="SQ2" src="https://github.com/user-attachments/assets/881bf8e1-da1d-491d-9422-5dd259b88e99">
<img width="1792" alt="SQ3" src="https://github.com/user-attachments/assets/54905345-3c5e-4bf6-b007-5695132a14b6">
<img width="1792" alt="Thankyou" src="https://github.com/user-attachments/assets/a23819f8-1406-4a6f-ab8f-78694314ec9f">
<img width="1792" alt="Teacherlogin" src="https://github.com/user-attachments/assets/d71a91a2-a78b-43c2-a276-684398aa6b35">
<img width="1792" alt="TeacherDB1" src="https://github.com/user-attachments/assets/5a3010cb-269b-4547-be54-71b7164fe529">
<img width="1792" alt="TeacheerDB2" src="https://github.com/user-attachments/assets/92fe374f-6675-425d-a175-15a673909097">
<img width="1792" alt="TeacherDB3" src="https://github.com/user-attachments/assets/34e6d8b1-3694-4f3b-b4b2-8d988ec058ba">
<img width="1792" alt="geminiAi" src="https://github.com/user-attachments/assets/af9fbd0b-70e4-4062-a3ef-305092fe8c0a">

# Inspiration

More than 4 in 10 (42%) students face mental health challenges, and we've all had days when stress makes school even tougher. This platform empowers teachers with real-time insights into students' well-being and provides AI-driven suggestions to adjust lessons and workloads, creating a more supportive and successful classroom environment.

# What it does

MindSpace is a Mental Health Platform for School Students (K-12), designed to help teachers understand their students' emotional and mental well-being through real-time polls. It provides AI-generated suggestions (via the Gemini API) on how to structure lessons and manage workloads based on students' moods and feelings.

# How we built it

We built this platform using a combination of Firebase for real-time data storage, Gemini AI to generate personalized suggestions for teachers, and HTML, CSS, and JavaScript for the front-end interface. The platform collects and analyzes students' emotional data through simple polls and uses AI to recommend how teachers can adapt their lessons and workloads to best support their students' mental well-being.

# Challenges we ran into

One of the biggest challenges we faced was integrating Firebase for real-time data collection and ensuring seamless storage and retrieval of students' poll responses. Managing the dynamic data flow while keeping the interface responsive was crucial. Another challenge was integrating the Gemini API to generate personalized suggestions for teachers. Ensuring the API could process real-time emotional data from students and return meaningful, actionable feedback required precise coordination between our back-end and front-end systems. On top of that, we struggled with Wi-Fi issues at Cal Hacks, constantly having to move around to find the best spot to work. Despite these obstacles, we balanced the technical challenges while maintaining an easy-to-use interface, making the process rewarding.

# Accomplishments that we're proud of

We’re incredibly proud of building this web app in just 48 hours with a team of only two. Over the course of the hackathon, we developed an 11-page platform that integrates Firebase for real-time data and the Gemini API for AI-driven suggestions. Despite the tight deadline and small team size, we successfully created a fully functional app that empowers teachers to better support their students' mental well-being.

# What we learned

Throughout this project, we learned the importance of managing time and tasks effectively, especially when working with a tight deadline. We deepened our understanding of Firebase for real-time data handling and gained valuable experience integrating third-party APIs like Gemini into a dynamic web app.

# What's next for Mind Space

Next for MindSpace, we're developing a mobile app for greater accessibility and adding a mental health resource hub to support students. We plan to expand the platform beyond schools to universities and even workplaces, increasing its impact on well-being across different environments. We also plan to optimize our application. The files are currently organized to simply work. We want to work on authentication protocols, api secruities and introducing colours that will not dictate/have an effect while aswering the questions.  



## Detected evidence (automated analysis)

Indexed codebase: 16 recognized source files, 47 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Firebase (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (17 of 17)

```
firebase.js
firstquestion.html
index.css
index.html
LICENSE
login_student.html
login_teacher.css
login_teacher.html
README.md
secondquestion.html
styles.css
teacher_dashboard1.html
teacher_mood_dashboard.html
teacher_sleep_dashboard.html
teacher_suggestion_dashboard.html
thankyou.html
thirdquestion.html
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- Update README.md
- Update README.md
- Add files via upload
- Initial commit

## Key source files (fetched from GitHub, selected and truncated for size)

### index.css

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    padding: 50px;
}

h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

h1 .logo-icon {
    font-size: 36px;
}

p {
    font-size: 16px;
    color: #333;
    margin-bottom: 30px;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.buttons .btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.buttons .btn:hover {
    opacity: 0.9;
}

```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mind Space - Main</title>
    <link rel="stylesheet" href="index.css"> <!-- Linking the CSS file for the main landing page -->
    <script type="module" src="firebase.js"></script>
</head>
<body>

    <div class="container">
        <h1>Mind <span class="logo-icon">
            <img src="assets/logo_main.png" alt="Mind Space Logo" style="width: 50px; height: 50px;">
        </span> Space</h1>
        <p>Empowering Classrooms,<br>One Mind at a Time</p>
        <div class="buttons">
            <button class="btn" onclick="window.location.href='login_student.html'">Student</button>
            <button class="btn" onclick="window.location.href='login_teacher.html'">Teacher</button>
        </div>
    </div>

</body>
</html>

```

### firebase.js

```javascript
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-analytics.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-database.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyBo3B71BGTiJHUejy87gyCJd-lz7u8-mKI",
  authDomain: "mind-ca2e7.firebaseapp.com",
  databaseURL: "https://mind-ca2e7-default-rtdb.firebaseio.com",
  projectId: "mind-ca2e7",
  storageBucket: "mind-ca2e7.appspot.com",
  messagingSenderId: "587207354354",
  appId: "1:587207354354:web:03a15f540600cdf6616d6b",
  measurementId: "G-BBHLNYCS4C"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

//Initialize the Realtime Database
const database = getDatabase(app);

```

### thankyou.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .thankyou-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 50px;
            font-size: 1.5rem;
        }

        .thankyou-message {
            text-align: center;
            font-size: 1.2rem;
        }
    </style>
    <script type="module" src="firebase.js"></script>
</head>
<body>
    <div class="thankyou-container">
        <div class="logo">
            <span>Mind</span>
            <img src="assets/logo_main_no_background.png" alt="Company Icon" class="icon">
            <span>Space</span>
        </div>
        <div class="thankyou-message">
            <p>Thank you.</p>
            <p>Wishing you a pleasant day :)</p>
        </div>
    </div>
</body>
</html>

```

### login_teacher.css

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: flex;
    width: 800px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.left {
    background: linear-gradient(135deg, #5e2bff, #9c2cff);
    color: white;
    flex: 1;
    padding: 50px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.left h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.left p {
    font-size: 16px;
    margin-bottom: 20px;
}

.right {
    background-color: #e3e3e3;
    padding: 50px;
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.form-group .icon {
    text-align: center;
    margin-bottom: 20px;
    font-size: 50px;
    color: #333;
}

.buttons {
    display: flex;
    justify-content: space-between;
}

.buttons button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.sign-in {
    background-color: black;
    color: white;
}

.sign-up {
    background-color: transparent;
    color: black;
    border: 1px solid black;
}

```

### styles.css

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px dashed #D3D3D3;
    position: relative;

    /* Fixed size for desktop */
    width: 640px;
    height: 440px; /* Adjusted height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Make the container responsive on smaller screens */
@media (max-width: 768px) {
    .container {
        width: 90%; /* Adjust to take up 90% of the screen width on mobile */
        height: auto; /* Make height adjust based on content */
    }
}

.header .icon {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto 20px auto;
}

.question {
    padding: 15px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 0; /* Remove margin below the question */
}

.question p:first-child {
    font-weight: bold;
    margin-bottom: 5px;
}

.question p:last-child {
    font-size: 1rem;
    color: #333;
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0; /* Remove margin above the buttons */
    flex-grow: 1;
    justify-content: space-between;
}

.buttons a {
    margin: 0; /* Remove any margin from the anchor elements */
}

.btn {
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: black;
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.motivated {
    background-color: #A8D5BA;
}

.tired {
    background-color: #A8C9E5;
}

.stressed {
    background-color: #E5A8A8;
}

.excited {
    background-color: #F2BC8D;
}

.btn:hover {
    opacity: 0.9;
}

```

### secondquestion.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sleep Quality</title>
    <link rel="stylesheet" href="styles.css">
    <script type="module" src="firebase.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="assets/logo_main_no_background.png" alt="Company Icon" class="icon">
        <div class="question">
            <p></p>
            <p>How well did you sleep last night? 😴</p>
        </div>
        <div class="buttons">
            <button class="btn motivated" data-emotion="rested Enough, and feeling rested ✨">Enough, and feeling rested. ✨</button>
            <button class="btn tired" data-emotion="sleepy Enough, but still sleepy">Enough, but still sleepy</button>
            <button class="btn stressed" data-emotion="weak Not enough, but sleep is for the weak">Not enough, but sleep is for the weak</button>
            <button class="btn excited" data-emotion="inside Not enough, feeling dead inside">Not enough, feeling dead inside</button>
        </div>
    </div>

    <script type="module">
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-database.js";

        // Initialize Firebase Realtime Database
        const database = getDatabase();

        // Handle button clicks
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function() {
                const sleepResponse = this.getAttribute('data-emotion');
                const studentID = localStorage.getItem('studentID'); // Retrieve the Student ID from localStorage

                // Store the response in Firebase under the specific studentID
                set(ref(database, `responses/${studentID}/how_sleep`), {
                    question: "How well did you sleep last night?",
                    answer: sleepResponse
                }).then(() => {
                    console.log('Sleep quality submitted:', sleepResponse);
                    // Redirect to the next question
                    window.location.href = 'thirdquestion.html'; // Navigate to the next question page
                }).catch((error) => {
                    console.error('Error submitting sleep quality:', error);
                });
            });
        });
    </script>
</body>
</html>

```

### firstquestion.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emotion Selection</title>
    <link rel="stylesheet" href="styles.css">
    <script type="module" src="firebase.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="assets/logo_main_no_background.png" alt="Company Icon" class="icon">
            <div class="question">
                <p id="greeting">Hi,</p>
                <p>How are you feeling today? 🤔</p>
            </div>
        <div class="buttons">
            <button class="btn motivated" data-emotion="Motivated 😊">Motivated 😊</button>
            <button class="btn tired" data-emotion="Tired 🥤">Tired 🥤</button>
            <button class="btn stressed" data-emotion="Stressed ❗">Stressed ❗</button>
            <button class="btn excited" data-emotion="Excited ✨">Excited ✨</button>
        </div>
    </div>

    <script type="module">
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-database.js";

        // Initialize Firebase Realtime Database
        const database = getDatabase();

        // Set the greeting to the student's number
        const studentID = localStorage.getItem('studentID');
        document.getElementById('greeting').textContent = `Hi Student No.${studentID},`;

        // Handle button clicks
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function() {
                const emotion = this.getAttribute('data-emotion');
                const studentID = localStorage.getItem('studentID'); // Retrieve the Student ID from localStorage

                // Store the response in Firebase under the specific studentID
                set(ref(database, `responses/${studentID}/how_feeling`), {
                    question: "How are you feeling today?",
                    answer: emotion
                }).then(() => {
                    console.log('Emotion submitted:', emotion);
                    // Redirect to the next question
                    window.location.href = 'secondquestion.html'; // Navigate to the next question page
                }).catch((error) => {
                    console.error('Error submitting emotion:', error);
                });
            });
        });
    </script>
</body>
</html>

```

### thirdquestion.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start</title>
    <link rel="stylesheet" href="styles.css">
    <script type="module" src="firebase.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="assets/logo_main_no_background.png" alt="Company Icon" class="icon">
        </div>
        <div class="question">
            <p></p>
            <p>How shall we start? 🌟</p>
        </div>
        <div class="buttons">
            <button class="btn motivated" data-emotion="Locked in, Let's go! 🚀">Locked in, Let's go! 🚀</button>
            <button class="btn tired" data-emotion="Nice and slow please. 🐢">Nice and slow please. 🐢</button>
            <button class="btn excited" data-emotion="I am not sure. 😕">I am not sure. 😕</button>
        </div>
    </div>

    <script type="module">
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-database.js";

        // Initialize Firebase Realtime Database
        const database = getDatabase();

        // Handle button clicks
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function() {
                const startResponse = this.getAttribute('data-emotion');
                const studentID = localStorage.getItem('studentID'); // Retrieve the Student ID from localStorage

                // Create a reference to the student's responses
                const studentRef = ref(database, `responses/${studentID}`);

                // Store the response in Firebase using a descriptive key
                set(ref(database, `responses/${studentID}/how_start`), {
                    question: "How shall we start?",
                    answer: startResponse
                }).then(() => {
                    // Set the completion timestamp
                    const completionTime = new Date().getTime(); // Current time in milliseconds
                    set(ref(database, `responses/${studentID}/completion_time`), completionTime);

                    console.log('Start response submitted:', startResponse);
                    // Redirect to the thank you page
                    window.location.href = 'thankyou.html'; // Navigate to the thank you page
                }).catch((error) => {
                    console.error('Error submitting start response:', error);
                });
            });
        });
    </script>
</body>
</html>

```

### login_teacher.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mind Space Teacher Login</title>
    <link rel="stylesheet" href="login_teacher.css"> <!-- Linking the renamed CSS file -->
    <script type="module" src="firebase.js"></script>
</head>
<body>

    <div class="container">
        <div class="left">
            <h1>Mind Space</h1>
            <p>Empowering Classrooms, One Mind at a Time</p>
        </div>
        <div class="right">
            <div class="form-group">
                <div class="icon">👤</div>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" placeholder="Enter your email">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password">
            </div>
            <div class="buttons">
                <button class="sign-in" id="signInBtn">Sign in</button>
                <button class="sign-up" id="signUpBtn">Sign up</button>
            </div>
        </div>
    </div>

    <script type="module">
    // Hardcoded teacher credentials
    const teachers = [
        { email: "calhacks@gmail.com", password: "password" },
        { email: "mindspace@gmail.com", password: "password" },
        { email: "teacher123@edu.com", password: "password" }
    ];

    // Function to handle the sign-in process
    function signIn() {
        const emailInput = document.getElementById('email').value;
        const passwordInput = document.getElementById('password').value;

        // Check the entered credentials against hardcoded values
        const teacher = teachers.find(teacher => 
            teacher.email === emailInput && teacher.password === passwordInput
        );

        if (teacher) {
            // Successful login
            console.log('Login successful for:', emailInput);
            window.location.href = 'teacher_dashboard1.html'; // Redirect to the teacher dashboard page
        } else {
            // Failed login
            alert('Invalid email or password. Please try again.');
        }
    }

    // Sign in button event listener
    document.getElementById('signInBtn').addEventListener('click', signIn);

    // Add event listener for pressing "Enter" key
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            signIn(); // Trigger sign-in when Enter is pressed
        }
    });
</script>
</body>
</html>

```

[5 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]