This content originally appeared on DEV Community and was authored by youssef-imlyhen
Kostudy: Reimagining AI-Powered Learning with React, TypeScript, and the Google Gemini API
Live Demo
- Watch on YouTube: https://youtu.be/VsXnGYEopW0
- Try it at https://kostudy.netlify.app/
- Code: https://github.com/youssef-imlyhen/kostudy
Most of today's learning tools fall short. They either hook you with cheap gamification to sell more ads, or they slap a chatbot onto a decade-old quiz and call it an "AI education app." You deserve better.
That's why I built Kostudy – an AI-first, feature-rich, open-source learning application that leverages modern web technologies and the Google Gemini API to deliver an intelligent, context-aware, and engaging learning experience.
In this post, we'll dive deep into Kostudy's architecture, explore its unique AI-powered features, and see how it's redefining what a learning app should be in the age of AI.
The Problem with Current Learning Apps
Before we dive into Kostudy's solutions, let's address a fundamental question: Why do most learning apps fail to deliver real value?
Traditional learning apps suffer from several critical issues:
- Superficial AI Integration: Many apps simply add a chatbot to an old quiz engine and call it "AI-powered"
- One-Size-Fits-All Approach: They don't adapt to individual learning needs or contexts
- Poor Content Quality: Questions are often generic and not tailored to specific learning materials
- Limited Interactivity: Most apps offer basic quizzes with little engagement beyond multiple choice
- No Context Awareness: They can't leverage your own materials (videos, PDFs, notes) for personalized learning
These limitations create a gap between what learners need and what's available. Kostudy was designed to bridge this gap.
Introducing Kostudy: A New Approach to Learning
Kostudy is an open-source learning application built with React, TypeScript, and Tailwind CSS. It leverages the Google Gemini API to provide AI-powered features that transform how we learn. But what makes Kostudy different?
Unlike traditional learning apps, Kostudy puts AI at the center of the learning experience. It's not just an add-on feature – it's the foundation that enables:
- Context-aware question generation from your own materials
- Interactive learning adventures that adapt to your progress
- AI-powered app generation for custom learning experiences
- Real-time voice conversations with an AI tutor
- And much more
Let's dive into the technical architecture that makes this possible.
Technical Architecture: Building a Modern Learning Platform
Core Technologies
Kostudy is built on a modern stack that prioritizes performance, developer experience, and extensibility:
{
"dependencies": {
"@google/genai": "^1.10.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.1.3",
"react-hook-form": "^7.60.0",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0",
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0",
"howler": "^2.2.4",
"papaparse": "^5.5.3",
"uuid": "^11.0"
},
"devDependencies": {
"typescript": "~5.6.2",
"vite": "^6.0.5",
"tailwindcss": "^3.4.17",
"daisyui": "^4.12.23",
"@vitejs/plugin-react": "^4.3.4",
"vite-plugin-pwa": "^1.0.2"
}
}
Component Architecture
Kostudy follows a modular component architecture that makes it easy to extend and maintain:
src/
├── components/ # Reusable UI components
├── context/ # React context providers
├── data/ # Static data and question banks
├── hooks/ # Custom React hooks
├── localization/ # Multi-language support
├── sagalearn/ # Interactive learning adventure engine
├── screens/ # Top-level screen components
├── services/ # Business logic and API integrations
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
State Management
Kostudy uses React's Context API for state management, which provides a clean and predictable way to manage global state:
// src/context/QuizContext.tsx
export interface QuizContextType {
currentQuiz: {
category?: string;
difficulty?: string;
progress?: number;
score?: number;
currentLevel?: string;
playAllMode?: boolean;
currentStreak?: number;
maxStreak?: number;
};
setCurrentQuiz: (quiz: QuizContextType['currentQuiz']) => void;
}
export const QuizContext = createContext<QuizContextType | null>(null);
This approach eliminates the need for external state management libraries while keeping the codebase clean and maintainable.
AI-Powered Features: The Heart of Kostudy
1. AI Question Generation with Rich Media Context
One of Kostudy's standout features is its ability to generate context-aware questions from various media types. This is powered by the Google Gemini API and supports:
- YouTube videos
- PDF documents
- Audio files
- Images
- Web articles
The implementation uses a sophisticated media processing pipeline:
// src/utils/mediaUtils.ts
export async function mediaContextToParts(
context: MediaContext,
genAI: GoogleGenAI
): Promise<Part[]> {
const parts: Part[] = [];
switch (context.type) {
case 'youtube':
if (context.url) {
parts.push(createYouTubePart(context.url));
}
break;
case 'image':
case 'video':
case 'audio':
case 'pdf':
if (context.file) {
try {
// For large files, use file upload API
if (context.file.size > 20 * 1024 * 1024 || context.type === 'pdf') {
const filePart = await uploadFileToGemini(context.file, genAI);
parts.push(filePart);
} else {
// For smaller files, use inline data
const filePart = await fileToGenerativePart(context.file);
parts.push(filePart);
}
} catch (error) {
console.error('Error processing media file:', error);
throw error;
}
}
break;
}
return parts;
}
This approach allows Kostudy to handle files up to 100MB and provides appropriate processing based on file type and size.
2. AI Chat Assistant with Context Awareness
Kostudy's chat assistant goes beyond simple Q&A by maintaining context from your learning materials:
// src/components/AIGenerationTab.tsx
const fullPrompt = `
${mediaPromptPrefix}generate a list of quiz questions in JSON format.
The user's text will specify the topic and the number of questions to generate.
Each question object must have the following structure:
{
"id": "a-unique-uuid",
"category": "A relevant category based on the content, with ' (AI Gen)' appended",
"question": "The question text",
"type": "multiple-choice", // or "true-false" or "fill-in-the-blank"
"difficulty": "medium", // or "easy" or "hard"
"explanation": "A brief explanation of why the answer is correct. Supports markdown formatting."
}
`;
3. Interactive SagaLearn: Choose-Your-Own-Adventure Learning
SagaLearn transforms learning into an adventure with branching narratives that adapt to your choices and performance:
// src/screens/SagaLearnScreen.tsx
const convertToSagaQuestion = (question: MainAppQuestion): SagaQuestion | null => {
let answer: string;
let wrongOptions: string[] = [];
switch (question.type) {
case 'multiple-choice':
if (typeof question.correctAnswer === 'string') {
answer = question.correctAnswer;
wrongOptions = question.options.filter(opt => opt !== question.correctAnswer);
} else {
// Handle multi-select
answer = Array.isArray(question.correctAnswer) ? question.correctAnswer[0] : '';
wrongOptions = question.options.filter(opt => !question.correctAnswer.includes(opt));
}
break;
// ... other question types
}
return {
topic: question.category,
question: question.question,
answer,
wrongOptions
};
};
4. AI App Studio: Generate Custom Learning Apps
Perhaps the most innovative feature is the AI App Studio, which can generate complete learning applications from simple prompts:
// src/services/enhancedAIService.ts
private buildEnhancedSystemPrompt(): string {
return `You are an expert full-stack developer, educational technologist, and UX designer with deep expertise in creating engaging, interactive web applications.
CORE MISSION:
Create exceptional, self-contained HTML applications that are not just functional, but truly engaging and educational.
CRITICAL REQUIREMENTS:
1. Generate ONLY a complete HTML file with embedded CSS and JavaScript
2. The application must be fully functional and self-contained
3. Use cutting-edge web technologies (HTML5, CSS3, ES2023+ JavaScript)
4. Implement responsive design with mobile-first approach
5. Include smooth animations, transitions, and micro-interactions
6. Ensure full accessibility (WCAG 2.1 AA compliance)
7. Add comprehensive error handling and user feedback
8. Create beautiful, modern UI with attention to visual hierarchy
9. Implement progressive enhancement principles
10. Include performance optimizations
`;
}
Core Quiz Features: Solid Foundation for Learning
Flexible Question Types
Kostudy supports multiple question types with rich media support:
// src/types/question.ts
export type QuestionType = 'multiple-choice' | 'true-false' | 'fill-in-the-blank';
export interface MultipleChoiceQuestion extends QuestionBase {
type: 'multiple-choice';
options: string[];
correctAnswer: string | string[]; // Can be a single answer or multiple
}
export interface TrueFalseQuestion extends QuestionBase {
type: 'true-false';
correctAnswer: boolean;
}
export interface FillInTheBlankQuestion extends QuestionBase {
type: 'fill-in-the-blank';
correctAnswer: string;
}
Customization and Theming
Kostudy's theming system is highly customizable through a central configuration file:
// src/config.ts
export const config: AppConfig = {
appName: 'Kostudy',
theme: 'light',
primaryColor: '#58CC02',
quizFeatures: {
enableMultipleChoice: true,
enableTrueFalse: true,
enableFillInTheBlank: true,
enableMultiSelect: true,
enableImageOptions: true,
enableQuestionImage: true,
},
aiFeatures: {
enableAIGeneration: true,
},
};
Internationalization
With support for 16+ languages, Kostudy makes learning accessible worldwide:
// src/context/LanguageContext.tsx
export const languages = {
en: { name: 'English', dir: 'ltr' },
fr: { name: 'Français', dir: 'ltr' },
es: { name: 'Español', dir: 'ltr' },
ar: { name: 'العربية', dir: 'rtl' },
de: { name: 'Deutsch', dir: 'ltr' },
hi: { name: 'हिन्दी', dir: 'ltr' },
pt: { name: 'Português', dir: 'ltr' },
zh: { name: '中文', dir: 'ltr' },
// ... 10 more languages
} as const;
Developer Experience: Building and Extending Kostudy
Easy Setup and Development
Getting started with Kostudy is straightforward:
git clone https://github.com/youssef-imlyhen/kostudy.git
cd kostudy
npm install
npm run dev
The project uses Vite for fast development and hot module replacement, making the development experience smooth and efficient.
Customization Through Configuration
Kostudy is designed to be easily customizable without requiring code changes:
// src/config.ts
export interface AppConfig {
appName: string;
theme: string;
primaryColor: string;
quizFeatures: {
enableMultipleChoice: boolean;
enableTrueFalse: boolean;
enableFillInTheBlank: boolean;
// ... other features
};
aiFeatures?: {
enableAIGeneration?: boolean;
geminiApiKey?: string;
};
}
Extensibility
The modular architecture makes it easy to add new features:
-
New Question Types: Extend the
Questiontype and add corresponding display components -
New AI Features: Implement new services in the
services/directory -
New UI Components: Add components to the
components/directory -
New Learning Modes: Create new screens in the
screens/directory
Deployment and Scaling
Kostudy is built as a static site, making it easy to deploy anywhere:
- Netlify: One-click deployment with automatic builds
- Vercel: Seamless integration with GitHub
- GitHub Pages: Free hosting with GitHub Actions
- Self-hosted: Build and deploy to any static hosting provider
# Production build
npm run build
# Preview locally
npm run preview
Performance and Optimization
Kostudy incorporates several performance optimizations:
- Code Splitting: React.lazy and Suspense for route-based code splitting
- Image Optimization: Proper handling of media files with base64 encoding and file uploads
- Bundle Optimization: Vite's built-in optimizations for production builds
- Caching: localStorage for user progress and preferences
- Lazy Loading: Components and data loaded only when needed
Future Roadmap
Kostudy is under active development with exciting features planned:
- More AI Providers: Support for local AI models (llama.cpp, Ollama, LM Studio)
- Spaced Repetition: Integration of learning science principles for long-term retention
- Enhanced Onboarding: Guided setup flows and templates for common use cases
- Expanded Import/Export: Additional formats and better validation
- Accessibility Improvements: Full a11y compliance and performance optimizations
Conclusion: The Future of AI-Powered Learning
Kostudy represents a significant step forward in educational technology. By putting AI at the center of the learning experience and providing rich context awareness, it offers a more personalized and engaging approach to learning than traditional apps.
Whether you're a student looking to enhance your study sessions, a teacher creating custom learning materials, or a developer interested in educational technology, Kostudy provides a powerful platform to explore new possibilities in AI-powered learning.
The project is open-source and welcomes contributions. If you're interested in helping shape the future of education technology, check out the repository on GitHub and consider contributing.
Try Kostudy Today
Ready to transform your learning experience? Visit kostudy.netlify.app to try the live demo, or check out the GitHub repository to run it locally or contribute to the project.
The future of learning is here – and it's powered by AI.
This content originally appeared on DEV Community and was authored by youssef-imlyhen
youssef-imlyhen | Sciencx (2025-08-25T19:13:04+00:00) I built Kostudy – An AI-first, fully-featured, open source, universal education web app. Retrieved from https://www.scien.cx/2025/08/25/i-built-kostudy-an-ai-first-fully-featured-open-source-universal-education-web-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.