nextjs react typescript tailwindcss prisma postgresql vercel ai stripe i18n knowledge-training spaced-repetition personal-learning dataset-creation webapp
MindStack is a personal knowledge training platform that helps you turn your own expertise into repeatable, AI-assisted learning systems. Built with Next.js 15, it combines in-place editing, duplicate detection, and generation control to create high-quality training datasets from your work materials, study subjects, or technical references.
Unlike generic memory training apps, MindStack emphasizes you control the workflow—from initial idea through AI-assisted generation to final approved training content. The platform provides structured hierarchy (Categories → Topics → Questions → Answers), privacy-first design, and multi-language support for creating personal or shareable knowledge bases.
The Vision: Turn Your Knowledge Into Repeatable Trainings
MindStack was built around a core principle: your knowledge deserves better than generic flashcards. Instead of using pre-made courses, you build personal training systems from your real materials. The platform balances powerful AI assistance with complete user control:
- Create from your own data – Work documents, study notes, technical docs, or any subject matter
- Generate with AI, approve manually – AI drafts questions and answers, but nothing saves without your explicit approval
- Maintain quality with smart tools – Duplicate detection, in-place editing, and structured workflows keep datasets clean
- Train effectively with spaced repetition – Practice what matters with algorithms that adapt to your performance
The result is a platform that feels like a personal knowledge assistant—helping you capture, structure, and master your own expertise.
Technical Architecture: Modern Stack for Personal Learning
The Core Stack
- Next.js 15 with App Router—Server components for optimal performance and SEO
- TypeScript—Full type safety across frontend, backend, and database layers
- Prisma + PostgreSQL—Type-safe database operations with complex topic-question-answer hierarchies
- Tailwind CSS + Radix UI—Accessible, consistent design system with dark mode support
- React Query + Zustand—Efficient server state management and client-side stores
- Cloudflare Workers AI + GigaChat—Multi-provider AI generation with fallback mechanisms
Database Design for Learning Hierarchies
Modeling personal knowledge required careful schema design:
- Hierarchical structure: Categories contain Topics, which contain Questions, which have multiple Answers
- Privacy controls: Each topic has public/private visibility settings
- Multilingual support: Content language tracking for filtering and discovery
- Performance tracking: Workout history with timestamped results and spaced repetition data
- User ownership: Clear relationships between creators, topics, and generated content
Feature Highlights
1. In-Place Editing with HeadlessEditor
Editing shouldn’t require modal dialogs or context switches. The HeadlessEditor provides:
- Rich text formatting (bold, lists, code blocks, links)
- Drag-and-drop reordering of questions and answers
- Real-time preview of changes
- GitHub Flavored Markdown support
- Keyboard shortcuts for power users
Benefit: Reduces friction in the refinement process, making it easy to iterate on content quality.
2. AI Generation with Full Control
AI assists but never replaces your judgment. The generation workflow:
- Provide a brief description of what you want to cover
- AI generates draft questions and answers
- Review each item individually:
- ✅ Approve to save to your topic
- ✏️ Edit before approving
- 🔄 Regenerate if unsatisfied
- ❌ Delete irrelevant items
- Only approved items are saved to your database
Key difference: Generated content stays in «draft» mode until you explicitly approve it. You maintain full editorial control.
3. Duplicate Detection (Beta)
When adding or generating new questions, MindStack compares them against existing items:
- Uses n-gram similarity algorithms with multilingual lemmatization
- Flags items with ≥25% similarity score
- Shows you potential duplicates before saving
- You decide: merge, rephrase, or keep both
Current limitations: Detects lexical similarity (same/similar words), not semantic meaning (same idea, different words). Improvements planned with vector embeddings.
4. Privacy-First Design
Your knowledge is yours unless you choose to share:
- Private by default – New topics are only visible to you
- Optional sharing – Make topics public to contribute to the community
- Change anytime – Toggle privacy settings as needed
- Ideal for sensitive content – Work materials, proprietary knowledge, personal notes
Use cases for private topics:
- Job-related training materials
- Proprietary technical knowledge
- Personal study notes
- Sensitive subject matter
5. Multi-Language Support
MindStack supports global users from day one:
- Interface translations: English, Russian, Spanish
- Content language tracking per topic
- Filter trainings by preferred language
- AI generation in supported languages
- Easy addition of new interface languages
Perfect for language learners or studying materials in different languages.
6. Structured Organization
Keep your knowledge base manageable at any scale:
Categories (broad subjects)
└─ Topics (specific areas within categories)
└─ Questions (individual queries)
└─ Answers (one or more per question)
Example:
Programming Languages
└─ Python Basics
├─ What is a list comprehension?
│ └─ A concise way to create lists in Python...
└─ How do you handle exceptions?
└─ Using try-except blocks...
This hierarchy works whether you have 10 or 1000 items.
Development Insights
Internationalization Architecture
Built i18n from the ground up with next-intl:
- Server-side locale detection
- Client-side language switching
- All UI elements translatable via JSON files
- Category names and system messages fully localized
- Easy to add new languages (just add JSON file)
Performance Optimizations
- Image optimization: Next.js Image component with automatic format selection and lazy loading
- Database indexing: Strategic indexes on frequently queried fields (user_id, category_id, language)
- Caching strategy: React Query for server state with automatic refetching, Zustand for client state
- Code splitting: Dynamic imports for heavy components (workout engine, editors)
- PWA capabilities: Offline training sessions with service worker caching
Authentication Flexibility
Multiple login options for different user preferences:
- OAuth providers: Google, GitHub, Yandex
- OTP methods: Email verification codes, Telegram bot authentication
- Guest access: Browse public topics without account (limited functionality)
Payment System Integration
Global monetization requires regional payment support:
- Stripe for international users (credit cards, Apple Pay, Google Pay)
- YooMoney for Russian market (local cards, Sberbank Online, Tinkoff)
- Subscription management: Monthly/annual billing, prorated upgrades/downgrades
- Webhook handling: Robust payment confirmation and cancellation processing
Technical Challenges Overcome
1. Nested Data Operations with Prisma
Creating/updating topics with nested questions and answers required careful Prisma usage:
- Filter out temporary IDs before submission
- Use
includeto fetch real IDs after creation - Map temporary IDs to real IDs for frontend updates
- Incremental updates: combine
deleteMany,create, andupdatein single calls - Avoid full delete-recreate to preserve answer IDs and improve performance
2. State Management Complexity
Between workout state, editor state, user preferences, and real-time updates:
- React Query: Server state with caching, background refetching, request aborting
- Zustand: Client state for UI interactions and temporary data
- Context API: Theme, locale, authentication state
- Custom hooks: Encapsulate complex logic (useHeadlessEditorState, useWorkoutSession)
3. Spaced Repetition Algorithm
Implementing effective learning schedules:
- Track answer accuracy and response time
- Calculate optimal review intervals based on performance
- Adjust difficulty dynamically
- Handle edge cases (long gaps, rapid success/failure streaks)
- Store workout history for analytics
4. Deployment Pipeline
Multi-environment setup with database migrations:
- Automated migrations with rollback support
- Environment-specific configuration (dev, staging, production)
- Health checks and error monitoring
- Zero-downtime deployments on Vercel
The Results
At its core, MindStack delivers on its promise:
- Personal-first approach – Create from your own knowledge, not generic courses
- Generation control – Review and approve every AI-generated item
- Quality maintenance – Duplicate detection and in-place editing keep datasets clean
- Privacy by default – Your data stays private unless you choose to share
- Structured hierarchy – Organized knowledge that scales from 10 to 1000+ items
The application handles everything from AI content generation to complex payment processing, all while maintaining focus on what matters: helping you capture and master your own expertise.
Lessons Learned
- Positioning matters – Clear value proposition («turn your knowledge into trainings») resonates more than generic features
- Control builds trust – Users want AI assistance, not AI automation. Always let them review and approve
- Start with i18n – Adding languages later is exponentially harder
- Type everything – TypeScript caught countless bugs in nested data structures
- Design for extension – Payment system needed to handle unexpected regional requirements
- Document beta features – Be honest about limitations (duplicate detection) and future plans
What’s Next
The foundation is solid, with exciting features planned:
- Mobile app with offline support for training on the go
- Advanced analytics with visualizations and personalized recommendations
- Collaborative features for team knowledge bases
- Vector similarity search for improved duplicate detection
- API access for programmatic topic management
- Community challenges and social learning features
Try It Yourself
- Live Application: https://mindstack.lilliputten.com/
- Vercel Deployment: https://mind-stack-trainer.vercel.app/
- GitHub Repository: https://github.com/lilliputten/mindstack/
- Documentation: https://mindstack.lilliputten.com/docs
Technologies: Next.js 15, React, TypeScript, Tailwind CSS, Prisma, PostgreSQL, Cloudflare Workers AI, GigaChat, Stripe, YooMoney, Radix UI, React Query, Zustand, next-intl
Role: Full-stack development, architecture design, AI integration, payment systems, internationalization
Timeline: Autumn 2025 – Present (ongoing development)