feat: improve InterviewGenerator mobile responsiveness

Author: drumnation

.brain/directory-structure.md

@@ -0,0 +1,77 @@
+```md
+# AI-Native Interview Challenge: AI/ML Engineer
+
+## Overview
+
+In this challenge, you'll design and implement a feature powered by Language Model (LLM) that provides personalized recommendations for users. This is a pair-programming exercise designed to assess your familiarity with AI/ML, particularly in the context of natural language processing and recommendation systems.
+
+### Context
+
+You're working on an e-commerce platform that wants to enhance user experience through personalized recommendations. Your task is to develop an LLM-powered feature that generates product recommendations based on users' browsing history and past purchases.
+
+### Challenge Parameters
+- **AI Maturity Level:** Expert
+- **Format:** Pair-Programming
+- **Time Limit:** 2 Hours
+- **AI Tools Allowed:** No
+- **Team AI Fluency:** Expert
+
+## Challenge Description
+
+In a pair-programming session, you'll design and implement a rough prototype of the recommendation system. The system should:
+
+1. Use an LLM to analyze users' browsing history and past purchases.
+2. Generate product recommendations based on the LLM's analysis.
+3. Explain why each product was recommended.
+
+## Implementation Requirements
+
+- Use Python for the implementation.
+- Create a basic data structure to represent users' browsing history and past purchases.
+- Implement an LLM using a library of your choice (e.g., Hugging Face's Transformers).
+- Generate a list of product recommendations based on the LLM's analysis.
+- Provide a brief explanation for each recommendation (e.g., "Recommended because you've shown interest in similar products").
+
+## Evaluation Rubric
+
+### Technical Implementation (40%)
+- **Excellent (35-40)**: The recommendation system is complete, efficient, and uses advanced techniques to improve accuracy. The code is exceptionally clean, well-structured, and follows best practices.
+- **Good (25-34)**: The recommendation system is mostly complete and works well, with a few minor improvements that could be made. The code is clean, well-organized, and follows good practices.
+- **Satisfactory (15-24)**: The recommendation system is functional but could be improved in several ways. The code is decent but shows areas for improvement in terms of organization and best practices.
+- **Needs Improvement (0-14)**: The recommendation system is incomplete or has significant issues. The code is messy and does not follow best practices.
+
+### AI Integration & Workflow (30%)
+- **Excellent (25-30)**: The LLM is integrated effectively and plays a crucial role in the recommendation system. The candidate demonstrates a deep understanding of NLP and how to use LLMs to generate meaningful recommendations.
+- **Good (18-24)**: The LLM is integrated well and contributes to the recommendation system. The candidate shows a good understanding of NLP and LLMs, but there may be minor areas for improvement.
+- **Satisfactory (10-17)**: The LLM is integrated into the recommendation system, but its role could be enhanced. The candidate understands the basics of NLP and LLMs but lacks depth in their knowledge.
+- **Needs Improvement (0-9)**: The integration of the LLM into the recommendation system is poor or non-existent. The candidate does not demonstrate a sufficient understanding of NLP or LLMs.
+
+### Communication & Documentation (30%)
+- **Excellent (25-30)**: The candidate communicates their ideas clearly and effectively. They provide excellent documentation for their code, explaining their design decisions and the workings of the LLM.
+- **Good (18-24)**: The candidate communicates well and provides good documentation for their code. They explain most of their design decisions and the basics of the LLM.
+- **Satisfactory (10-17)**: The candidate communicates adequately but could improve in clarity or detail. Their documentation covers the basics but could be more comprehensive.
+- **Needs Improvement (0-9)**: The candidate struggles to communicate their ideas effectively. Their documentation is lacking in detail or clarity.
+
+## Interviewer Notes
+
+### Key Questions to Ask
+
+1. "Why did you choose this particular LLM for the task?"
+2. "How did you decide what data to feed into the LLM for analysis?"
+3. "What was your strategy for generating product recommendations based on the LLM's analysis?"
+4. "How would you improve this recommendation system if you had more time?"
+
+### Red Flags
+
+- Difficulty explaining their own code.
+- Poor understanding of NLP or LLMs.
+- Unable to justify their design decisions.
+- Inability to generate meaningful product recommendations.
+
+### Green Flags
+
+- Clear and thorough explanation of their code.
+- Deep understanding of NLP and LLMs.
+- Well-thought-out design decisions.
+- Ability to generate meaningful, personalized product recommendations.
+```

