Building Nexus AI (formerly DTU Helper) was an exciting journey of integrating cutting-edge AI agents with a polished, modern web interface. However, bridging the gap between raw AI capabilities and a seamless user experience presented several unique technical hurdles.

1. Asynchronous AI Agent Orchestration
   The Hurdle:
   Integrating the OnDemand Media API for YouTube transcription wasn't a simple request-response flow. The transcription process is asynchronous and time-consuming. Our initial implementation failed because the frontend would timeout waiting for the agent to "watch" and transcribe long lecture videos.

The Solution:
We implemented a robust Command-Query pattern in our Next.js backend.

Submit: The backend submits the job and immediately receives a fileId.
Poll: We built a polling mechanism that checks the actionStatus of the job every few seconds.
Retrieve: Only once the status is completed do we fetch the extractedTextUrl. This decoupled the user interface from the processing logic, allowing us to show a "Transcribing..." state without blocking the application.
2. Public Asset Handling for AI Vision
The Hurdle:
For the Timetable Analysis feature, we needed to pass user-uploaded images to the OnDemand Agent. However, the agent's API requires a publicly accessible URL to process images. Since we were developing locally (localhost), the agent couldn't access the files stored on the user's machine.

3. Theming & Visibility in User Interface
   The Hurdle:
   Rebranding to Nexus AI involves adding a comprehensive Light Mode. Our initial design relied heavily on "Glassmorphism" (semi-transparent backgrounds with blur). While this looked stunning in Dark Mode, it rendered text invisible (white-on-white) in Light Mode, and the glass effect looked "dirty" or washed out against a white background.

The Solution:
We architected a Semantic CSS Variable System.

Instead of hardcoding colors, we defined tokens like --bg-primary, --text-secondary, and --glass-border.
We implemented a
ThemeProvider
that injects these variables based on the user's preference.
Crucially, we added Light Mode Overrides. In light mode, we switched from "Glass" to "Solid/Clean" aesthetics—using opaque white backgrounds with subtle shadows—ensuring the app looks premium and readable in any lighting condition.
4. Enabling High-Performance Animations
The Hurdle:
We wanted the dashboard to feel "alive" with hover effects, magnetic buttons, and smooth entry animations. However, our initial codebase used heavy Inline Styles (e.g., style={{ ... }}), which restricted our ability to use CSS pseudo-classes like :hover and media queries for responsiveness.

The Solution:
We refactored the entire dashboard to use CSS Modules.

This allowed us to write performant, compiled CSS classes.
We could then implement complex animations (like the "card lift" and "button glow" effects) using pure CSS, keeping the JavaScript thread free for logic and ensuring a buttery-smooth 60fps experience.

Seamless Auth0 Integration with Next.js: Detailed the conflict between standard window.history navigation and Next.js's router, and how we solved it with a custom Auth0ProviderWithNavigate wrapper to prevent page reloads.
Chatbot Streaming Stability ("Duplicate Key" Glitch): Explained the issue where streaming tokens caused React to lose state (flickering UI), and how we fixed it by enforcing unique UUIDs for messages instead of using array indices.