DEV Community: Lucas Chabrera Querol

When AI Gets Stuck in a Loop: A CSS Nightmare and Lessons Learned

Lucas Chabrera Querol — Fri, 18 Jul 2025 10:19:39 +0000

Ever had an AI model tell you "Now I see the problem!" for three days straight? Let me tell you about my recent adventure with Aura, my financial analysis app, and how a simple CSS centering issue turned into an unexpected lesson about AI limitations.
The Initial Problem
I needed to center content when a sidebar was expanded. Sounds simple, right?
The problematic initial code:
.chat-container.sidebar-expanded {
margin-left: 280px;
width: calc(100vw - 280px);
}
The AI's Descent into Complexity
Day after day, the model (Claude-3.5-Sonnet) kept suggesting increasingly complex solutions:
The AI's spiral into complexity:
const calculateSidebarOffset = () => {
const viewportWidth = window.innerWidth;
const sidebarWidth = 280px;
const contentMaxWidth = 800;
const availableSpace = viewportWidth - sidebarWidth;
const optimalPadding = Math.max(20, availableSpace * 0.05);
// This went on and on...
}
Every time I asked for help, the response was: "Ah, NOW I see the problem!" Spoiler alert: it didn't.
The Three-Day Battle
Day 1: Simple calculations
.content {
margin-left: calc((100vw - 280px - 800px) / 2);
}
Day 2: Complex JavaScript solutions
const centerContent = () => {
const sidebar = document.querySelector('.sidebar');
const content = document.querySelector('.content');
// Pages of calculations followed
}
Day 3: Desperate measures
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
recalculateEverything(); // Pure desperation
});
}, []);
The Breaking Point
Would you risk changing your AI model mid-project to solve something like this? The reality is that it couldn't center the content because it failed to properly calculate screen distances with an open sidebar. Even after:

Providing full context
Restarting CURSOR
Waiting days
Multiple approaches
The "Solution"
The AI finally suggested hiding the sidebar and sold it as a brilliant UX decision. Here's what actually worked:
The actual working solution:
.sidebar {
position: fixed;
width: 280px;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.content {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}
.messages-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
1 Technical Improvements Made
New Overlay Interface
ChatGPT/Gemini-style sidebar
Mobile-first approach
Finally centered content (after much suffering)
2 Backend Enhancements
Gemini 1.5 Flash integration
Robust anti-cache system
Better Excel/PDF handling
3 UX Optimizations
Intuitive suggestions
Smooth animations
Enhanced visual feedback
Lessons Learned About AI in Development
1 AI Loops Are Real
Models can get stuck in solution patterns
More complex ≠ better
Sometimes you need to step back
2 Trust Your Instincts
If a solution feels too complex, it probably is
AI can be convincing even when wrong
Simple solutions often work better
3 Model Limitations
Great for general problems
Can struggle with spatial/visual logic
May overcomplicate simple tasks
The Path Forward
I'm keeping the app in beta while I:
Gather more user feedback
Perfect the core features
Plan for pay-per-use model (no monthly subscriptions)
Technical Stack and Tools
React + TypeScript
CSS Modules
Gemini 1.5 API
CURSOR (AI coding assistant)
Cloud Run + Google Cloud Storage
Key Takeaways

AI models can be incredibly helpful but have clear limitations
Don't let AI convince you that complex solutions are better
Trust your developer instincts
Sometimes the "wrong" solution (hiding the sidebar) leads to better UX What's Next

More analysis models
Additional file format support
Premium features
Developer API Would love to hear your experiences with AI in development. Have you ever been stuck in an AI loop? How did you handle it?

Check it out: https://aura.vertex-flow.com

webdev #ai #programming #debugging #ux

Aura Financial: AI ethical tool to analyze Excel & PDFs for make better data-driven decisions.

Lucas Chabrera Querol — Tue, 08 Jul 2025 09:48:13 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

This is AURA, a new (and ethical) app for small companies and freelancers who want discover new scenarios for their excels and PDF. You will discover new decisions based in the data that you have in your Excel or PDF files. Developed, thought, designed and every detail that I have made was did with these tools:

AI Models Evolution:
Started with Claude Sonnet 3.5 - For initial development and architecture decisions
Implemented Google Gemini Pro - As the core financial analysis engine in the backend proxy
Used Claude Sonnet 4 - For advanced debugging, UX improvements, and code optimization
Multi-model approach - Leveraged different AI strengths: Claude for development, Gemini for financial domain expertise, ChatGPT, Google AI Studio and of course, with Cursor PRO.

What it does:

Upload Excel, CSV or PDF → get instant analysis.

Ask questions in plain English: “Where am I overspending?”, “What if I raise prices 10%?”

Generates automatic insights, projections & what-if scenarios.
Why? Financial analysis often costs thousands €, out of reach for small businesses. Aura wants to democratize it.
And for me, this is the most important part and every developer should be consider take part of it: Ethics first:

No storage, local processing.
Not available for defense companies or countries violating human rights.

Demo

My Experience

What I Learned:

User feedback beats assumptions - I initially made UX recommendations without real data, highlighting the importance of user testing over theoretical "best practices".
Incremental improvements matter - Small fixes like scroll behavior and animation polish significantly impact user experience.
Cache management is critical - Proper file naming/hashing prevents deployment headaches and ensures users get updates.
Simplicity often wins - The overly complex "glassmorphism" thinking animation was confusing; clean, simple gradients worked better
What Was Surprising:
How much polish details matter - Users notice subtle things like scroll appearing during file uploads or thinking animations not showing properly
My own inconsistency - I contradicted my previous advice about UI patterns without solid justification, showing the importance of data-driven decisions.
Deployment complexity - Managing Google Cloud Storage, cache busting, and manual uploads requires more attention than expected
The iterative nature - We went through multiple animation versions before finding the right balance.

Technical Insights:
React useEffect dependencies matter for performance (scroll behavior)
CSS animation complexity doesn't equal better UX
Build pipeline optimization helps with cache invalidation
Error handling and loading states are crucial for production readiness
Process Learnings:
Beta-first approach is smart - get real user feedback before building advanced features
Version control and backups prevent lost work during rapid iterations
Clear communication about deployment processes saves time and confusion
Bottom line: Building a polished product requires attention to detail, user-centered thinking, and willingness to iterate based on real feedback rather than assumptions.

AURA BETA V2:
https://storage.googleapis.com/aura-financial-app/aura-complete.html

Feedback, feature ideas or questions are very welcome!
✉️ info@vertex-flow.com

Thanks for reading! 🚀

Aura Financial: AI tool to analyze Excel & PDFs for SMEs and freelancers

Lucas Chabrera Querol — Tue, 08 Jul 2025 08:21:35 +0000

Hey everyone!

I'm Lucas from Vertex (Spain) and I'm building Aura Financial, a web app to help small businesses, freelancers and startups make better data-driven decisions — even without finance expertise.

✨ What it does:

Upload Excel, CSV or PDF → get instant analysis.

Ask questions in plain English: “Where am I overspending?”, “What if I raise prices 10%?”

Generates automatic insights, projections & what-if scenarios.

💡 Why? Financial analysis often costs thousands €, out of reach for small businesses. Aura wants to democratize it.

Free Beta v2
https://storage.googleapis.com/aura-financial-app/aura-complete.html

Ethics first:

No storage, local processing.

Not available for defense companies or countries violating human rights.

Feedback, feature ideas or questions are very welcome!
✉️ info@vertex-flow.com

Thanks for reading! 🚀