Current Learner App

The current production learner interface for MindTickle, providing an optimized experience for training consumption, progress tracking, and learning engagement.

🎯 Purpose

This app handles all current production learner functionality accessible at /learner/* routes. It's designed for end-users who consume training content, track their progress, and engage with learning materials. This is the stable, production-ready learner experience.

🌐 Access

• Development: http://localhost:3000
• Production: app.mindtickle.dev/learner/* (routed via next-gen learner app)

📋 Features

🏠 Learning Dashboard

• Path: /home
• Personalized learning dashboard
• Training recommendations
• Progress overview and achievements
• Quick access to ongoing training

📚 Training Modules

• Path: /training/*
• Interactive learning modules
• Training series progression
• Module completion tracking
• Learning path navigation

🎯 Coaching & Development

• Path: /coaching/*
• Coaching session management
• Feedback and performance reviews
• Skill development tracking
• One-on-one session scheduling

🚀 Development

Start Development Server

# From repository root
pnpm dev --filter learner

# Or from learner directory
cd apps/learner
pnpm dev

Build for Production

# From repository root
pnpm build --filter learner

# Or from learner directory  
cd apps/learner
pnpm build

Run Tests

cd apps/learner
pnpm test

Type Checking

cd apps/learner
pnpm typecheck

🏗️ Architecture

Routing Structure

/learner (root)
├── /home
│   └── index.tsx - Main learning dashboard
├── /training
│   ├── /modules
│   │   ├── /[id] - Individual module pages
│   │   └── index.tsx - Module overview
│   └── /series
│       ├── /[id] - Individual series pages
│       └── index.tsx - Series overview
└── /coaching
    └── /sessions
        └── index.tsx - Coaching sessions

Layout & Navigation

• Root Layout: /app/layout.tsx - Contains learner-specific header and sidebar
• Navigation: Learner-focused sidebar with progress indicators
• Styling: Tailwind CSS with learner-optimized themes and components

Key Components

• Progress Tracking: Visual progress indicators throughout the app
• Module Cards: Interactive cards for training content
• Series Navigation: Tab-based navigation for training series
• Learning Path: Visual representation of learning progression

🎨 User Experience

Design Principles

• Learning-First: Interface optimized for content consumption
• Progress Visibility: Clear indicators of completion and progress
• Minimal Distraction: Clean, focused interface for learning
• Mobile-Friendly: Responsive design for learning on any device

Key UI Patterns

• Module Grid: Grid layout for browsing training modules
• Series Tabs: Tab navigation for training series content
• Progress Bars: Visual progress indicators throughout
• Achievement Badges: Gamification elements for motivation

🔧 Configuration

Environment Variables

The app shares environment variables with the main application. Ensure .env.local is present in the app directory.

Next.js Configuration

• Port: 3002 (development)
• Build Output: .next/ directory
• TypeScript: Strict mode enabled
• Turborepo: Integrated for optimized builds

📦 Dependencies

Key External Dependencies

• Next.js 15.3.0
• React 19.1.0
• TypeScript 5.8.3
• Tailwind CSS 4.1.3

📊 Analytics & Tracking

Learning Analytics

• Module completion tracking
• Time spent on training
• Progress milestones
• Learning path analytics

Performance Metrics

• Engagement rates
• Completion rates
• User satisfaction scores
• Learning outcome measurements

🤝 Contributing

Adding New Features

1. Focus on learner experience - prioritize ease of use and learning effectiveness
2. Follow existing patterns for routing and component structure
3. Maintain consistency with the learner-focused design language
4. Test across devices - ensure mobile-first responsive design

Code Standards

• Follow the project's TypeScript configuration
• Use Tailwind CSS for styling with learner-specific themes
• Implement proper loading states for content
• Ensure accessibility for all learners

Testing Changes

1. Test the feature in isolation within current learner app
2. Verify routing works correctly from the next-gen learner app
3. Test learning flow and progress tracking
4. Validate mobile responsiveness and accessibility
5. Check performance with various content loads

Content Guidelines

• Clear Instructions: Provide clear guidance for learners
• Progress Feedback: Show progress and completion status
• Error Handling: Graceful handling of content loading issues
• Accessibility: Ensure content is accessible to all learners

---

For questions about learner functionality or user experience decisions, refer to the main repository documentation or the UX/learning design team.