Soalin - AI Quiz Generator for SMK Students
Full-stack AI-powered platform untuk personalized learning dengan adaptive algorithm
Overview
Soalin adalah comprehensive learning platform yang leverage Google Gemini 2.0 Flash AI untuk automatically generate relevant practice questions dari user-uploaded materials. Platform implements sophisticated adaptive learning algorithm yang dynamically adjust difficulty based on individual performance, ensuring optimal learning curve untuk setiap student. Built dengan modern full-stack architecture menggunakan Next.js 14 App Router, TypeScript, Prisma ORM, dan PostgreSQL via Supabase.
The Problem
Siswa SMK menghadapi critical challenge: kurangnya akses ke latihan soal yang sufficient dan relevant dengan materi mereka. Traditional methods require guru manually create hundreds of questions per topic - consuming 2+ hours per quiz set. Students tidak mendapat enough practice opportunities, dan different skill levels tidak terakomodasi. Existing quiz platforms tidak support Indonesian curriculum dan lack AI capabilities untuk auto-generation dari custom materials.
The Solution
Developed comprehensive AI-powered platform yang completely automate quiz generation process. Students simply upload learning materials (PDF, Word, images) dan AI instantly generate relevant multiple-choice questions dengan explanations. Implemented adaptive learning algorithm yang personalize difficulty based on individual performance - ensuring optimal challenge level. Built dashboard analytics untuk track progress real-time, dan secure authentication untuk data privacy. Platform handles entire workflow: upload → AI processing → practice → analytics.
Technical Implementation
Next.js 14 App Router Architecture
Leveraged Next.js 14 dengan App Router untuk optimal performance. Used Server Components by default untuk automatic code splitting, Client Components untuk interactivity, Server Actions untuk form submissions, dan Route Handlers untuk RESTful API endpoints. Implemented proper loading states dengan Suspense dan error boundaries untuk robust UX.
Google Gemini 2.0 Flash AI Integration
Integrated latest Gemini model via Google AI SDK. Engineered comprehensive prompts dengan system roles, few-shot examples, dan JSON schema untuk consistent structured output. Implemented retry logic dengan exponential backoff, response validation via Zod schemas, dan error handling untuk API failures. Optimized context window usage untuk cost-effectiveness.
Adaptive Learning Algorithm
Built custom algorithm yang analyze user's last 5 answers untuk calculate accuracy rate. Based on performance: >80% accuracy → increase difficulty to 'hard', 50-80% → maintain 'medium', <50% → decrease to 'easy'. Implemented question pool selection yang avoid recently asked questions dan maintain optimal learning curve. Tracked streaks dan provided performance insights.
Database Architecture (PostgreSQL + Prisma)
Designed normalized database schema dengan 4 main tables: Users, Quizzes, Questions, UserAnswers. Used Prisma ORM untuk type-safe queries dan automatic migrations. Implemented proper indexes (userId, quizId, questionId) untuk query optimization. Used PgBouncer connection pooling (port 6543) untuk scalability. Setup foreign key relations dengan cascade deletes.
File Processing Pipeline
Built comprehensive file handling system: client-side validation (type, size), server-side MIME verification, text extraction based on file type (pdf-parse untuk PDF, mammoth untuk DOCX, OCR untuk images). Implemented chunking untuk large files, preprocessing untuk text normalization, dan secure storage considerations.
Authentication & Security
Implemented NextAuth.js dengan Google OAuth provider. Used JWT strategy untuk session management, Prisma adapter untuk database sessions, proper CSRF protection, secure cookie configuration. Added authorization checks di API routes, input sanitization, dan SQL injection prevention via Prisma's parameterized queries.
Why This Tech Stack?
Next.js 14 selected untuk its full-stack capabilities - single codebase untuk frontend + backend, App Router untuk performance optimization dengan automatic code splitting, seamless Vercel deployment, dan excellent developer experience. TypeScript essential untuk type safety di large codebase (200+ files) dengan 100+ potential runtime errors caught during development. Prisma ORM chosen untuk type-safe database access dengan excellent TypeScript integration, automatic migrations, dan intuitive schema syntax. PostgreSQL via Supabase provides robust relational database dengan cloud hosting, automatic backups, PgBouncer connection pooling, dan real-time subscriptions capability. Google Gemini 2.0 Flash selected untuk cutting-edge AI capabilities, cost-effectiveness (cheaper than GPT-4), fast inference time, dan long context window (1M tokens). NextAuth.js provides battle-tested authentication solution dengan multiple providers support dan built-in CSRF protection. Tailwind CSS enables rapid UI development dengan utility-first approach, excellent developer experience, dan automatic purging for optimal bundle size.
Challenges & Solutions
Challenge
AI Response Consistency & Validation
Solution
AI responses were initially inconsistent - sometimes returning invalid JSON, wrong format, atau incomplete data. Solved dengan comprehensive prompt engineering: clear system role definition, detailed output schema dengan examples, strict JSON formatting instructions. Added multi-layer validation: Zod schema validation, required field checks, option array verification. Implemented retry logic (max 3 attempts) dengan exponential backoff. Result: 95% first-attempt success rate, 99% dengan retries.
Challenge
Database Connection Exhaustion
Solution
Hit 'too many connections' errors di production karena Prisma creating new connections per request. Initial setup used direct connection (port 5432) without pooling. Solution: migrated ke PgBouncer pooled connection (port 6543), implemented Prisma singleton pattern untuk reuse client instance, added proper connection cleanup, dan optimized query patterns dengan lazy loading. Reduced active connections dari 100+ to <10, eliminated timeout errors completely.
Challenge
Adaptive Algorithm Accuracy vs Engagement
Solution
Initial algorithm too aggressive - jumped difficulty too quickly, causing user frustration dan drop-off. Users complained questions became 'too hard too fast'. Refined approach: increased analysis window dari last 3 to last 5 answers untuk smoother transitions, added middle ground (medium) sebagai buffer, implemented streak tracking untuk positive reinforcement, avoided recently asked questions (<10 questions ago). Result: 40% increase in session duration, 25% drop in frustration-related feedback.
Results & Impact
- Successfully completed comprehensive development cycle dengan production-ready platform
- Generated 150+ high-quality quizzes during testing phase with 85% accuracy validated by teachers
- Conducted extensive testing dengan 30+ beta users (students & teachers) with positive feedback
- Achieved 95+ Lighthouse performance score (98 Performance, 100 Accessibility, 95 Best Practices, 100 SEO)
- Implemented robust error handling dan monitoring - zero critical bugs during beta testing phase
- Demonstrated significant efficiency: reduced quiz creation time dari 2 hours to 2 minutes (potential 98% time saving)
Development Timeline
Research & Planning
Conducted extensive user research melalui interviews dengan 15 siswa SMK dan 5 guru untuk identify pain points. Competitive analysis terhadap existing quiz platforms. Selected tech stack based on requirements: scalability, cost, performance. Designed database schema dengan normalization principles. Created wireframes dan user flow diagrams. Defined API architecture dan endpoint specifications.
Core Development
Implemented authentication flow dengan NextAuth.js + Google OAuth. Built file upload system dengan validation dan processing pipeline. Integrated Google Gemini API dengan prompt engineering. Developed quiz generation logic end-to-end. Created database models dengan Prisma dan setup migrations. Built basic UI components library dengan Tailwind. Setup development environment dengan proper tooling (ESLint, Prettier, TypeScript).
Adaptive Learning Implementation
Developed sophisticated adaptive algorithm dengan performance tracking. Implemented UserAnswer model untuk store answer history. Built difficulty adjustment logic based on accuracy calculations. Created analytics dashboard dengan charts (quiz count, accuracy trends, time spent). Added progress tracking features. Implemented question pool selection algorithm. Tested algorithm dengan simulated user data untuk validate effectiveness.
Testing & Optimization
Comprehensive testing dengan 30+ beta users (students + teachers). Collected feedback via surveys dan user sessions. Fixed 50+ bugs identified during testing. Optimized database queries dengan proper indexes - reduced query time 70%. Implemented code splitting dan lazy loading untuk better performance. Added error boundaries dan fallback UI. Setup Sentry untuk error monitoring. Conducted accessibility audit dan fixes.
Launch & Iteration
Production deployment ke Vercel dengan proper environment configuration. Database migration ke production PostgreSQL. Setup monitoring dashboards (Vercel Analytics, Sentry). Launched marketing campaign via Instagram + WhatsApp groups. Monitored performance metrics closely first week. Gathered initial user feedback via in-app surveys. Implemented 15 quick improvements based on feedback: UI tweaks, clearer instructions, better error messages. Documented codebase dan created README.
Key Learnings
- Prompt engineering is an art and science - spent 40% of AI integration time perfecting prompts. Clear instructions, examples, dan structured output format are critical. Small prompt changes had massive impact on consistency (from 70% to 95% success rate).
- Database connection pooling not optional for production - learned the hard way when hitting connection limits. PgBouncer + singleton pattern essential. Always test at scale before launch.
- User feedback during development invaluable - weekly testing sessions dengan actual students revealed assumptions yang wrong. Real users use apps differently than developers expect. Early feedback saved months of post-launch iteration.
- Type safety prevents bugs before they happen - TypeScript + Prisma caught 100+ potential runtime errors during development. Initial setup overhead (typing everything) paid off massively. Refactoring with types is fearless.
- Performance optimization from day one pays off - implementing proper caching, code splitting, image optimization from start resulted in 95+ Lighthouse scores. Retrofitting optimization later is exponentially harder. Next.js App Router automatic optimizations are game-changer.
Interested in Similar Solutions?
Have a project in mind? Let's discuss how I can help bring your ideas to life with modern web technologies.
Let's Discuss Your ProjectStack
Role
Full-Stack Developer & AI Engineer
- •Architected complete full-stack application dari ground up menggunakan Next.js 14 App Router dengan proper folder structure dan separation of concerns
- •Integrated Google Gemini 2.0 Flash AI dengan comprehensive prompt engineering - crafted system roles, few-shot examples, JSON schema definitions
- •Designed dan implemented normalized database schema dengan Prisma + PostgreSQL (4 tables: Users, Quizzes, Questions, UserAnswers) dengan proper indexes dan foreign key relations
- •Developed sophisticated adaptive learning algorithm yang analyze user performance (last 5 answers) untuk dynamically adjust question difficulty
- •Built responsive, accessible UI/UX dengan Tailwind CSS following mobile-first approach dan WCAG 2.1 AA standards
- •Implemented secure authentication flow dengan NextAuth.js + Google OAuth including JWT session management dan Prisma database adapter
- •Setup production deployment pipeline ke Vercel dengan environment configuration, database migrations, dan monitoring via Sentry error tracking
Key Features
- AI-powered quiz generation dari multiple file formats (PDF, Word, PowerPoint, dan Images) dengan automatic text extraction
- Adaptive learning system yang intelligently adjust difficulty berdasarkan user performance (>80% accuracy → harder, <50% → easier)
- Real-time progress tracking dengan comprehensive dashboard analytics (quiz count, accuracy trends, time spent, performance graphs)
- Secure Google OAuth authentication dengan session management via NextAuth.js dan database-stored sessions
- Multi-format file upload dengan comprehensive validation (client + server side: type checking, size limit 10MB, MIME verification)
- Instant feedback system dengan detailed explanations untuk setiap jawaban yang helps reinforce learning
- Mobile-responsive design dengan dark mode support, smooth animations, dan accessible UI components
Impact
Platform pembelajaran AI yang innovative untuk siswa SMK. Successfully tested dengan 30+ beta users (students & teachers) selama development phase. Currently in production dengan early adopter users, achieving positive feedback for quiz quality dan ease of use.
Timeline
Juli - September 2024 (12 weeks intensive)