EduSphere AI

• 

  EduSphere AI: Learn Without Limits

Inspiration

The inspiration for EduSphere AI came from the need to make education more engaging and accessible. Traditional learning methods often lack interactivity, especially for STEM subjects. We envisioned a platform that combines augmented reality, AI-driven personalization, and real-time collaboration to inspire students and make learning fun. The World's Largest Hackathon provided the perfect opportunity to bring this vision to life, leveraging cutting-edge tools like Bolt.new to rapidly prototype and deploy.

What it does

EduSphere AI transforms education by offering: Augmented Reality (AR) Problems: Interactive 3D problem-solving for subjects like math and science. Voice Quizzes: AI-generated, multilingual quizzes powered by ElevenLabs for auditory learning. Real-Time Chat: Collaborative learning through instant messaging, secured by Supabase RLS. Live Coding: Interactive coding challenges to teach programming in an engaging environment. PayPal Payments: Flexible subscription and one-time payment options for premium access. Personalized Content: AI-generated learning materials tailored to user preferences via Dappier and Anthropic.

How we built it

We built EduSphere AI using Bolt.new as the primary development environment, ensuring rapid iteration for the hackathon. The tech stack includes: Frontend: React and Vite for a fast, responsive UI, with Framer Motion for animations and Lucide React for icons. Backend: Netlify Functions for serverless APIs, handling PayPal payments (paypal-subscription.js, paypal-payment.js), voice quizzes (voiceQuiz.js), and real-time data (realtime.js). Database: Supabase with RLS-enabled tables (users, chat_messages, user_progress, session_participants, user_preferences) for secure data management. Authentication: Clerk for secure login/signup (Login.tsx). Monetization: PayPal for subscriptions and one-time payments, integrated via paypal.js. AI Services: Dappier and Anthropic for content generation, ElevenLabs for voice quizzes, Tavus for video content. Monitoring: Sentry for error tracking. State Management: Zustand for efficient frontend state handling. Deployment: Netlify for hosting, with Bolt.new as the development and testing platform. We developed components like ARProblem.tsx, PlayLearnPage.tsx, and LiveCode.tsx to deliver core features, with Supabase RLS ensuring data security.

Challenges we ran into

PayPal Integration: Initial JSON parsing errors in paypal-subscription.js caused "Unexpected end of JSON input" issues, resolved with robust error handling. Supabase RLS: Configuring RLS policies for user_progress, session_participants, and user_preferences was complex, requiring precise auth.uid() checks. RevenueCat Removal: Transitioning from RevenueCat to PayPal required updating multiple components (LiveCode.tsx, PlayLearnPage.tsx, ARProblem.tsx) and removing outdated imports. Bolt.new Environment: Rapid iteration in Bolt.new was powerful but required careful synchronization with GitHub and Netlify deployments. Time Constraints: Balancing feature development and debugging within the hackathon deadline was intense, especially with last-minute PayPal fixes.

Accomplishments that we're proud of

Successfully built and deployed a feature-rich educational platform in Bolt.new within the hackathon timeframe. Integrated AR, voice quizzes, and live coding, creating a unique learning experience. Implemented secure PayPal subscriptions and one-time payments, replacing RevenueCat seamlessly. Achieved robust data security with Supabase RLS across multiple tables. Delivered a polished UI with animations and intuitive navigation, enhancing user engagement.

What we learned

Rapid Prototyping: Bolt.new's environment accelerated development, teaching us efficient workflows for hackathons. PayPal API: Gained expertise in handling PayPal's subscription and payment APIs, including error handling for JSON responses. Supabase RLS: Mastered row-level security to ensure user-specific data access. Team Collaboration: Learned to coordinate across frontend, backend, and AI integrations under tight deadlines. Error Debugging: Improved skills in diagnosing and fixing issues like JSON parsing errors and import failures in real-time.

What's next for EduSphere AI

Enhanced AR Features: Add more interactive 3D models and subjects to the AR problem-solving module. Multi-Language Support: Expand voice quizzes to support additional languages using ElevenLabs. Gamification: Introduce leaderboards and rewards to increase user engagement. Mobile App: Develop iOS and Android versions for broader accessibility. AI Improvements: Leverage Anthropic and Dappier for more advanced content personalization. Scalability: Optimize Supabase and Netlify Functions for larger user bases.

Built With

• anthropic-(ai-content)
• clerk-(authentication)
• dappier-(content-generation)
• elevenlabs-(voice-generation)
• languages:-javascript
• lucide-react-(icons)
• netlify-cloud-services:-netlify-functions-databases:-supabase-(postgresql-with-rls)-apis:-paypal-(subscriptions
• payments)
• sentry-(error-monitoring)-libraries:-framer-motion-(animations)
• state
• tavus-(video-content)
• typescript-frameworks:-react
• vite-platforms:-bolt.new
• zustand