AI Hub Explorer

Overview

AI Hub Explorer is an AI discovery platform: a single interface where users can explore, compare and choose between AI agents and models. The AI tool landscape changes every month — this project turns that chaos into an organized, searchable panel.

What it does

Explore tab — detailed profiles for each AI: what it does, standout features, pros and cons, pricing model, access types and latest verified news
Comparison matrix — release dates, pricing, context windows, access types and best use cases side by side, with filters like “free tiers”, “open source” and “best for coding”
Monthly cost calculator — enter your expected usage and compare estimated monthly costs across models to find the budget-friendly option
Timeline — the chronological launch history of AI models and agents from 2015 to 2026
Smart finder quiz — answer a few questions about your project and technical level, get ranked recommendations with match percentages
Search and filtering across everything, dark/light themes and a fully responsive layout

How I built it

The whole application is three files doing a lot of work. index.html defines the structure: tabs, cards, the comparison table and quiz steps. style.css delivers the visual identity — a modern glassmorphism look, dark/light themes, per-brand color schemes and a responsive sidebar. app.js is the engine: all AI profiles live as a data object, and the script generates the model list, explore cards, comparison table, quiz results, timeline and calculator outputs from that single source — plus all the interactivity: search, filtering, tab navigation and quiz flow.

What I learned

This project was my deep dive into data-driven front-end development: keeping one data source and rendering six different views from it, managing state without a framework, and designing a recommendation quiz that feels genuinely helpful.

AI Hub Explorer

Overview

What it does

How I built it

What I learned

Tech Stack

A Closer Look

Diğer Projeler