💡 Inspiration
We've all been there — watching a lecture video at 2x speed, highlighting entire textbook pages, or cramming the night before an exam. Despite all that effort, the knowledge evaporates within days. The problem isn't the student. It's the method.
The Socratic method — where a teacher guides through questions rather than lectures — is one of the oldest and most effective forms of learning ever devised. Socrates never handed anyone an answer. He asked questions until his students discovered the truth themselves. That kind of learning sticks.
We were inspired by the gap between how powerful AI has become and how shallow most "AI tutors" actually are. Most tools simply look up answers. We wanted to build something that actually teaches — one that forces you to think, challenges your assumptions, and adapts to your level in real time.
Learnly was born from that frustration: what if anyone, anywhere, could have a world-class Socratic tutor on demand?
🎯 What it does
Learnly is a universal AI-powered learning platform that helps you learn anything efficiently and deeply — from K-12 mathematics to advanced research methods, from career interview prep to financial literacy.
Core capabilities:
- 🤖 Socratic AI Tutor — Instead of giving direct answers, the AI asks guiding questions, uses real-world analogies, and scaffolds understanding step by step. You learn how to think, not just what to think.
- 🌳 34-Skill Learning Tree — A gamified skill tree spanning 6 phases: foundational study skills, K-12, university, research, career, and life mastery. Every skill is a structured learning journey.
- 🎙️ Voice Learning — High-quality natural text-to-speech (ElevenLabs) reads AI responses aloud. Learn while commuting, exercising, or away from your screen.
- 📝 Interactive Exercises — Inline multiple choice, true/false, fill-in-the-blank, and AI-graded short answer questions keep you actively engaged rather than passively reading.
- 📄 Document Upload → Instant Course — Upload any PDF, Markdown, or text file and Learnly's AI generates a structured course outline, key points, and a full tutoring session around your own materials.
- 🏆 Gamification — Daily learning streaks, a global leaderboard, and skill progress tracking turn consistent learning into a habit.
- 🌍 Global & Multilingual — Full support for English, Chinese, and Japanese, with more languages coming.
🛠️ How we built it
Learnly is a modern Next.js 16 monorepo deployed on Netlify, with a carefully chosen stack that prioritizes speed, quality, and developer experience.
| Layer | Technology | Why |
|---|---|---|
| Frontend | Next.js 16 App Router + TypeScript | Server components, streaming, ISR for 220 pre-built skill pages |
| AI / LLM | Groq API (LLaMA 3.3 70B) | Fastest inference available — sub-second streaming responses |
| Voice | ElevenLabs API | Most natural-sounding TTS; far from robotic |
| Auth | Supabase Auth + Firebase | OAuth (Google/GitHub), email auth, and analytics |
| Animations | Lottie / @lottiefiles/dotlottie-react | 8 custom .lottie animations for premium UX without performance cost |
| Styling | Tailwind CSS + shadcn/ui | Dark glassmorphism design system with micro-animations |
| i18n | next-intl | Locale-aware routing for EN/ZH/JA with SSG support |
| Deployment | Netlify + @netlify/plugin-nextjs | Full SSR/API route support with immutable asset caching |
The AI tutor is built around a carefully crafted Socratic system prompt that instructs the model to never give direct answers, always ask before explaining, adapt its language to the learner's demonstrated level, and use concrete analogies tied to real-world scenarios.
We built a custom skill parsing pipeline (scripts/parse-skills.ts) that transforms 34 Markdown skill directories into a structured TypeScript data file at build time — meaning all skill pages are fully statically generated with zero runtime overhead.
🧗 Challenges we ran into
1. Making the AI actually Socratic (not just answer-giving) The hardest problem was prompt engineering. By default, LLMs want to be helpful by giving complete answers. Getting the model to consistently ask back, probe understanding, and scaffold rather than lecture took dozens of iterations of system prompt tuning and real-user testing.
2. Streaming responses with React Server Components Implementing real-time streaming AI responses inside Next.js App Router's server/client boundary required careful architecture — we had to manage stream state, partial renders, and error fallbacks without breaking the UI.
3. ElevenLabs audio quality vs. latency Early audio outputs sounded robotic due to wrong voice model settings. We tuned the stability, similarity boost, and style parameters to achieve a natural, warm-sounding voice while keeping response latency acceptable.
4. Netlify deployment with monorepo structure
The project uses a root package.json that delegates to app/ subdirectory. Netlify was installing root dependencies but not app/node_modules, causing next: not found. Fixed by setting base = "app" in netlify.toml and adding a postinstall hook.
5. Lottie .lottie format with SSR
The newer .lottie binary format requires @lottiefiles/dotlottie-react. Getting this to work with SSR and "use client" boundaries without hydration errors took careful dynamic-import handling.
🏅 Accomplishments that we're proud of
- ✅ 34 complete skill tracks — each with its own Socratic tutor persona, exercise bank, and learning objectives
- ✅ Sub-second AI streaming — using Groq's LLaMA 70B, responses begin appearing in under 300ms
- ✅ 220 statically pre-rendered pages — all skill and chat pages generated at build time for instant load
- ✅ 8 integrated Lottie animations — each placed meaningfully (confetti on correct answers, AI thinking indicator, document scanner, login screen, and more)
- ✅ Natural voice synthesis — ElevenLabs voices that feel like a real tutor, not a robot
- ✅ AI short-answer grading — open-ended responses graded with detailed reasoning, not just string matching
- ✅ Zero-config course creation — upload any document and get a full structured course in seconds
- ✅ Full i18n — the entire UI and skill content is locale-aware across EN/ZH/JA
📚 What we learned
- Prompt engineering is product design. The biggest UX improvements came not from UI changes but from refining how we instruct the AI. The Socratic constraint turned a generic chatbot into a genuine tutor.
- Groq changes the AI UX calculus. At typical OpenAI speeds, streaming feels slow enough that users disengage. Groq's throughput makes the tutor feel present — speed is a feature.
- Lottie animations are underused in web apps. Contextually meaningful animations (not decorative ones) dramatically increased perceived quality and emotional engagement.
- Static generation + dynamic AI = best of both worlds. Pre-rendering skill metadata pages while keeping AI chat fully dynamic delivers near-instant load times without sacrificing personalization.
- Monorepo deployments need explicit config. The
basedirectory setting innetlify.tomlis the single most critical config line when deploying a subdirectory-based Next.js project.
Built With
- elevenlabs
- groq
- nextjs
- react
- typescript
Log in or sign up for Devpost to join the conversation.