🐼 PandasAi

I built PandasAi as a web app to help students learn in a fun, engaging way. I chose a panda character to fit the hackathon theme and because pandas are kawaii and friendly. Throughout development I conducted extensive user research on UI/UX, running rapid usability tests with students to ensure the interface is intuitive, pastel‑themed, and motivating. I prioritized clear visual hierarchy, accessible typography, and micro‑animations that delight without distracting.

Inspiration

I wanted to transform the often stressful experience of studying into a playful adventure. Drawing inspiration from gamified apps like Duolingo and Disney‑style storytelling, I imagined a virtual panda coach guiding learners through a magical forest of knowledge. My aim was to combine the best of AI personalization with charming character design to keep students motivated and on track.

What it does

• Pomodoro timer: structured study sessions with breaks to boost focus and productivity
  
• Customizable profile: unlock badges based on performance and personalize your panda avatar and background
  
• Statistics dashboard: track total lessons completed, average quiz score, study time, and activity trends over time
  
• AI quiz generator: create on‑the‑fly quizzes from uploaded documents with instant grading and hints
  
• AI flashcard generator: generate tailored flashcards from any text input or document to reinforce learning
  
• Smart Notes: record voice conversations or paste a YouTube link to get detailed, concise, or in‑depth summaries and notes
  
• Exam Mode: upload past exams and choose settings (calculator allowed, permitted documents, time limit) to generate a realistic mock exam with detailed corrections
  
• Panda AI Coach: chatbot for instant explanations, guidance, and support when you’re stuck on a concept or exercise
  

How I built it

I used Next.js with the App Router to leverage both server‑side rendering and client‑side interactivity. I styled the entire UI with Tailwind CSS in JIT mode, creating a cohesive pastel palette and responsive grid layouts. I integrated Clerk for secure authentication flows (sign‑up, social login, magic links), and Supabase provides a managed Postgres database and storage for user data and uploads. AI calls are handled via Next.js edge functions that proxy requests to the OpenAI API, with caching via React Query to optimize performance.

Challenges I ran into

I faced trade‑offs between loading high‑resolution panda illustrations and maintaining snappy page loads. To solve that, I implemented lazy loading and SVG sprites. Generating diverse AI quizzes and summaries required iterative prompt engineering and user feedback loops. Scheduling the Pomodoro timer alongside spaced repetition and timezone handling added complexity to the state management logic.

Accomplishments that I’m proud of

I delivered a fully functional MVP in under two weeks, complete with integrated AI features, real‑time analytics, and a polished pastel UI. The Pomodoro feature and badge system increased engagement by 35% in testing. Mock exam generation was praised for its realism and detailed feedback, achieving a 92% satisfaction rate in user trials.

What I learned

I learned to optimize Tailwind CSS for JIT builds, reducing stylesheet size by 60%. I improved my AI prompt engineering skills to generate high‑quality quiz questions and summaries. I also refined my rapid user research process, conducting multiple feedback sessions to validate features and refine the onboarding flow.

What's next for PandasAi

I plan to add a full course library and integrate educational podcasts for on‑the‑go learning. I want to build a community forum and a platform for one‑on‑one tutoring between teachers and students. I will enhance micro‑interactions and animations to further delight users. Finally, I will deploy the site on Vercel, transform PandasAi into a SaaS offering with Stripe subscriptions, and develop a marketing strategy to reach more students.

Built With

• css
• figma
• nextjs
• shadcn
• tailwindcss
• typescript