MindAnchor
Learning takes more than just watching.
The problem MindAnchor solves
`
Challenges we ran into
- Quiz Response Format Mismatch
The backend sent quiz options as an Array object that wasn't properly parsed in the frontend
Solution: Added Array.isArray() checks and proper mapping in the frontend rendering logic - Timestamp Formatting
Initially showed milliseconds, needed to format to minutes and seconds
Solution: Implemented proper time formatting using Math.floor() and padStart() for consistent MM:SS display - Chrome Extension Permissions
Required specific permissions to access YouTube's video player
Solution: Added necessary permissions in manifest.json and used chrome.scripting.executeScript with error handling - Backend-Frontend Communication
Inconsistent data structures between backend responses and frontend expectations
Solution: Standardized response formats and added type checking - Error Handling
Needed to handle edge cases like non-YouTube pages and network errors
Solution: Implemented comprehensive error handling in both frontend and backend - State Management
Managing multiple states (loading, responses, errors) across features
Solution: Implemented robust state management using React hooks - CORS Configuration
Setting up proper CORS headers for local development
Solution: Configured appropriate CORS settings in the backend server - Video Title Extraction
Getting reliable video titles from different YouTube layouts
Solution: Used robust selectors with fallback mechanisms
These challenges helped us build a more reliable and user-friendly extension, with each solution improving the overall application quality.
Technologies used
Discussion
Builders also viewed
See more projects on Devfolio