Inspiration
Studying can feel repetitive, especially when it means reading the same notes over and over. I wanted to explore a different approach: making studying feel like exploring a world. MindRooms combines an Odyssey-inspired adventure with learning activities in interactive 3D environments.
What it does
MindRooms is a browser-based learning prototype where users explore themed islands and complete learning challenges. The current version includes built-in study content, interactive activities, scoring, and saved progress.
Each island is part of a larger learning journey, connecting exploration with opportunities to practice and recall concepts.
How We built it
We used React and TypeScript for the application, Three.js and React Three Fiber for the 3D environments, and Tailwind CSS for the interface. Vite supports the development workflow, and Zustand manages application state.
Challenges We ran into
One challenge was connecting the 3D environments with activities that have a clear learning purpose. Another was making the interactions understandable so users know what to click and what to do next. Balancing the visual experience with readable study content was also an important design challenge.
Accomplishments that we proud of
We are proud of bringing the idea into an interactive prototype with themed environments, learning challenges, scoring, and saved progress. It gave me a foundation for exploring how a study tool can feel more engaging and personal.
What we learned
This project helped us practice building interactive 3D experiences with React, managing application state, and connecting interface design with gameplay. We also learned how important clear instructions and feedback are in a learning application.
What's next for MindRooms
We plan to support uploaded PDF, DOCX, and TXT lessons, along with pasted notes, so activities can connect to a student's own material.
Another planned feature is Athena’s Library: an interactive bookshelf where selecting a book reveals its study resources. Selecting a resource would open a book-style reading view. Planned resources include summaries, flashcards, practice questions, and study guides.
We also want to improve activity instructions and explore AI-assisted study content generation.
Built With
- lucide-react
- react
- react-three-drei
- react-three-fiber
- tailwind-css
- three.js
- typescript
- vite
- zustand