![[Your Name Here] Logo White](assets/img/logo/Logo-white.png){kind=logo}
LLM Dr. is a responsive, client-side application designed to aggregate and categorize the rapidly growing landscape of Artificial Intelligence software. Built as a high-performance static site, it allows users to explore 55 curated tools (and counting), filter them by price or rating, and manage a personalized "Wishlist" using local browser storage without the need for a backend database.
“The goal was to build a directory that feels instantaneous. By decoupling the data from a traditional database and serving it as a lightweight JSON structure, the site offers immediate search and filtering capabilities with zero latency.”
The application relies on a modular architecture where tool data is separated from the UI logic. This separation of concerns allows for easy scalability, adding a new tool is as simple as updating a single JavaScript object, which instantly propagates across the homepage, category pages, and search results.
The project uses Tailwind CSS for styling and Vanilla JavaScript for logic. The architecture eschews heavy frameworks in favor of direct DOM manipulation, resulting in a lightweight footprint and exceptional load speeds on mobile networks.
localStorage that saves user preferences.database_tools.js object.The tech stack was chosen for speed and simplicity. By using a CDN-based approach for libraries, the project maintains a low overhead while delivering a modern, app-like experience.
Utilized via CDN for rapid UI development, ensuring a fully responsive grid layout, typography consistency, and hover states without writing custom CSS files.
Core logic relies on ES6+ features. Functions like map, filter, and reduce handle the data processing, while document.createElement manages the view.
Implements a persistent state for the "Wishlist" feature, allowing users to favorite tools and see them retained across sessions without a backend.
Integrated for UI iconography, including social links, category indicators, and the interactive "heart" icons used for the wishlist toggles.
Developing the LLM Dr. website required solving logic puzzles related to client-side data filtering and efficient state management within the browser.
While static sites are fast, making them interactive requires careful planning. I had to ensure that the filtering logic was robust enough to handle multiple criteria simultaneously while keeping the DOM updates smooth.
FormData extraction. The logic checks if a filter group is empty (returning true) or if the item matches the selection, ensuring all active filters are respected.
database_tools.js file acting as a pseudo-database. A JavaScript function renderGrid() dynamically constructs the HTML for every card based on this data, ensuring consistency across the entire site.
localStorage to store an array of IDs. On every page load, the script checks this array and programmatically toggles the visual state (solid heart vs outline) of the relevant icons.
This project demonstrates how powerful a static site can be when leveraging modern JavaScript. It effectively mimics the functionality of a database-driven application while maintaining the security and performance benefits of client-side code.
