StudyHive

Inspiration

What it does

We built a web application designed to help students learn faster and more efficiently by leveraging cutting-edge technology like Artificial Intelligence. The platform empowers students to generate personalized cheatsheets and flashcards that dynamically adapt based on the content they provide — whether it's lecture notes, textbook excerpts, or custom input.

Beyond content generation, the app includes a suite of productivity and collaboration tools:

🧠 AI-Powered Study Plan Generator: Creates optimized study plans tailored to each student's goals and deadlines. 📅 Deadline Tracker: Helps students manage and visualize upcoming assignments and exams. 📊 Interactive Dashboard: Displays quick links to all core features, usage statistics, and progress tracking. 🎓 University Module Progression & Monitoring: Lets students track their academic journey and stay aligned with their curriculum. 👥 Study Groups: Encourages collaborative learning through group sessions and shared materials. 🏆 Gamification & Point System: Rewards students based on activity, time spent studying, and engagement with the platform.

Together, these features form a powerful, AI-enhanced learning environment that supports both individual and collaborative success.

How we built it

Our web application was built using a modern full-stack approach with a focus on scalability, user experience, and seamless AI integration.

🔧 Frontend (React) We used React.js to build a fast, responsive, and modular user interface.

Components were designed to support features like flashcard editing, cheatsheet viewing, study plan visualization, and real-time updates.

For styling and layout, we used Tailwind CSS to ensure a clean, responsive design across all devices.

🌐 Backend Cloud The backend was built using Supabase to save login credentials for authentication.

🤖 AI Integration We integrated Meta's Llama 3.3 models to generate flashcards & cheatsheets. We engineered a prompt to AI generate a JSON structure so we can translate that data given from the AI to the users in the front end.

(Carefully crafted prompts were used to extract relevant content from user-provided notes or topics.)

🤖 Chat&Build For the initial UI development, we utilised Chat&Build to build a framework of what the website should look like. We took over later using our own expertise and implemented algorithms for our features.

Challenges we ran into

⏰ Late Start Due to other commitments during the day, we only began working on the project around midnight. This meant we had to move quickly, make fast decisions, and prioritize the most impactful features within a tight timeframe. Time constraints pushed us to be lean and creative in our implementation.

⚙️ Prompt Engineering for AI Designing prompts that consistently generated high-quality, structured flashcards and cheatsheets was more challenging than expected. We had to iterate on different prompt formats and test how the AI responded to various types of input, all while staying within token limits.

❓How Do We Translate What AI Says To the User If you've worked with AI models like ChatGPT, you'll know that even when asking the same question multiple times, the responses can vary. This inconsistency makes it difficult to reliably extract and present information using traditional code logic, especially when the AI returns long-form, unstructured text.

We first used DeepSeek but it was overthinking too much, giving a lot of redundant responses on top of the JSON structure.

To solve this, we introduced a structured approach to handling AI output. Instead of asking the AI for plain text answers, we prompted it to respond in a specific JSON format. For example:

{definitions: [ { "term": "Photosynthesis", "definition": "Definition for Photosynthesis generated here" }, // .. more terms and definitions here depending on how many the AI generates ]`

⚛️ Learning React on the Fly For all of us, React was a completely new technology. We had to quickly get up to speed with component-based architecture, state management, and React hooks — all while building a fully functional app under intense time pressure. Debugging unfamiliar errors and figuring out how to structure components efficiently was a steep but rewarding learning curve.

Accomplishments that we're proud of

🚀 Built a Full Product in One Night Despite only starting the project at midnight, we managed to design, build, and deploy a fully working web application with multiple AI-powered features in less than 24 hours.

⚛️ Learned and Used React from Scratch None of us had worked with React before this hackathon. We quickly picked it up, understood its component-based structure, and successfully built a dynamic, responsive UI — a big win in such a short timeframe.

🤖 Successfully Integrated AI with Structured Output We innovated a way to make AI output reliable by prompting it to respond in JSON format. This allowed us to consistently extract data and render dynamic flashcards, cheatsheets, and study plans without worrying about unpredictable responses.

📚 Created a Personalized Learning Experience We implemented core features that genuinely help students: AI-generated study materials, deadline tracking, a smart study plan, and collaborative study groups — all tied together in a clean and user-friendly dashboard.

👥 Seamless Collaboration and Feature Integration Even with time constraints and new tools, we managed to work collaboratively, divide responsibilities efficiently, and integrate all our features — from authentication to gamification — into a single cohesive experience.

What we learned

⚛️ React Development Coming into this hackathon, most of us had little to no experience with React. We learned how to build reusable components, manage state using hooks, and structure a scalable frontend app. It gave us a solid foundation in modern web development.

🤖 Prompt Engineering & AI Integration We discovered how important prompt design is when working with large language models. By experimenting with different prompt styles and formats, we learned how to guide the AI to produce more structured and reliable outputs.

🧩 Working with Structured AI Output We realized that AI isn’t just plug-and-play — making it usable in real-world apps requires creative thinking. By having the AI respond in JSON format, we learned how to bridge the gap between natural language and code-friendly data structures.

🕹️ Feature Scoping Under Pressure With limited time and a long feature wishlist, we learned how to prioritize core features, make fast decisions, and stay focused. This helped us stay on track and deliver a working MVP without getting overwhelmed.

👥 Teamwork & Collaboration Working late into the night, often outside our comfort zones, taught us the value of clear communication, fast feedback loops, and playing to each other’s strengths. Everyone contributed meaningfully, and the teamwork made the build process enjoyable and productive.

What's next for StudyHive

📄 Document Upload for Flashcard & Cheatsheet Generation One of our top priorities is to allow users to upload files (like PDFs, Word docs, or lecture slides) directly into the app. The AI will then extract key content from these documents to generate flashcards and cheatsheets automatically — saving students even more time.

🧠 Smarter, Context-Aware Flashcard Generation We plan to enhance the AI prompts to better understand academic structure (e.g., definitions, formulas, key dates) and generate more context-aware study materials tailored to the user’s subject and level of understanding.

📆 Smarter Deadline Recommendations We're working on expanding the deadline tracker into a full study calendar that automatically suggests when to study which topics, based on task difficulty, priority, and time availability.

📱 Mobile Optimization To make studying on the go easier, we aim to make the application mobile native on App Store/Play Store.

📊 Performance Analytics We want to give students insights into their study habits — like time spent on each subject, flashcard review progress, and study consistency — using data visualizations and recommendations.

🌐 Public/Shared Resource Library In the future, users will be able to optionally share their AI-generated flashcards or cheatsheets with study groups or the wider student community.

Project is brought to you by - Sadana (Team Leader) Aden Marcus Jadyn