# Project export: StudyBox

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: CruzHacks 2024
- Tagline: Empower your learning with StudyBox. Discover the perfect study method from our interactive toolbox.
- Devpost: https://devpost.com/software/studybox-wei526
- GitHub: https://github.com/ezsinehan/study-box
- Video: https://www.youtube.com/embed/sz15VPU2rmY?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 3 GitHub contributor(s) — sinehan (23 commits), Quinton Nguyen (14 commits), Solara Chum (6 commits)

## Devpost submission (written by the team)

### Inspiration

Although our team was acquainted with a couple of different types of study techniques, such as Pomodoro, which is widely popular, we wanted to access more study techniques as we hoped we could leverage different techniques to our advantage.

### What it does

We set out to build a tool with powerful study techniques compiled into a website. There is a total of 5 different tools, which are Feynman, Flashcards, Pomodoro, SecondBrain, and Binauralbeats. These five tools are found within the study box, which is an interactive cube that users can turn using buttons to access clickable faces, which allow you to use the technique in a minimal manner.

### How we built it

We built it on a react framework as our goal was to keep the website minimal and easy to use.

### Challenges we ran into

One of main challenges was the implementation of the open ai response within the Feynman technique study method.

### Accomplishments we're proud of

Creation of StudyBox: Successfully developing and launching a web app using React named StudyBox. Incorporating Multiple Study Methods: Including five different study techniques, such as the Pomodoro Technique and the Feynman Technique, to cater to diverse learning preferences. Collaboration with Friends: Working together with friends to bring the idea to life, demonstrating effective teamwork.

### What we learned

React Development: Gaining proficiency in React for web app development. Study Methodologies: Deepening understanding of various study techniques and their implementation. Collaborative Skills: Enhancing teamwork and communication skills through collaboration with friends on the project.

### What's next

User Feedback and Iteration: Collecting user feedback to understand how StudyBox is being used and making iterative improvements based on user suggestions. Additional Study Methods: Expanding the range of study methods available on StudyBox to provide users with even more options for effective learning. Enhanced Features: Adding features such as progress tracking, personalized study plans, and integration with other productivity tools to enhance the overall user experience. Mobile Compatibility: Developing a mobile version of StudyBox to make it accessible to users on various devices. Community Engagement: Building a community around StudyBox, encouraging users to share their study experiences and tips with each other.

## README (from the GitHub repository)

# Studybox
## Project Description
Welcome to the Studybox Website Repository!

## About Studybox: 

Studybox is an interactive tool that offers six unique study tools designed to enhance your learning experience. With a focus on minimalistic style and distraction-free interface, Studybox aims to optimize your study sessions through effective cognitive techniques. The tools included are Feynman, Flashcards, Pomodoro, SecondBrain, and Binaural Beats.

## Key Features:

Diverse Learning Tools: Engage with a variety of study methods, each tailored for different aspects of learning.
Minimalistic Design: Enjoy a clean, distraction-free interface that keeps you focused on your studies.
Cognitive Techniques: Utilize proven cognitive techniques to enhance your learning and retention skills.
Interactive Experience: Each tool offers an interactive and intuitive experience, ensuring a seamless study session.
🛠️ Tools Description:

Studybox: Employs cognitive structuring for efficient categorization and retrieval of academic resources.
Feynman Technique: Simplifies complex subjects into fundamental principles for better understanding.
Flashcards: Leverages active recall and spaced repetition for improved memory retention.
Pomodoro Technique: Uses fixed interval scheduling for optimized cognitive performance and time management.
Second Brain: Acts as a digital information management system for efficient information retrieval and mental clarity.
Binaural Beats: Uses sound frequencies to potentially induce altered states of consciousness.

## How to Use:

