Back to Portfolio

EduSynapse

An intelligent learning platform that combines AI technology with proven learning methodologies to create a personalized and effective educational experience.

AI Education Personalized Learning Adaptive Learning Spaced Repetition Hackathon

Tech Stack

  • Next.js 14
  • TypeScript
  • shadcn/ui
  • Tailwind CSS
  • React Query
  • Prisma
  • PostgreSQL
  • S1 Scaling

Timeline

24 hours (Kent Hack Enough 2025)

My Role

Generative AI and Backend Developer

Project Overview

EduSynapse

Connor Love and TJ Raklovits

EduSynapse is an intelligent learning platform that combines state-of-the-art AI technology with proven learning methodologies to create a personalized and effective educational experience.

Inspiration

Education is undergoing a massive transformation, yet many students still struggle with traditional one-size-fits-all learning approaches. We were inspired by the potential of AI to create a truly personalized learning experience that adapts to each student's unique learning style, pace, and interests. The breakthrough in AI scaling techniques, particularly the S1 paper, showed us how we could make this vision a reality.

What it does

EduSynapse is an intelligent learning platform powered by STEVE (System for Teaching, Evaluating, and Visualizing Education), our custom AI assistant. It creates personalized learning paths, provides interactive feedback, and helps students master complex topics through:

  • Adaptive Learning Paths: Custom-tailored educational journeys based on your learning style
  • Interactive Code Execution: Run Python and JavaScript directly in your browser
  • File and Image Upload: Upload files and images for analysis
  • Math and Statistics: Perform advanced math and statistics calculations
  • Personalized Recommendations: Suggest modules and topics based on your interests
  • Knowledge Visualization: Graph-based representation of concepts and their relationships
  • Spaced Repetition: Smart review scheduling using our custom ease factor algorithm
  • Real-time AI Assistance: STEVE is always available to help explain concepts and answer questions
  • System Health Monitoring: Comprehensive error tracking and analytics dashboards

How we built it

We combined cutting-edge technologies to create a robust and scalable platform:

  1. AI Core:
    • Custom-trained models using S1 scaling (steve-small, steve-medium)
    • Knowledge graph generation using D3.js and React Force Graph
    • Natural language processing for content understanding
    • Custom prompt engineering for educational context
    • Automated question generation system
    • Real-time code analysis and feedback
  2. Frontend:
  • Next.js 14 with App Router for optimal performance
  • TypeScript for enhanced type safety and development experience
  • shadcn/ui for beautiful, accessible interface components
  • D3.js and React Force Graph for interactive knowledge visualization
  • KaTeX for mathematical notation rendering
  • Custom code editor with syntax highlighting
  • Real-time collaborative features
  • Responsive design with Tailwind CSS
  • Client-side caching with React Query
  • Custom hooks for state management
  • Error boundary implementation for stability
  1. Backend:
  • Prisma ORM with PostgreSQL for robust data management
  • JWT authentication with role-based access control
  • Custom spaced repetition algorithm
  • RESTful API architecture
  • Real-time error tracking system
  • Analytics data processing
  • Automated backup systems
  • Rate limiting and request validation
  • Middleware for logging and monitoring
  1. Development Workflow:
  • Git version control with feature branching
  • Automated testing with Jest and React Testing Library
  • CI/CD pipeline for automated deployments
  • Code quality checks with ESLint and Prettier
  • Performance monitoring and optimization
  • Documentation generation
  • Error logging and monitoring
  1. Security Implementation:
  • Secure authentication flows
  • Data encryption at rest and in transit
  • Input validation and sanitization
  • CSRF protection
  • Rate limiting
  • Security headers configuration
  • Regular security audits
  1. System Monitoring:
    • Real-time error tracking
    • Performance metrics collection
    • User behavior analytics
    • System health monitoring
    • Resource usage tracking
    • Custom analytics dashboard
    • Automated alert system

Challenges we ran into

  1. AI Model Training:
  • Implementing S1 scaling correctly
  • Balancing model size with performance
  • Ensuring consistent quality across different types of content
  1. Code Execution:
  • Implementing secure sandboxing for Python and JavaScript
  • Managing memory usage with Pyodide
  • Ensuring fast execution times
  1. Database Management:
  • Using Prisma to store user information in a robust, no SQL way
  • Handling race conditions and developing pooling

Accomplishments that we're proud of

  1. Successfully implemented a custom AI scaling approach based on cutting-edge research
  2. Created an intuitive knowledge graph visualization system
  3. Developed a sophisticated spaced repetition algorithm that adapts to user performance
  4. Built a secure, sandboxed code execution environment
  5. Achieved seamless integration between AI assistance and human learning patterns

What we learned

  1. Database Management with Prisma:
  • Efficient schema design for learning paths and user progress
  • Handling complex relationships between modules and user data
  • Implementing middleware for automatic timestamps and relations
  • Optimizing database queries for large-scale operations
  1. AI Integration with Ollama:
  • Setting up local model deployment and management
  • Optimizing model loading and response times
  • Implementing proper error handling and fallbacks
  • Managing model weights and configurations
  • Balancing between different model sizes (steve-small vs steve-medium)
  1. Next.js App Router Architecture:
  • Structuring routes for optimal performance
  • Managing server-side vs client-side rendering
  • Implementing efficient data fetching patterns
  • Handling dynamic imports and code splitting

What's next for EduSynapse

  1. Enhanced Collaboration:
  • Real-time collaborative workspaces
  • Peer learning features
  • Study group formation based on learning styles
  • Shared note-taking and annotation tools
  1. Advanced AI Features:
  • More sophisticated knowledge mapping
  • Improved personalization algorithms
  • Integration with additional AI models
  • Enhanced natural language understanding
  1. Platform Expansion:
  • Mobile application development
  • Offline learning capabilities
  • Integration with existing LMS systems
  • Support for more programming languages

We're committed to making EduSynapse the most effective and accessible learning platform, helping students worldwide achieve their educational goals through the power of AI-assisted learning.

Technical Stack

  • Frontend:
  • Next.js 14 with App Router
  • TypeScript for type safety
  • shadcn/ui for beautiful, accessible components
  • Tailwind CSS for styling
  • React Query for data fetching
  • KaTeX for mathematical notation
  • D3.js and React Force Graph for visualizations
  • React Beautiful DnD for drag-and-drop
  • Backend:
  • Prisma ORM for database operations
  • PostgreSQL database
  • RESTful API endpoints
  • JWT authentication

AI Integration:

  • Custom-trained model using S1 scaling (steve-small, steve-medium, steve-think)
  • Natural language processing for content understanding
  • Automated question generation
  • Intelligent answer grading
  • Personalized recommendations

Development Setup

  1. Clone the repository
  2. Install dependencies: npm install
  3. Set up environment variables:
DATABASE_URL='postgresql://...'NEXTAUTH_SECRET='your-secret'
  1. Run database migrations: npx prisma migrate dev
  2. Run the development server: npm run dev

Acknowledgments

Key Features

  • Adaptive Learning Paths
  • Interactive Code Execution
  • File and Image Upload
  • Math and Statistics
  • Personalized Recommendations
  • Knowledge Visualization
  • Spaced Repetition
  • Real-time AI Assistance
  • System Health Monitoring

Challenges & Solutions

Implementing S1 scaling correctly, Balancing model size with performance, Ensuring consistent quality across different types of content, Implementing secure sandboxing for Python and JavaScript, Managing memory usage with Pyodide, Ensuring fast execution times, Using Prisma to store user information in a robust, no SQL way, Handling race conditions and developing pooling

What I Learned

Database Management with Prisma, AI Integration with Ollama, Next.js App Router Architecture