🧠 About the Project

🔍 Inspiration

As movie lovers and developers, we’ve always been frustrated by the limits of traditional movie search engines. Searching for “movies like Inception but more emotional” or “feel-good animations with a twist” rarely gives accurate results. We imagined a world where AI could understand not just what you're searching for, but why — and return suggestions that match your intent, not just your keywords.

With the power of Google Gemini AI and MongoDB Atlas Vector Search, we set out to build a smarter, more intuitive movie discovery experience — one that understands the language of cinema lovers.


🧰 How We Built It

Our stack is built on the reliable and modern MERN architecture with powerful AI and vector tech added on top:

  • Frontend: React with Chart.js for dynamic visualizations, Axios for API requests, and clean responsive CSS.
  • Backend: Node.js with Express, integrating both MongoDB Atlas (with semantic vector indexing) and the Google Gemini API for generating insights and embeddings.
  • Database: We used the sample_mflix.embedded_movies dataset from MongoDB, enriched it with plot_embedding vectors using Gemini, and built a cosine similarity search index.

The architecture enables users to search movies semantically and get real-time visual analytics and AI-generated summaries for their queries.


🚀 What We Learned

  • 🧠 Hands-on integration of LLMs (Google Gemini) into full-stack applications
  • 📊 Designing and rendering dynamic dashboards using real-time data
  • 🧬 Creating and querying a vector index in MongoDB for semantic search
  • 🔧 Managing API rate limits, CORS policies, and secure key handling
  • 🌐 Building a user-friendly, mobile-responsive UI from scratch without frameworks like Bootstrap

This project allowed us to stretch our skills across AI/ML, data visualization, backend systems, and UX design, all in one intense hackathon sprint.


🧗‍♂️ Challenges We Faced

  1. Gemini API Integration
    Understanding how to extract embeddings and use Gemini for both semantic vector generation and insight summarization took significant experimentation.

  2. Vector Search Index Configuration
    Configuring the MongoDB vector index correctly — especially setting numDimensions, field paths, and similarity types — was tricky and required precise matching with the data.

  3. Real-time Dashboard Syncing
    Ensuring that search results, vector matches, and charts updated simultaneously without lag or race conditions involved deep work with async JavaScript and React state.

  4. Time Management
    Juggling between frontend polish, backend robustness, and AI integration — within the tight hackathon deadline — pushed us to prioritize features smartly.


💡 The Outcome

The final result is more than just a movie dashboard — it’s a prototype of how semantic understanding can change search forever. It offers a delightful user experience powered by cutting-edge AI and serves as a base for future innovations in media discovery, streaming intelligence, and recommender systems.

We built something we genuinely want to keep using — and that, to us, is a win. 🎉

Built With

  • and-mongodb-atlas
  • axios
  • chart.js
  • context-api
  • cosine-similarity
  • css
  • d3.js
  • docker
  • express.js
  • google-cloud-run
  • google-gemini-ai
  • mongodb
  • mongodb-atlas
  • mongodb-vector-search
  • node.js
  • react
  • using-d3.js-and-chart.js-for-rich-visualizations.-deployed-via-docker-on-google-cloud-run
Share this project:

Updates