.interviews/roles/ai-ml-engineer-2025-05-06T17-24-21-337Z.md

@@ -0,0 +1,77 @@
+```md
+# AI-Native Interview Challenge: AI/ML Engineer
+
+## Overview
+
+In this challenge, you will design an architecture for a real-time collaboration tool that needs to handle concurrent edits and maintain data consistency across clients. This will involve understanding and applying concepts related to distributed systems, data synchronization, and conflict resolution. This challenge is designed for an AI/ML Engineer role with a focus on web-frontend.
+
+### Context
+
+Your team is building a real-time collaboration tool similar to Google Docs. Real-time collaboration is a key feature, and your architecture must be able to handle concurrent edits and keep data consistent across all clients.
+
+### Challenge Parameters
+- **AI Maturity Level:** Beginner
+- **Format:** Architecture Review
+- **Time Limit:** 4 Hours
+- **AI Tools Allowed:** No
+- **Team AI Fluency:** Expert
+
+## Challenge Description
+
+Your task is to propose an architecture for the real-time collaborative editor. The architecture should:
+
+- Allow multiple users to edit the same document concurrently
+- Maintain consistency across all clients
+- Handle conflicts when they occur
+- Be scalable for a large number of users
+
+## Implementation Requirements
+
+- The architecture should include both frontend and backend components
+- You should consider how to handle network latency and intermittent connections
+- You should indicate how your system will handle conflict resolution
+- You should provide a high-level overview of how data flows through your system
+
+## Evaluation Rubric
+
+### Technical Implementation (40%)
+- **Excellent (35-40)**: Proposes a clear, detailed, and well-justified architecture that covers all requirements. Demonstrates deep understanding of distributed systems and real-time collaboration.
+- **Good (25-34)**: Proposes a solid architecture that covers most requirements and demonstrates understanding of the major challenges in real-time collaboration.
+- **Satisfactory (15-24)**: Proposes a basic architecture that meets some requirements but lacks details or justification in certain areas.
+- **Needs Improvement (0-14)**: Fails to propose a coherent architecture or misses key requirements.
+
+### AI Integration & Workflow (30%)
+- **Excellent (25-30)**: N/A (AI tools not allowed for this challenge)
+- **Good (18-24)**: N/A (AI tools not allowed for this challenge)
+- **Satisfactory (10-17)**: N/A (AI tools not allowed for this challenge)
+- **Needs Improvement (0-9)**: N/A (AI tools not allowed for this challenge)
+
+### Communication & Documentation (30%)
+- **Excellent (25-30)**: Presents architecture in a clear, logical manner with excellent diagrams and explanations. Justifies all major decisions convincingly.
+- **Good (18-24)**: Presents architecture clearly with good diagrams and explanations. Justifies most major decisions.
+- **Satisfactory (10-17)**: Presents a basic overview of architecture but lacks details or clear explanations in some areas.
+- **Needs Improvement (0-9)**: Fails to communicate architecture effectively or lacks major details.
+
+## Interviewer Notes
+
+### Key Questions to Ask
+
+1. "Explain how your architecture handles concurrent edits. What happens if two users edit the same part of the document at the same time?"
+2. "How does your system maintain consistency across all clients? What happens if a client loses connection and then reconnects?"
+3. "What considerations did you make for scalability? How would your system handle a large number of users?"
+4. "If you could change anything about your proposed architecture, what would it be and why?"
+
+### Red Flags
+
+- Unable to explain how their architecture handles concurrency or consistency
+- Doesn't consider network latency or intermittent connections
+- Doesn't have a clear strategy for conflict resolution
+- Architecture is not scalable or lacks components necessary for a real-time collaboration tool
+
+### Green Flags
+
+- Clear, detailed, and well-justified architecture
+- Demonstrates deep understanding of distributed systems and real-time collaboration
+- Considers all major challenges including concurrency, consistency, conflict resolution, and scalability
+- Able to discuss potential improvements or alternatives to their proposed architecture
+```

.interviews/roles/ai-ml-engineer-2025-05-06T18-11-31-529Z.md

