DopaMind

Two ADHD-tailored games we designed
Transcribe speech into text for a mind map / note wall

Inspiration

With one of our team members being student with ADHD, we understand firsthand how difficult it can be to excel in a traditional learning environment. It took him some time to find ways to develop strategies that worked for him, complementing his learning style and unique way he process information; structure, visual aides, and active learning techniques have all worked to make him a stronger student. We harnessed his experience and further research as inspiration to continue uplifting students with ADHD, recognizing that their capabilities are no different that their peers and providing them with the tools to succeed.

What it does

Our comprehensive web app for students with ADHD is designed to help improve their focus, organization, and social skills. Our app is an all-in-one solution for students with ADHD, providing them with fun and engaging activities that are tailored to their unique needs. Some of the features we have coded are listed below:

Transcribble: a tool that transcribes what the user says onto the screen, help users organize their thoughts without needing to focus on typing them out. In addition to the transcribing tool is an AI chatbot that extends any ideas the user types into the idea box, helping the flow of inspiration continue beyond the user's initial thoughts.

Games: traditional games reinterpreted to complement the learning styles of students with ADHD. Sudoku: smaller than a traditional Sudoku board, pairing each value with an image to induce image-value relationships. Anagrams: a word-based puzzle providing users with a scrambled word, asking users to return the original word. The game exercises both vocabulary skills and pattern recognition.

Study Space: an organization tool with musical and time-based elements. This page contains a sound machine that emulates a tranquil, flowing river that naturally soothes the psyche. Additionally, there is a Pomodoro-style timer, helping users break large tasks up into smaller manageable timed units and maintain focus.

Resources: a list of organizations, articles, and tools geared towards common questions and concerns of students with ADHD. We intentionally presented our features with styling that heavily involves the color green, which helps to diffuse anxiety and gear focus towards the tasks at hand.

How we built it

We used React as the front end, and Express.js as a server to access the Co:here APIs. We specifically used the "/generate" api of Co:here to generate thoughtful responses to the notes section of Transcribble, with the intention of acting as a mentor to give advice on anything the user might be feeling. Another API we used was the assembly API, used to transcribe the audio notes that users can create. To run locally, we can follow the instructions on the README.md of the repo, and view the website at localhost:3000.

Challenges we ran into

Everyone on the team was relatively inexperienced in hackathons, this being the first in person hackathon that any of us have attended. We have all never created a functional project in such a short time, working nonstop for hours and hours on end. In the beginning, picking out an idea was extremely difficult because of all the ideas we had come up with, but we finally narrowed it down and started planning out the features that would go into the app. Using new APIs was also quite difficult, since setting things up for the first time is always confusing. We had originally planned on making a backend using Appwrite, but due to some registration issues, we were unable to accomplish that. Finally, we set up ESLint to have easy formatting, but sometimes it would break and we would spend a lot of valuable time debugging what was causing it to not autoformat our code.

Accomplishments that we're proud of

Our team of four beginners were extremely proud of making a functional webapp, using a lot of the skills we learned in UCLA classes such as CS 35L and applying it to a project that could benefit students in real life. Even though the final implementation differed from the Figma prototype slightly, the majority looks pretty similar to what we designed. It was very satisfying seeing everything come together, from just having the default npx create-react-app to adding pages and routing, to building a server that connects via APIs to the frontend, to combining them all and being able to run it.

What we learned

As a team, we learned that we could work together and create a polished final product in a short period of time. During our ideation phase, we research a lot about the needs of different children in school, and throughout this entire process, we were able to get more insight into the different needs of ADHD students and some ways that we could help. In term of the technical side, we all got a lot more familiar with React and React specific functions, such as useState, Routes, components vs pages, and styling. We realized halfway through that to use the Co:here APIs, we needed to build an Express server, as the example code uses the "require" function. We learned how to set up the server and have it communicate with the front end.

What's next for DopaMind

We envision for this webapp to be a crucial resource for students with ADHD, so we could add even more features such as more games. In addition, we could expand the usage of the Co:here API so that it responds to the transcriptions as well as the written notes. Styling could always improve so that the usability is better, especially for those that are visually impaired or use screen readers. We could also expand this so that it is not just targeted towards children with ADHD, but also benefit other neurodivergent children.