This is a submission for the Algolia MCP Server Challenge
What I Built
Quote Finder is a lightning-fast, searchable archive of powerful quotes from anime, TV shows, games, and films. It helps fans rediscover iconic lines, explore character insights, and surface forgotten gems through a sleek UI powered by Algolia.
This project is a deeply personal one for me. I grew up immersed in anime — not just as entertainment, but as a wellspring of emotional depth, moral nuance, and philosophical reflection. From One Piece’s freedom, to Evangelion’s existential dread, anime taught me more about life than most textbooks ever could. Quote Finder is my tribute to that universe.
Features
- 🔍 Instant Search powered by Algolia
- 🧠 AI-Powered Tags & Sentiment (e.g. "hope", "despair", "wisdom")
- ❤️ Emotion Extraction for deeper context
- 🎭 Filter by Anime & Character
- 📱 Responsive & Mobile-First UI
- 💾 Built-in Favorites (via localStorage)
Tech Stack
- Frontend: Next.js 15, React, TypeScript
- Search: Algolia Search API, InstantSearch.js
- Styling: Tailwind CSS, Radix UI
- AI Processing: Sentiment & tag generation via GPT
- Deployment: Vercel
Live Links
- Live App: Quote Finder
- GitHub: github.com/skarthikeyan96/quote-search
Screenshots
🎬 Full-Text Search
🎭 Filter by Character or Anime
💬 Saving the quotes
📱 Fully Responsive
How I Used Algolia MCP Server
1. Search Setup
- Configured a dedicated Algolia index with fine-tuned searchable attributes like
quote,character, andanime. - Integrated Algolia InstantSearch.js to handle real-time filtering and searching.
2. Dataset Design
- Custom-built a quote dataset from a mix of anime and fictional media.
- AI-tagged each quote with:
-
sentiment_score(1–10) -
sentiment_label(positive/neutral/negative) -
tags(e.g. “truth”, “grief”, “purpose”) -
emotion(e.g. “inspiring”, “tragic”)
-
3. Search Experience
- Faceted filtering by character & anime
- Searchable fields: quote, anime, character, emotion, and tags
- Highlighted keywords in results
- LocalStorage-powered favorites
Learnings & Challenges
🎭 Emotional Inference
Challenge: How to assign emotion categories like “tragic” or “uplifting” without relying on external labels?
Solution: Combined sentiment score + thematic tags to derive high-level emotions algorithmically.
🗃️ Tag Consistency
Challenge: Quotes ranged from poetic to deeply philosophical. Tags needed to be accurate and meaningful.
Solution: Used GPT-4 to suggest tags based on meaning, not just keywords.
💡 UX Refinement
Challenge: Simple UI that honors the tone of the content.
Solution: Minimalist card layout, soft gradients, and readable typography using Tailwind.
Technical Highlights
- Real-time search with InstantSearch.js
- Clean filter-based UI using Radix UI + Tailwind
- AI-derived metadata for nuanced discovery
- Fast, SEO-friendly static site via Next.js
- Highly scalable Algolia index structure
Future Improvements
- 🔒 User Accounts for cross-device saving
- 🎞️ Add show scenes or visuals per quote
- 📚 Expand to books, games, and films
- 🧠 Improve emotion detection models
- 📤 Allow user-submitted quotes
Project Metrics
- Quotes Indexed: 200+
- Characters Featured: 50+
- Tags Generated: 300+
- Bundle Size: ~190 kB
- Lighthouse Score: > 95
Conclusion
Quote Finder is more than a search tool — it’s an emotional archive. It bridges my love for anime and my skills as a developer, turning nostalgia into a usable, searchable, and shareable tool.
Whether you're a long-time anime fan or just someone looking for a quote that resonates — there's something here for you.
🙏 Thank you for reading. Would love to hear your feedback or ideas!
Top comments (1)
🔍 There's a hidden feature in the app for the truly curious. No spoilers — but if a quote really hits home, see what happens when you hover near it. 😉