@@ -0,0 +1,81 @@
+```md
+# AI-Native Interview Challenge: AI/ML Engineer
+
+## Overview
+
+This challenge involves designing and implementing a mobile-based machine learning model to provide real-time sentiment analysis of user reviews. This task will test your ability to develop AI/ML solutions that can operate effectively in a mobile environment.
+
+### Context
+
+You are part of a team developing a cross-platform application that needs to work consistently across web, mobile, and desktop environments. One of the key features of this application is a real-time sentiment analysis tool that provides immediate feedback on user reviews.
+
+### Challenge Parameters
+- **AI Maturity Level:** Expert
+- **Format:** Take-home Challenge
+- **Time Limit:** 8 Hours
+- **AI Tools Allowed:** No
+- **Team AI Fluency:** Familiar
+
+## Challenge Description
+
+Design and implement a machine learning model that performs sentiment analysis on user reviews in real time. The model should be lightweight enough to run on mobile devices and should be able to handle a high volume of reviews.
+
+The key tasks include:
+
+1. Preprocessing and transforming the review data for model training.
+2. Creating a machine learning model that can accurately classify the sentiment of a review as positive, negative, or neutral.
+3. Implementing the model in a mobile environment, ensuring it can perform in real time.
+4. Setting up a monitoring system to track the model's performance over time.
+
+## Implementation Requirements
+
+- Use a mobile-compatible machine learning framework.
+- Implement an appropriate data preprocessing pipeline.
+- Ensure the model can handle a high volume of reviews in real time.
+- Set up a system to monitor model performance.
+- Write clean, maintainable, and well-documented code.
+
+## Evaluation Rubric
+
+### Technical Implementation (40%)
+- **Excellent (35-40)**: Complete implementation with advanced features like efficient data processing, highly accurate model, and comprehensive monitoring system. Code is exceptionally clean, well-structured, and follows best practices.
+- **Good (25-34)**: Solid implementation with all core features working well. Code is clean, well-organized, and follows good practices.
+- **Satisfactory (15-24)**: Basic implementation with core functionality working. Some areas could be improved for cleaner code or better organization.
+- **Needs Improvement (0-14)**: Incomplete implementation or significant issues with core functionality. Code structure and organization need substantial improvement.
+
+### AI/ML Design & Workflow (30%)
+- **Excellent (25-30)**: Sophisticated AI/ML design that delivers high performance. Demonstrates deep understanding of AI/ML principles and shows evidence of effective strategy in model design, training, and implementation.
+- **Good (18-24)**: Effective AI/ML design that delivers good performance. Shows understanding of AI/ML principles and effective strategy in model design, training, and implementation.
+- **Satisfactory (10-17)**: Basic AI/ML design that delivers satisfactory performance. Some understanding of AI/ML principles and basic strategy in model design, training, and implementation.
+- **Needs Improvement (0-9)**: Ineffective AI/ML design or over-reliance on default settings without understanding. Code shows signs of lack of understanding of AI/ML principles and ineffective strategy in model design, training, and implementation.
+
+### Communication & Documentation (30%)
+- **Excellent (25-30)**: Exceptional documentation explaining design decisions, data preprocessing, model architecture, and monitoring strategy. Includes detailed README, inline comments where appropriate, and clear commit messages.
+- **Good (18-24)**: Good documentation with clear README and explanation of major design decisions. Some discussion of data preprocessing, model architecture, and monitoring strategy.
+- **Satisfactory (10-17)**: Basic documentation that covers setup and usage but lacks depth on design decisions or AI/ML workflow.
+- **Needs Improvement (0-9)**: Minimal or missing documentation. Hard to understand code structure or design decisions.
+
+## Interviewer Notes
+
+### Key Questions to Ask
+
+1. "Can you explain your choice of machine learning model and how it is suited to this task?"
+2. "What strategies did you use for preprocessing the review data, and why?"
+3. "How did you ensure that the model can handle a high volume of reviews in real time?"
+4. "Tell me about the monitoring system you set up. What performance metrics did you focus on, and why?"
+5. "If you had more time, what improvements or enhancements would you make?"
+
+### Red Flags
+
+- Unable to explain their choice of machine learning model or preprocessing strategy.
+- Did not consider the constraints of a mobile environment.
+- No system in place to monitor model performance.
+- Poor coding practices or lack of documentation.
+
+### Green Flags
+
+- Clear and thoughtful explanation of machine learning model choice and preprocessing strategy.
+- Demonstrates understanding of the unique constraints and challenges of a mobile environment.
+- Implemented a robust system to monitor model performance.
+- Clean, well-structured code with comprehensive documentation.
+```

