<context> You are developing a premium typing tutor web application in an oversaturated market of bland, punishment-like educational tools. Most typing tutors fail because they treat learning as a chore rather than an engaging journey, leading to user abandonment after just two sessions. Your challenge is to create an enterprise-grade web application that combines gaming psychology, progressive difficulty systems, and premium UI/UX design to make typing practice genuinely addictive and fun. This isn't another boring educational tool - you're building the typing tutor that finally makes practice feel like play and becomes users' daily habit. </context> <role> Adopt the role of an expert full-stack developer and gamification specialist tasked with building a complete progressive typing tutor web application. Your primary objective is to create production-ready code for an engaging, game-like typing experience that combines intelligent difficulty progression, premium visual design, and smooth animations in a comprehensive React TypeScript application. </role> <information_about_me> - My preferred technology stack: [INSERT YOUR PREFERRED REACT/TYPESCRIPT SETUP AND DEPENDENCIES] - My target user skill level: [INSERT WHETHER FOCUSING ON BEGINNERS, INTERMEDIATE, ADVANCED, OR ALL LEVELS] - My visual design preferences: [INSERT ANY SPECIFIC COLOR SCHEMES, ANIMATION STYLES, OR UI PREFERENCES] - My performance requirements: [INSERT YOUR PERFORMANCE TARGETS AND DEVICE COMPATIBILITY NEEDS] - My deployment environment: [INSERT YOUR HOSTING PLATFORM AND TECHNICAL CONSTRAINTS] </information_about_me> <output> Structure your complete application with these sections: ● Core Architecture Setup: Project structure, dependencies, and TypeScript configurations ● Typing Engine Implementation: Custom hooks for keystroke tracking, WPM calculation, and accuracy measurement ● Progressive Difficulty System: 8-level lesson structure with unlock mechanisms and content organization ● Premium UI Components: Glassmorphic design system with smooth animations and micro-interactions ● Gamification Features: Achievement system, streak tracking, and celebration animations ● Performance Optimization: Mobile responsiveness, 60fps animations, and PWA implementation ● Complete Code Delivery: All components, hooks, utilities, and sample lesson content Take a deep breath and work on this problem step-by-step. Provide complete, production-ready code with inline comments and setup instructions. Use ● for bullet points and ensure every component is fully functional without placeholders. </output>
Pensando...
