CurioMap

🌍 About the Project: CurioMap

🚀 Inspiration

CurioMap was born from my own frustration as a curious traveler and developer. Every time I wanted to learn fun facts about a country or pick my next destination, I’d fall into a rabbit hole of Google searches, outdated Wikipedia articles, and cluttered blogs. I realized how outdated the experience of discovering the world still is—and decided to fix it.

🛠️ What I Built

CurioMap is an AI-powered interactive map that generates 5 fascinating facts about any country, in real-time. It combines the Perplexity API’s language capabilities with an intuitive map UI, creating a fast, engaging, and informative experience for users.

Key features include:

• A responsive React + Tailwind frontend
• MapLibre for rendering a dynamic, clickable world map
• Real-time fact generation using the Perplexity API (via Sonar)
• Country-specific data pulled from an open-source REST API
• Smooth animations, mobile support, and optional response caching

📚 What I Learned

This project deepened my understanding of:

• Prompt engineering for consistent LLM outputs
• Efficient API handling with caching in Next.js
• Seamless UI/UX design for interactive maps
• Combining multiple data sources to enrich user experiences

I also learned how to design an app that feels magical—transforming static data into something users want to explore again and again.

⚠️ Challenges I Faced

• Prompt tuning: Crafting queries that return concise, relevant, and engaging facts across diverse countries.
• Latency: Managing load times with fallback states and caching to keep the experience fast and smooth.
• Fact quality: Ensuring LLM responses are interesting, diverse, and appropriate across cultures and languages.
• UI layout: Designing a layout that works beautifully across devices and adapts to varied content lengths.

💡 What’s Next?

I plan to add:

• A vibe-based travel chatbot
• Custom fact personalities (foodie, historical, quirky)
• Favorite fact saving (like a geo-notebook)
• Offline support and multilingual modes

Thanks for exploring with CurioMap! 🌐✨

Built With

• framermotion
• maplibre
• next.js
• react.js
• sonarapi
• tailwindcss
• typescript
• vercel