StudyStAcK

StudyStAcK landing page
Dashboard
Video to text, resumed by AI
Flashcard generation
Calendar application and to-do list
Your personal notes
Resources that you can search up!

Inspiration

As dedicated tutors in the STEM field, both my partner and I have witnessed firsthand the academic struggles faced by countless students. From the pressure of juggling multiple courses to the overwhelming flood of deadlines and dense information, the students we’ve worked with often felt like they were drowning. They didn’t lack intelligence. They lacked the right tools. This is what drove us to create StudyStAcK: an AI-powered companion designed to not just support students, but to elevate them. StudyStAcK isn’t just a study tool, it’s the ultimate academic boost, helping students unlock their full potential and reach new heights.

What it does

StudyStAcK is a next-generation, all-in-one AI study suite engineered to revolutionize how students engage with their education. Our tool effortlessly condenses marathon-length lectures into bite-sized, high-impact summaries, transforming 6-hour content into digestible 30-minute reads using cutting-edge generative AI. From there, students can instantly generate flashcards and interactive quizzes from these summaries or create their own custom study sets.

But we didn’t stop there. If you get a question wrong, StudyStAcK intelligently suggests personalized resources to help you dive deeper and master the concept. On top of that, users can track their progress and organize tasks with a fully integrated calendar, keeping everything on schedule and stress-free. Every element in StudyStAcK is designed to empower, streamline, and supercharge the academic journey.

How we built it

We built the StudyStAcK web application using React and Vite.js, prioritizing speed, efficiency, and user experience. The front-end design is powered by Tailwind CSS to deliver a sleek, intuitive interface. We also integrated powerful APIs from YouTube and OpenAI, which allow us to generate personalized recommendations, understand complex lectures, and support a variety of multimedia formats. Our core tech stack includes JavaScript, TypeScript, HTML, and CSS—tools we wielded to bring our vision to life.

Challenges we ran into

This was our first deep dive into front-end development and API integration—an ambitious leap into uncharted territory. The learning curve was steep. We faced bugs, missteps with API keys, confusion with linking services, and more design headaches than we could count. But each obstacle sharpened our skills and brought us closer to building something we’re proud of.

Accomplishments that we're proud of

We're incredibly proud of how we harnessed the power of AI to offer intelligent, personalized study recommendations that adapt in real time to each student's journey. We also managed to pull together a sleek and functional interface that delivers a surprisingly smooth user experience—especially considering this was our first full-stack build. For a team of mostly backend thinkers, this was a leap—and we landed it.

What we learned

How to build a responsive front-end using React & Vite.js

Seamless integration of third-party APIs

Styling with Tailwind CSS

How to endure (and survive) watching hours upon hours of educational videos

The importance of problem-solving under pressure

What’s next for StudyStAcK

We’re only just getting started. The roadmap ahead is ambitious and brimming with possibilities. Our next move is to develop a robust backend with a real database, moving away from primitive .txt storage to ensure data security, performance, and scalability. We also want to introduce a "Learn More" portal—a window into our vision and core philosophies.

Future upgrades will include:

Enhanced progress tracking with dynamic, visually stunning analytics

Cross-platform notifications to keep students on top of deadlines

Deeper customization features

A complete design overhaul for an even more polished user experience

StudyStAcK is more than a project—it’s a movement. And we’re ecstatic about the foundation we’ve built.

DISCLAIMER: IF YOU WISH TO RUN THE WEBAPP, YOU MUST NOT USE MARIANOPOLIS's WIFI TO OPEN IT.