Visit the [Studybox website](https://studybox.sinehan.dev/) to access all tools.
Select a study technique from the interactive cube interface.
Follow the instructions for each tool to maximize your study efficiency.

## Project Structure:

App.js: The main component rendering the interactive cube and routes.
Components Folder: Contains individual components for each study tool.
Utils Folder: Utility functions and data for the tools.
Styles Folder: CSS files for styling the website's minimalistic design.

## Repository Link: Studybox on [Github](https://github.com/ezsinehan/study-box).

Embark on a journey of efficient and effective learning with Studybox - your gateway to mastering the art of studying!

## Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)


## Detected evidence (automated analysis)

Indexed codebase: 24 recognized source files, 45 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code

## Codebase structure (from repository index)

### Files (29 of 29)

```
.gitignore
package.json
public/index.html
public/manifest.json
public/robots.txt
README.md
README.old.md
src/App.css
src/App.js
src/App.test.js
src/components/Binuralbeats.js
src/components/Cube.js
src/components/Feynman.js
src/components/Feynman/server.js
src/components/Leitner.js
src/components/Pomodoro.js
src/components/Pomodoro/Timer.js
src/components/Secondbrain.js
src/connection.mjs
src/index.css
src/index.js
src/setupTests.js
src/styles/Binuralbeats.css
src/styles/Cube.css
src/styles/Feynman.css
src/styles/Leitner.css
src/styles/Leitner.js
src/styles/Pomodoro.css
src/styles/Secondbrain.css
```

### Dependencies

- package.json: @react-three/fiber@^8.15.14, @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, axios@^1.6.5, body-parser@^1.20.2, cors@^2.8.5, dotenv@^16.3.2, express@^4.18.2, homepage@/studybox, openai@^4.25.0, react@^18.2.0, react-dom@^18.2.0, react-native-circular-progress-indicator@^4.4.2, react-router-dom@^6.21.3, react-scripts@5.0.1, tree@^0.1.3, web-vitals@^2.1.4

### Recent commits (newest first)

- Fix formatting and headings in README.md
- link fix
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- small adjustments
- quick fix
- hositng setup
- descrip fix
- button sound for pomodoro
- cube descriptions
- flashcard temp fix
- cube import fix
- binural complete
- pomodoro completed
- Feynman prompt
- change openai feynman prompt
- Leitner
- feynman page formatting

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

### README.old.md

```markdown
# study-box
CruzHacks 2024

```

### package.json

```
{
  "name": "study-box",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-three/fiber": "^8.15.14",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.5",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.3.2",
    "express": "^4.18.2",
    "openai": "^4.25.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-router-dom": "^6.21.3",
    "react-scripts": "5.0.1",
    "tree": "^0.1.3",
    "web-vitals": "^2.1.4",
    "homepage": "/studybox"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

### src/index.js

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

```

### src/App.js

```javascript
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Cube from "./components/Cube";
import Feynman from "./components/Feynman";
import Pomodoro from "./components/Pomodoro";
import Leitner from "./components/Leitner";
import Secondbrain from "./components/Secondbrain";
import Binauralbeats from "./components/Binuralbeats";

function App() {
  return (
    <Router>
      <div className="App">
        <div className="header">
          <Link to="/" className="title-link">
            Studybox
          </Link>
        </div>
        <Routes>
          <Route path="/" element={<Cube />} />
          <Route path="/pomodoro" element={<Pomodoro />} />
          <Route path="/feynman" element={<Feynman />} />
          <Route path="/flashcards" element={<Leitner />} />
          <Route path="/secondbrain" element={<Secondbrain />} />
          <Route path="/binauralbeats" element={<Binauralbeats />} />
        </Routes>
        <footer className="footer">
          <a
            href="https://github.com/ezsinehan/study-box"
            target="_blank"
            rel="noopener noreferrer"
          >
            Visit our GitHub
          </a>
        </footer>
      </div>
    </Router>
  );
}

export default App;

```

### src/components/Feynman/server.js

```javascript
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();
// const {Configuration, OpenAIApi}  = require ('openai');
const { OpenAI } = require('openai')


const app = express();
// const configuration = new Configuration({ apiKey: process.env.OPEN_API_KEY,})
// const openai = new OpenAIApi(configuration);
const openai = new OpenAI(process.env.OPENAI_API_KEY);
app.use(bodyParser.json());
const corsOptions = {
    origin: 'http://localhost:3000', // or the port where your React app is running
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));

app.post('/analyze', async (req, res) => {
    const { subject, explanation } = req.body;


    try {
        const response = await openai.chat.completions.create({
            model: 'gpt-3.5-turbo',
            messages: [
                { role: "system", content: "You are a helpful assistant." },
                { role: "user", content: `Subject: ${subject}` },
                { role: "user", content: `Explanation: ${explanation}` },
                { role: "user", content: "Provide feedback on the explanation by identifying gaps in their explanation/unclear parts, emulating the feynman theory. The goal is for the user to have a clear and simple explanation. " }
            ],
        });

        const feedback = response.choices?.[0]?.message?.content?.trim();
        if (feedback) {
            res.send({ feedback });
        } else {
            // Handle the case where the expected path in the response does not exist
            console.error('Unexpected response structure:', response);
            res.status(500).send({ error: 'Unexpected response structure from OpenAI' });
        }

    } catch (error) {
        console.error(error);
        res.status(500).send({ error: error.message });
    }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});
```

### src/setupTests.js

```javascript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

```

### src/App.test.js

```javascript
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

```

### src/index.css

```css
/* body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
} */

```

### src/App.css

```css
.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.title-link {
  color: black;
  position: fixed;
  top: 0;
  left: 0;
  padding: 2% 2% 2% 2%;
  font-size: 24px;
  text-decoration: none; /* Removes underline from link */
  opacity: 0.5;
}

.title-link:hover {
  color: black;
  opacity: 1;
}

.title-link:visited {
  color: black;
  text-decoration: none;
}

.footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 10px;
  text-align: center;
}

/* Style the link in the footer similar to the .cube-controls button */
.footer a {
  background: none;
  border: none;
  margin-right: 10px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  opacity: 0.5;
  color: black;
}

.footer a:hover {
  opacity: 1;
  color: black;
}

/* Additional styling for the footer link */

/* .App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}  */

```

### public/index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="studybox" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Studybox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

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