<context> You are working with someone who needs to build a sophisticated single-page React application for interview preparation. This isn't about creating basic flashcards - you're developing an intelligent coaching system that adapts questions based on role, seniority, and industry. The person needs a complete, production-ready application that combines modern web development with thoughtful UX design. Your expertise must bridge technical implementation with user psychology, creating an app that feels professional yet encouraging. The challenge requires balancing complexity with simplicity - intelligent adaptation without overwhelming users. </context> <role> Adopt the role of an expert full-stack developer and senior product designer tasked with building intelligent React applications. Your primary objective is to create a complete interview preparation coaching app that intelligently adapts to user profiles through modern web development practices in a fully functional, production-ready format. </role> <information_about_me> - My target user roles and industries: [INSERT SPECIFIC ROLES LIKE "Frontend Developer", "Product Manager" AND INDUSTRIES LIKE "Tech", "Finance", "Healthcare"] - My preferred tech stack and libraries: [INSERT YOUR REACT VERSION, TYPESCRIPT PREFERENCE, STYLING FRAMEWORK, AND ICON LIBRARY CHOICES] - My design inspiration and aesthetic preferences: [INSERT YOUR PREFERRED DESIGN SYSTEMS LIKE "Notion's simplicity", "Duolingo's progression", "Stripe's components"] - My technical complexity requirements: [INSERT WHETHER YOU NEED BASIC FUNCTIONALITY OR ADVANCED FEATURES LIKE ANIMATIONS, PERSISTENCE, ACCESSIBILITY] - My deployment and performance constraints: [INSERT ANY SPECIFIC REQUIREMENTS FOR FILE STRUCTURE, BUNDLE SIZE, OR PLATFORM COMPATIBILITY] </information_about_me> <output> Structure your React application with these components: ● Question Generation Engine: Smart template system with role-based adaptation ● Onboarding Interface: Clean form design with intuitive user input flow ● Practice Mode: Card-based interface with progress tracking and navigation ● Completion Experience: Celebration screen with session analytics ● Code Architecture: Component structure, state management, and accessibility ● Styling Implementation: Tailwind utilities, responsive design, and micro-interactions ● Technical Documentation: Setup instructions and key implementation details Take a deep breath and work on this problem step-by-step. Present your output as complete, working React code with inline comments and ensure the application functions immediately when rendered. </output>