QuerySphere - Hackathon Submission
Inspiration
QuerySphere was born from a simple observation: students in educational institutions often struggle to get timely, accurate answers to their academic questions. Traditional forums are plagued with spam, unverified information, and lack real-time interaction.
We saw students wasting hours searching for answers that could be resolved in minutes with the right help. The inspiration came from wanting to create a space where:
- Students could ask questions without fear of judgment
- Answers could be verified by trusted teachers
- AI could provide instant fallback when peers aren't available
- The community could self-moderate through reporting and flagging systems
We envisioned a platform that combines the best of peer collaboration, AI assistance, and teacher verification—all within a secure, institution-specific environment that keeps academic discussions focused and spam-free.
What it does
QuerySphere is a private institutional Q&A platform that enables students and teachers to collaborate on academic questions with AI assistance, real-time chat, and verified answers.
Core Features:
- Question & Answer System: Students can post questions with text, images, or videos, and receive answers from peers and AI
- Real-Time Chat: Socket.IO-powered instant messaging for doubt resolution with
@aitrigger for instant AI responses - AI-Powered Assistance: Google Gemini AI integration provides instant answers when triggered
- Teacher Verification: Teachers can verify and accept student answers for accuracy
- Media Upload: Support for image and video attachments via Cloudinary
User Roles:
- Students: Ask questions, provide answers, chat with peers
- Teachers: Verify answers, review student applications, moderate content
- Admins: Full platform management, user management, spam control
Security & Moderation:
- Advanced spam control with flagging and moderation system
- Rate limiting to prevent API abuse
- Temporary and permanent ban system with countdown timers
- Report system for inappropriate content
- Email verification via SendGrid for OTP-based password reset
Additional Features:
- Search functionality across questions and answers
- Comprehensive user profiles with activity tracking
- Redis caching for performance optimization
- Guest search limiting for unauthenticated users
How we built it
QuerySphere is a full-stack mobile application built with a modern, scalable architecture:
Frontend Development: We chose React Native with Expo for cross-platform compatibility, allowing the app to run seamlessly on iOS, Android, and Web. Using Expo Router for file-based routing, we created an intuitive navigation system. Redux Toolkit manages global state for questions, user data, chat messages, and admin controls.
Real-Time Communication:
We implemented Socket.IO for real-time chat, building a custom Socket context that handles connection management, message broadcasting, and AI trigger detection. When users type @ai, the system instantly routes their query to Google Gemini API for immediate AI-powered responses.
Backend Architecture: Our Node.js/Express backend (hosted on Render) handles all API requests with RESTful endpoints. We implemented role-based access control (RBAC) with three distinct user roles: Students, Teachers, and Admins. Each role has specific permissions and access levels.
Media Handling: Using Cloudinary for media storage, we enabled users to upload images and videos with their questions and answers. The system supports multiple media types and handles file validation and optimization automatically.
Security & Moderation: We built a comprehensive moderation system with advanced spam detection, rate limiting, ban system with countdown timers, user reporting mechanism, and email verification via SendGrid for secure password resets.
User Experience: We implemented voice input using Expo Speech for accessibility, allowing users to ask questions hands-free. The UI uses React Native Paper components with custom theming, ensuring a modern and responsive design across all devices.
Challenges we ran into
Challenge 1: Real-Time Synchronization Initially, we struggled with keeping chat messages synchronized across all clients. Multiple users sending messages simultaneously caused race conditions. Solution: We implemented a message queue system and used Socket.IO rooms to manage user-specific channels, ensuring messages are delivered in order.
Challenge 2: AI Response Latency Google Gemini API responses could take several seconds, making the chat feel sluggish. Solution: We added loading indicators and implemented optimistic UI updates, showing a "AI is thinking..." message while processing, then updating the UI when the response arrives.
Challenge 3: Media Upload Performance Large image and video uploads were timing out, especially on slower connections. Solution: We implemented chunked uploads, added progress indicators, and used Cloudinary's automatic optimization to reduce file sizes before upload.
Challenge 5: State Management Complexity As features grew, Redux state became difficult to manage. Solution: We refactored to use Redux Toolkit's createSlice, organized state by feature domains, and created custom hooks (useApi, useSocket, useCurrentUser) to encapsulate complex logic.
Accomplishments that we're proud of
Complete Full-Stack Solution: Successfully built a production-ready mobile application with a robust backend, real-time features, and comprehensive security measures.
Real-Time AI Integration: Seamlessly integrated Google Gemini API with Socket.IO to provide instant AI responses in chat, creating a natural conversation flow.
Advanced Moderation System: Implemented a multi-layered spam control system with rate limiting, flagging, reporting, and ban management that keeps the platform clean and safe.
Cross-Platform Excellence: Delivered a single codebase that works flawlessly on iOS, Android, and Web, demonstrating the power of React Native and Expo.
Role-Based Access Control: Built a sophisticated RBAC system that properly manages permissions for Students, Teachers, and Admins with secure API endpoints.
Media Handling: Successfully implemented image and video uploads with Cloudinary, handling optimization, validation, and storage efficiently.
Performance Optimization: Integrated Redis caching to significantly improve response times and reduce server load.
User Experience: Created an intuitive, accessible interface with voice input, haptic feedback, and responsive design that works across all device sizes.
Security Implementation: Implemented secure authentication, email verification, and comprehensive moderation tools to protect users and content.
Scalable Architecture: Designed a modular, maintainable codebase with proper state management, custom hooks, and organized file structure that can scale with future features.
What we learned
Real-Time Systems: Building with Socket.IO taught us about WebSocket connections, event handling, and managing real-time state synchronization across multiple clients.
AI Integration: Integrating Google Gemini API required understanding prompt engineering, handling API rate limits, and creating a seamless user experience where AI responses feel natural and helpful.
State Management at Scale: Managing complex state with Redux Toolkit across multiple features (questions, chat, profiles, admin panels) taught us about proper state architecture and avoiding prop drilling.
Security Best Practices: Implementing authentication, authorization, and moderation systems gave us deep insights into securing user data and preventing abuse.
Cross-Platform Development: Working with Expo taught us the nuances of building truly cross-platform applications while maintaining native performance.
Media Handling: Processing and optimizing images/videos, handling different file formats, and managing storage costs were valuable lessons in backend development.
Performance Optimization: Learning to use Redis for caching and understanding when and how to cache data significantly improved our application's performance.
Team Collaboration: Working on a complex full-stack project taught us the importance of clear communication, code organization, and version control.
Problem-Solving: Each challenge we faced taught us to break down complex problems, research solutions, and implement fixes systematically.
User-Centric Design: Building features with real users in mind helped us understand the importance of accessibility, intuitive interfaces, and responsive design.
What's next for QuerySphere
Short-Term Enhancements:
- Machine learning-based spam detection using natural language processing
- Advanced analytics dashboard for teachers to track student engagement
- Mobile push notifications for answer updates and new questions
- Offline mode with sync capabilities for areas with poor connectivity
- Enhanced search with filters, tags, and categories
Medium-Term Goals:
- Integration with Learning Management Systems (LMS) like Moodle, Canvas, or Blackboard
- Multi-language support for international institutions
- Video call integration for one-on-one tutoring sessions
- Gamification features with points, badges, and leaderboards
- Advanced AI features like question similarity detection and auto-categorization
Long-Term Vision:
- White-label solution for institutions to customize branding
- Mobile apps for iOS and Android app stores
- Advanced AI tutor that learns from verified answers
- Integration with academic databases and citation tools
- Analytics and insights for institutions to improve curriculum
- Community features like study groups and collaborative notes
- API for third-party integrations with other educational tools
Technical Improvements:
- Migration to microservices architecture for better scalability
- Implementation of GraphQL for more efficient data fetching
- Advanced caching strategies with CDN integration
- Real-time collaboration features for group projects
- Enhanced security with two-factor authentication
- Performance monitoring and error tracking tools
QuerySphere has the potential to transform how students and teachers interact in educational institutions, and we're excited to continue building features that make learning more accessible, collaborative, and efficient.
Log in or sign up for Devpost to join the conversation.