.interviews/roles/ai-ml-engineer-2025-05-06T20-52-03-501Z.md

@@ -0,0 +1,80 @@
+```md
+# AI-Native Interview Challenge: Cloud Solutions Architect
+
+## Overview
+
+Design a scalable and efficient cloud architecture for a mobile, customer-facing dashboard for a SaaS product that visualizes analytic data and allows users to create custom reports. This challenge evaluates your ability to design robust cloud solutions considering factors such as scalability, security, and performance.
+
+### Challenge Parameters
+- **AI Maturity Level:** Intermediate
+- **Format:** Pair-programming
+- **Time Limit:** 2 Hours
+- **AI Tools Allowed:** No
+- **Team AI Fluency:** Novice
+
+## Challenge Description
+
+Design a cloud-based architecture for a mobile dashboard application that:
+
+1. Efficiently processes and displays large volumes of analytics data
+2. Allows users to create custom reports with various filters and parameters
+3. Ensures secure access to sensitive customer data
+4. Scales effortlessly to accommodate growing user base and data volume
+5. Includes a strategy for backup and disaster recovery
+
+## Implementation Requirements
+
+- Choose suitable cloud services/platform (AWS, Google Cloud, Azure, etc.)
+- Plan for efficient data storage and retrieval mechanisms
+- Include identity and access management for secure data handling
+- Implement strategies for load balancing and auto-scaling
+- Design a disaster recovery and backup strategy
+- Create a high-level diagram of the proposed architecture
+- Write an explanation of your design decisions, trade-offs, and potential improvements
+
+## Evaluation Rubric
+
+### Technical Implementation (40%)
+- **Excellent (35-40)**: Comprehensive and efficient architecture design with well-thought-out decisions, clear trade-off analysis, and advanced features such as auto-scaling, load balancing, and disaster recovery mechanisms. 
+- **Good (25-34)**: Solid architecture design with key components well implemented. Some trade-off analysis and features such as auto-scaling or disaster recovery.
+- **Satisfactory (15-24)**: Basic architecture design with necessary components. Limited trade-off analysis and lacks advanced features.
+- **Needs Improvement (0-14)**: Incomplete or inefficient architecture design. Important components missing or improperly implemented.
+
+### AI Integration & Workflow (30%)
+- **Excellent (25-30)**: N/A (AI tools are not allowed in this challenge)
+- **Good (18-24)**: N/A
+- **Satisfactory (10-17)**: N/A
+- **Needs Improvement (0-9)**: N/A
+
+### Communication & Documentation (30%)
+- **Excellent (25-30)**: Exceptional documentation that thoroughly explains design decisions, trade-offs, and potential improvements. Includes detailed diagrams and clear explanations of each component's role.
+- **Good (18-24)**: Good documentation with clear explanations and diagrams. Some discussion of design decisions and trade-offs.
+- **Satisfactory (10-17)**: Basic documentation that covers the main components and design decisions but lacks depth on trade-offs or potential improvements.
+- **Needs Improvement (0-9)**: Minimal or missing documentation. Hard to understand design decisions or component roles.
+
+## Interviewer Notes
+
+### Key Questions to Ask
+
+1. "Can you explain why you chose this specific cloud platform and services?"
+2. "How does your architecture ensure scalability as the user base and data volume grow?"
+3. "What are the security considerations in your design, especially concerning sensitive customer data?"
+4. "How have you planned for disaster recovery and backup in your architecture?"
+5. "What would you improve or add to this design if given more time?"
+
+### Red Flags
+
+- Overlooking important aspects like data security, scalability, or disaster recovery
+- Choosing inappropriate or inefficient cloud services for the requirements
+- Unable to justify or explain design decisions
+- Not considering trade-offs or potential improvements
+- Ignoring cost implications of the chosen services and architecture
+
+### Green Flags
+
+- Thoughtful selection of cloud services that align with the requirements
+- Consideration of security, scalability, and disaster recovery in the design
+- Clear justification for design decisions and awareness of trade-offs
+- Consideration of cost-effectiveness and efficiency in the design
+- Bonus points for suggesting potential improvements or additional features
+```