Inspiration
As someone who loves planning travels and exploring new places, I've found that my best inspiration comes from short-form content - like "Top 10 Hidden Gems in Singapore" or "Top 6 MUST visits in Canada" . But I often found myself manually screenshotting these places and individually searching for each location to add them to my Google Maps saved list. This hackathon was the perfect opportunity to build the solution I've been looking for.
That's why we built Reely - an AI-powered platform that instantly identifies the location of any place from just a screenshot or image. Simply upload a photo/ video of the reel, Reely will tell you exactly where it is, and you can directly add it to your Google Maps.
What it does
Reely is an AI-powered platform that instantly identifies the location of any place from just a screenshot or image. Users simply upload a photo from their favorite reel, and our advanced computer vision technology tells them exactly where it is, complete with coordinates, address, and Google Maps integration. Key features include:
- Instant Location Detection: Upload any image and get precise location coordinates and address information
- Gamified Experience: A location guessing game that challenges users to predict where places are before revealing the answer
- Smart Collections: Organize discovered locations into custom folders for trip planning or thematic grouping
- Search History: Complete archive of all location discoveries with Pinterest-style card layouts
How we built it
Technology Stack Frontend: React with TypeScript, Vite for build tooling Backend: Node.js with Express.js framework Database: MongoDB Atlas for scalable cloud storage Authentication: Supabase for secure user management AI Vision: Google's Gemini Vision API for location recognition Maps Integration: Google Maps API for location services We built a robust backend that processes uploaded images through Google's Gemini Vision API, which analyzes visual content to extract location names, coordinates, and contextual information. The system handles various image formats and implements error handling for cases where locations cannot be determined.
Challenges we ran into
1) AI Model Limitations. The biggest challenge was handling the variability in AI vision model responses. Gemini Vision doesn't always recognize locations. So, we implemented a confidence scoring system and graceful error handling that provides meaningful feedback to users when locations cannot be determined. 2) Coordinate Accuracy. Converting location names to precise coordinates proved challenging. Different APIs sometimes returned slightly different coordinates for the same location. We then implemented a dual-coordinate system storing both AI-detected coordinates and user-verified coordinates, with the ability to update based on user feedback. 3) Authentication Integration. Integrating Supabase authentication with our custom backend while maintaining security standards required careful session management. To solve this, we implemented JWT token validation middleware that securely bridges Supabase authentication with our Express backend.
Accomplishments that we're proud of
1) High Accuracy Rate: Achieved ~85% success rate in correctly identifying recognizable landmarks and popular locations 2) Fast Processing: Average response time of 3-5 seconds for image analysis and location detection 3) Scalable Architecture: Built with MongoDB Atlas and cloud-ready infrastructure that can handle increasing user loads 4) Gamification: The location guessing game adds an element of fun while educating users about geography 5) Smart Collections: Users can organize discoveries into themed folders like "Cafés to Visit" or "Travel Bucket List" 6) Visual Search History: Clean card design make it easy to browse and revisit past discoveries
What we learned
- AI Integration: Gained deep experience with Google's Gemini Vision API and learned how to handle the unpredictability of AI responses
- Full-Stack Architecture: Mastered the coordination between React frontend, Express backend, and MongoDB database
- User Authentication: Learned to implement secure authentication flows with Supabase and JWT tokens
- File Upload Handling: Implemented secure, efficient image upload and processing systems
- Progressive Enhancement: Learned to design experiences that work well even when AI fails to deliver perfect results
- Performance Optimization: Understood the importance of perceived performance through loading states and progressive data loading
- Scalability Planning: Designed architecture decisions with future growth in mind
What's next for Reely
Short-term Enhancements (Next 3 months)
- Improved AI Accuracy: Integration with multiple vision APIs for cross-validation and improved recognition rates
- Travel Planning: Convert collections into actual itineraries with routing and recommendations
- Batch Processing: Upload multiple images at once for efficient location discovery
Long-term Features (6+ months)
- In-app Integration: Allowing users to directly press the share button on Tiktok/ Instagram that would lead them to the Reely app for reel processing
- Community Verification: Allow users to verify and improve location accuracy through crowdsourcing
Built With
- css3
- express.js
- google-gemini-vision-api
- google-maps
- jwt
- mongodb-atlas
- mongoose
- multer
- node.js
- react
- router
- supabase
- typescript
- vite
Log in or sign up for Devpost to join the conversation.