Tembel 🧠

An AI-powered learning platform that transforms user goals into personalized learning curricula, featuring structured modules, interactive exercises, and gamified progress tracking with a coin-based system.

Tech stack ⚡

• React 19 (with React Router v7) – modern frontend framework with SSR
• TypeScript – type-safe development across the stack
• Convex – real-time backend with database, auth, and serverless functions
• AI SDK (with Google Gemini 2.5 Flash) – AI-powered curriculum generation
• Bun – fast JavaScript runtime and package manager
• TailwindCSS – utility-first CSS styling with custom design system
• Radix UI – headless UI components for accessibility
• React Query – server state management and caching
• Vite – build tool and development server
• Midtrans – payment processing for Indonesian market

Key features ✨

• 🤖 AI curriculum generation using Google Gemini with intelligent goal analysis
• 📚 Structured learning modules with comprehensive content and objectives
• 🎯 Interactive exercises (multiple choice & reflection) with progressive difficulty
• 🏆 Final projects that apply learned knowledge practically
• 💰 Coin-based economy with payment integration for premium features
• 📊 Progress tracking with completion analytics and achievements
• 🌐 Multi-language support (auto-detects and generates content in user’s language)
• 🔐 Authentication with Convex Auth and user management
• 📱 Responsive design optimized for mobile and desktop learning
• ⚡ Real-time updates and optimistic UI for smooth user experience
• 🎨 Clean, modern interface with educational focus

How it works 🔄

1. Goal Setting: Users input their learning objective (e.g., “Learn React hooks”, “Master SQL basics”)
2. AI Analysis: Gemini AI analyzes the goal and determines if it’s specific enough or needs clarification
3. Curriculum Generation: AI creates a structured learning plan with 3-10 modules, each containing:
   • Learning objectives and “why it matters” explanations
   • Comprehensive content with key takeaways and common pitfalls
   • 3-12 interactive exercises with progressive difficulty
   • Estimated completion time
4. Learning Journey: Users progress through modules, complete exercises, and track their advancement
5. Final Project: Capstone project that applies all learned concepts with clear requirements and criteria

What I learned 💡

Building Tembel taught me a lot about:

• 🤖 Integrating AI models for content generation with structured prompts and response validation
• 🏗️ Building scalable backend architecture with Convex’s real-time database and serverless functions
• 💳 Implementing payment systems and virtual currency mechanics for SaaS monetization
• 🎓 Designing educational user experiences with progress tracking and gamification elements
• 🌍 Creating multi-language applications with AI-powered content localization
• ⚡ Optimizing React applications with SSR, React Query, and modern performance patterns
• 🔄 Managing complex state machines for learning progress and payment workflows

Live demo 🌐

Try it at tembel.app. Set your learning goals and experience AI-powered curriculum generation with personalized learning paths!