How I Built a Mood-Based Recommender with the Google Gemini API and JavaScript

#webdev

Hi everyone!

I'm excited to share Mood Recommender with you all.

The idea came from a simple, personal problem: spending way too much time deciding what to watch. I wanted to create a tool that could just "get" my mood and find something suitable without the hassle.

I decided to build it using the new Google Gemini API, which was a fantastic learning experience. The entire app is built with simple HTML, CSS, and JavaScript, making it super lightweight and fast.

I'd love for you to try it out and let me know what you think. All feedback is welcome as I plan to add more features in the future!

Thanks for your support!

Live Demo: https://noanynameforme.github.io/Mood-Recommender/
GitHub Repo: https://github.com/NoAnyNameForMe/Mood-Recommender

🌟 Overview

Mood Recommender is an intelligent web application that analyzes your current mood and provides personalized recommendations for movies, TV series, and music. Powered by Google Gemini AI, it understands your emotional state from text input and delivers tailored entertainment suggestions.

✨ Key Features

🧠 AI-Powered Mood Analysis - Leverages Google Gemini's advanced language model to understand emotions from text

🎭 Multi-Category Recommendations - Get suggestions for movies, TV series, and music all in one place

🌍 Bilingual Support - Fully functional in both English and Persian (فارسی)

🔍 Advanced Filtering - Filter results by year range and preferred genres

📊 Rich Media Integration - Displays posters, IMDb ratings, and trailer links via TMDB and OMDb APIs

🎵 Streaming Links - Direct links to Spotify, YouTube Music, and SoundCloud for music tracks

❤️ Favorites System - Save your favorite recommendations with local storage

📱 Responsive Design - Beautiful, modern UI that works seamlessly across all devices

🔒 Secure API Management - All API keys are securely managed through Cloudflare Workers

🛠️ Technology Stack

Frontend:

HTML5, CSS3 (Tailwind CSS)
Vanilla JavaScript (ES6 Modules)
Font Awesome Icons
Google Fonts

APIs & Services:

Google Gemini API (AI Analysis)
The Movie Database (TMDb) API
OMDb API (IMDb Integration)
iTunes Search API
ImgBB API (Image Hosting)

Infrastructure:

Cloudflare Workers (API Proxy)
GitHub Pages (Hosting)

Top comments (3)

Nathan Tarbert • Jun 12

pretty cool seeing someone actually building stuff for their own daily headaches tbh you think homegrown tools like this actually stand the test of time or just end up replaced by bigger apps