LearnSpace

Inspiration

As students, we find ourselves neglecting our studies and wasting hours scrolling on social media. We wanted to build a tool that doesn't just block distractions, but turns them into a gamified experience that helps students prepare for upcoming exams. So we decided to make an app that could help, not only us, but other students with creating better study habits through AI-powered study prompts.

What it does

LearnSpace detects when users attempt to open certain apps (set by the user) and stops them with a prompt to start their studying. Within LearnSpace, users can upload files and the system generates questions based on the material. Answer questions correctly, and user will earn stars! The more stars you get, the further you travel across the galaxy. With a built in ranking system, users can also see what galaxy their friends are in to stay motivated.

How we built it

We designed the interface on Figma, focused on a mobile layout with a playful galaxy theme. From there, we transitioned into React and Tailwind CSS development in VS Code, using Node.js for running the app locally. We imported galaxy space-themed assets, created multiple page routes, and implemented a point-tracking system. When the Ai question generation broke last minute, we hardcoded sample questions to preserve the main idea.

Challenges we ran into

The bottom nav bar didn't align properly across all screens, and we spent a lot of time fixing image imports and route handling. The final design did not end up looking like the Figma design as well which was a bummer. GitHub Codespaces had syncing issues, and our AI logic broke before the deadline, so we had to adapt to that. It was a constant balance between quick fixes while also trying to keep things functional.

Accomplishments that we're proud of

We built a working app under time pressure, even after major features broke or did not come out as expected. We kept the core experience intact and found creative ways to adapt when things didn't go as planned. A lot of these concepts were new to us, but in the end, we were still able to make a functioning app! This was an amazing experience and what we learned these past two days, will help us years down the line.

What we learned

We learned how to work as a team using GitHub and Codespaces for live coding, which helped us stay in sync while building separate components. We gained experience with file structuring and layout debugging in React and Tailwind. When our AI logic broke, it taught us how to shift fast and rethink how to maintain functionality without it. We also explored the early stages of integrating AI tools into web apps which gave us insight on how we can integrate it into future projects.

What's next for LearnSpace

In the future, we plan to implement working AI generated study problems and learn from this experience. We also hope to make the UI/UX more efficient and appealing.