![[Your Name Here] Logo White](assets/img/logo/Logo-white.png){kind=logo}
AI Fix That For You is a sleek Generative AI application designed to be a Swiss Army knife for developers and creators. It aggregates nearly 40 distinct generative AI tools ranging from Text-to-Image Generators and Code Explainers to Video Clip Summarizer into a single ecosystem. AI Fix That For You is a live, interactive SaaS product, demonstrating the latest Generative AI capabilities via real-time API integration and persistent local state management without the overhead of a heavy backend.
“The primary goal was to create a fast, accessible, and user-friendly toolkit that boosts productivity. I prioritized speed by ensuring critical data processing happens locally, while using cutting-edge LLMs for generative tasks.”
The application architecture is built on a "Client-First" philosophy. By handling input processing, validation, and state management locally within the browser, AI Fix That For You offers instantaneous feedback. Heavy lifting for generative tasks is offloaded to the Google Gemini API via secure asynchronous calls, ensuring the user interface remains responsive and fluid even during complex AI operations.
Designed with scalability and maintainability in mind, the codebase eschews heavy frontend frameworks in favor of a modular Vanilla JavaScript architecture paired with Tailwind CSS. This demonstrates a mastery of core web fundamentals, as the application manages complex state such as user authentication, credits, and favorites without the crutch of React or Vue.
I built the architecture to be as maintainable as possible. By exporting reusable modules for things like authentication and API handling directly from site.js, I managed to keep the codebase dry across more than 30 HTML pages. It also means I can push global updates like changing a menu item in the navigation or footer instantly, since those components are injected dynamically at runtime rather than hardcoded into every static file.
For data, I took a practical approach. Quick, ephemeral stuff like credit usage or your dark mode preference lives in localStorage so it feels instant. But when it matters, like saving your "Favorites," the app syncs up with Firebase Firestore. I also implemented a custom CSS variable system for that dark mode; by defining semantic tokens like --color-bg-primary, the theme switching feels seamless and works perfectly alongside Tailwind.
One of my favorite optimizations is the mock-simulation layer I call getToolPresets. I didn't want to waste API credits or make users wait during simple demonstrations, so if you pick a sample input, the system completely bypasses the API. It simulates the processing time and returns a pre-generated, high-fidelity asset, so the user gets the full experience without the cost or the wait.
At the heart of AI Fix That For You is a robust integration with the Google Gemini 2.5 Flash model. I implemented a flexible API wrapper (callGeminiAPI) that handles multi-modal inputs. This allows users to not only generate text but also perform complex vision tasks, such as uploading a screenshot of code to the Code Explainer tool for instant debugging, or blending two images in the Style Blender.
The integration includes a custom "Credit System" logic. Each user starts with a finite number of credits stored locally. Every successful API call triggers a deduction function that updates the UI in real-time, simulating a production SaaS metering environment.
The project uses a modern, utility-first stack designed for speed and rapid iteration.
Semantic HTML structure styled with Tailwind for a responsive, mobile-first design system. Custom CSS variables in style.css handle complex theme switching logic.
Modern, modular JavaScript using ES Modules. Features async/await patterns for API calls, closures for state encapsulation, and extensive DOM manipulation.
Firebase Auth and Firestore provide user management and data persistence, while Google's Gemini API powers the generative AI capabilities.
Lucide provides a consistent SVG icon system, while Marked.js handles the rendering of Markdown output from the AI into clean, formatted HTML.
Developing AI Fix That For You presented unique technical hurdles, specifically regarding cross-origin resource sharing (CORS), managing asynchronous state across static pages, and optimizing large image payloads for the AI API.
Building a complex client-side application often reveals unique hurdles that standard server-side frameworks handle automatically. From managing persistent state across static pages to optimizing heavy computational tasks on the main thread, each obstacle provided an opportunity to deepen my understanding of browser mechanics and JavaScript optimization techniques.
site.js. The system detects if a user is utilizing sample inputs (like a default photo) and intercepts the API call. It then resolves the promise immediately with a pre-cached result URL, simulating a successful generation in milliseconds while maintaining the exact same UI flow as a live call.
loadHeader and loadFooter functions in site.js dynamically render the navigation DOM based on a centralized configuration array. This means adding a new tool requires updating a single JSON object, and changes propagate instantly across the entire suite.
style.css (e.g., --color-bg-secondary). These variables change values when the .dark class is applied to the HTML root. This abstraction allowed me to style complex, JavaScript-generated components (like the chat interface or file upload zones) without hardcoding Tailwind classes into the JavaScript logic.
setupImageUploader utility that handles the FileReader logic asynchronously. It includes validation steps to ensure images are optimized before transmission. Furthermore, the callGeminiAPI function is designed to handle multi-part content, seamlessly packaging the text prompt and image data into the specific JSON structure required by Google's Vision models.
By sticking to a "Client-Side First" architecture, I was able to deliver a tool that respects user privacy while providing the instant feedback developers need. This project not only sharpened my JavaScript skills but also proved that complex, AI-driven applications can be built without the complexity of heavy frontend frameworks.
