Echo | Devpost

logo
Home Page
Sending echo page
Validating the message
Throwing echo page
Sending echo
After validating and send echo
Home Page after receiving an echo
All your echoes

💡 Inspiration

Ever wanted to compliment a stranger but felt too awkward? You see someone with an amazing outfit, witness an inspiring presentation, or notice someone brightening everyone's day. But social anxiety holds you back. We've all been there. We wanted to create a way to spread kindness without the fear of being awkward or intrusive. Echo was born from a simple question: What if appreciating others was as easy as pointing and swiping? In a world where we're more connected digitally than ever, genuine human appreciation in physical spaces has become rare. Echo bridges that gap—combining the immediacy of digital communication with the warmth of real-world proximity.

🎯 What It Does

Echo transforms your phone into a kindness-delivery device using an intuitive gesture-based interface

The Flow:

💌 Send - Recipients click "Send Echo" to send anonymous appreciation to someone.
1. 📝 Compose - Write a message of appreciation ("I love your style" or "Your presentation inspired me")
2. 🧭 Aim - Point your phone at the person using the built-in compass
3. 🚀 Throw - Swipe up to send, watching a beautiful animation as your message flies to them
💌 Receive - Recipients open "View Echoes" to discover anonymous appreciation sent their way

The Magic:

100% Anonymous - No profiles, no usernames, no friend requests
AI-Powered Safety - Gemini validates every message to ensure only genuine kindness gets through
Location-Aware - Uses GPS + compass to detect who you're pointing at
Gesture-Based - Intuitive swipe-to-throw mechanic feels like launching positivity into the world

🛠️ How We Built It

Frontend Architecture

React Native + Expo - Cross-platform mobile development
Custom Animations - Physics-based sparkle trails and emoji throwing using Animated API
Gesture Recognition - PanResponder for detecting swipe velocity and direction
Sensor Integration - Real-time compass heading via Magnetometer API

Backend Infrastructure

MongoDB Atlas - Stores echoes with location, heading, and timestamp data
Vercel Serverless - API endpoints for CRUD operations
Environment Security - API keys managed via react-native-dotenv

AI Integration

Google Gemini API - Real-time message validation
Content Moderation - Filters negativity, sarcasm, harassment, ensuring only positive messages pass through
Single-Call Optimization - Reduced API usage by combining validation + processing

Sensor Fusion

GPS (Expo Location) - Captures sender/receiver coordinates
Compass (Magnetometer) - Tracks phone heading (0-360°)

Design System

Pastel Color Palette - Rose pink (#FFB6C1) + butter yellow (#FFFAEB) for warmth
Custom Typography - 700 weight titles, subtle gradients, soft shadows
Haptic Feedback - Tactile response at every interaction point

🚧 Challenges We Ran Into

1. Sensor Accuracy in Real Environments

Problem: Phone compass can drift ±20-30° due to magnetic interference. GPS accuracy indoors is ±5-10 meters. Small movements = huge angle changes. Solution: Implemented tolerance ranges (±60° for pointing detection) and distance thresholds (<50m) to balance precision with usability. For the demo environment, we focused on showcasing the core mechanic rather than perfect geometric accuracy.

2. Gemini API Rate Limiting

Problem: Hit rate limits during testing when making separate validation + processing calls. Solution: Consolidated into a single API call that validates and processes simultaneously. Added error handling to gracefully degrade if API is unavailable.

3. MongoDB Atlas SSL Compatibility on Vercel

Problem: Vercel's serverless Node.js environment had SSL handshake failures with MongoDB driver 6.x.

Solution: Downgraded to mongodb@5.9.0 which has better serverless compatibility. Implemented connection pooling with maxPoolSize: 1 for serverless cold starts.

4. Animation Performance

Problem: Coordinating 5+ sparkle animations + emoji throw + glow effects caused frame drops. Solution: Used useNativeDriver: true for all transforms, pre-calculated animation values, and staggered delays to distribute computational load.

5. Navigation State Management

Problem: Passing message data between screens while maintaining animation state. Solution: React Navigation params for data flow + careful state management to prevent animation resets on navigation.

🏆 Accomplishments That We're Proud Of

✨ Novel Interaction Design - Created a completely new gesture-based messaging paradigm ("throw to send")

🎨 Cohesive Visual Identity - Designed from scratch with custom animations, colors, and typography

🤖 Real AI Integration - Not just a gimmick—Gemini actively moderates content in real-time

🧭 Sensor Fusion Success - Combined GPS, compass, and touch into one seamless experience

⚡ Full-Stack in 24 Hours - Mobile app + backend + AI integration + polished UI in a day

💪 Team Collaboration - Divided work efficiently (Person 1: frontend/animations, Person 2: Gemini/validation)

📚 What We Learned

Technical Skills

Mobile sensor APIs and their real-world limitations (compass drift, GPS accuracy)
Advanced React Native animations with physics-based motion
MongoDB Atlas deployment patterns for serverless environments
Gemini API prompt engineering for content moderation
Geospatial calculations (haversine distance, bearing angles)

Design Principles

Gesture-based UI should feel physically intuitive (swipe up = throw up)
Haptic feedback dramatically improves perceived quality
Animation timing matters more than complexity
Color psychology in creating welcoming experiences

Soft Skills

Time-boxing during hackathons (know when to pivot vs. polish)
Graceful degradation when hardware fails (show all echoes if GPS unavailable)
Demo storytelling—focus on user experience over technical details

🚀 What's Next for Echo

Near-Term Improvements

🎯 Refined Location Algorithm - Improve pointing detection with machine learning to compensate for sensor drift 🔄 Pull-to-Refresh - Manual echo feed updates 🌙 Dark Mode - For late-night compliments

Feature Expansions

📊 Impact Dashboard - "You've brightened 47 people's days this month" 🌍 Echo Heatmaps - Visualize kindness density across cities 🎨 Custom Themes - Personalized echo animations and colors 👥 Group Echoes - Send appreciation to entire teams/groups

Community Features

🗺️ Echo Walls - Public appreciation boards for specific locations (coffee shops, universities) 🏅 Kindness Streaks - Gamify daily appreciation habits 🎁 Seasonal Events - "Valentine's Echo Storm" or "Random Acts of Kindness Week"

Platform Growth

🌐 Web Dashboard - View echo history and stats on desktop 🔗 API for Businesses - Let companies integrate Echo into events 📈 Analytics - Measure community positivity trends over time

🎨 Design Philosophy

Echo's design centers on warmth, simplicity, and delight:

Pastel Colors reduce digital harshness, creating a calm emotional space
Gesture Interactions make technology feel physical and human
Animations provide feedback that actions matter
Anonymous removes social pressure - you can be kind without performance

We believe technology should facilitate human connection, not replace it. Echo lives at the intersection of digital convenience and physical presence.