EduTools

About the EduTools Project

Inspiration

As students, we were inspired by the challenges of balancing assignments, exams, and effective study methods. We envisioned a platform that uses AI to personalize learning, making it smarter and more engaging. EduTools was created to empower students with tools like interactive quizzes, vocabulary builders, AI flashcards, and personalized study plans, helping them succeed academically with ease.

What We Learned

Developing EduTools taught us how to integrate AI into educational tools, such as generating quizzes and flashcards dynamically. We gained skills in web development, UI/UX design for student engagement, and secure data management. The hackathon environment also sharpened our teamwork and time management, as we balanced innovation with practical functionality under tight deadlines.

How We Built It

We built EduTools using a modern tech stack for a scalable, performant platform. On the frontend, we used React 19 and Next.js 15 with TypeScript to create a dynamic, type-safe user interface, styled with Tailwind CSS, enhanced by tailwindcss-animate for smooth animations. We incorporated shadcn/ui and Radix UI for accessible, headless UI components, and used Lucide React for consistent icons, with Class Variance Authority and clsx for variant-based styling. For form handling, React Hook Form, Zod, and @hookform/resolvers ensured efficient validation in features like the Personalized Quiz Platform. On the backend, we integrated Groq and Vercel’s AI SDK, leveraging the Llama 3.1 8B Instant model for fast AI-powered quiz and flashcard generation. PostCSS and Autoprefixer streamlined our CSS processing. We managed our code with GitHub, used pnpm for efficient package management, and deployed the platform on Vercel for seamless hosting and scalability.

Challenges We Faced

A key challenge was ensuring AI-generated content, like quiz questions and flashcards, was accurate and relevant, requiring multiple iterations. Adding export options for flashcards (JSON, CSV, Text, Print) involved complex data formatting. We also struggled with designing an intuitive UI for students while keeping it visually clean, which we resolved through user testing and feedback during the hackathon.

Built With

• css
• groq
• html
• javascript
• next.js
• pnpm
• react
• tailwind
• typescript