An innovative educational RPG platform built with React, TypeScript, and GitHub Spark, designed to gamify classroom learning experiences.
🎬 NEW: Portfolio Video Presentation - A 25-minute comprehensive video showcasing the platform for investors and employers
Classroom RPG: Aetheria transforms traditional classroom activities into engaging role-playing game experiences. Students embark on educational quests, earn experience points, and develop their characters while learning core curriculum concepts.
- Engagement: Increase student participation through gamification
- Learning: Reinforce educational concepts through interactive gameplay
- Collaboration: Foster teamwork and social learning
- Progress Tracking: Provide clear feedback on learning achievements
A comprehensive 25-minute video presentation showcasing Classroom RPG: Aetheria for potential investors and employers. The video demonstrates:
- Business Problem: 40% dropout rate in online learning platforms
- Strategic Insight: Applying game design psychology to education
- Platform Solution: AI-powered quest system with real-time feedback
- Impact Analysis: Time savings, engagement metrics, and measurable outcomes
- Technical Approach: Systems thinking and human-centered design
Video Details:
- 📹 Duration: 25 minutes 42 seconds (1542 seconds)
- 🎥 Quality: Full HD 1080p @ 30fps
- 🗣️ Audio: Computer-generated narration
- 📊 Content: 45 scenes covering problem, solution, and impact
Quick Start: Generate the Video Locally (Recommended)
# Make the script executable (first time only)
chmod +x generate_video.sh
# Generate the portfolio video (handles dependencies and environment setup)
./generate_video.sh
# Video will be created in: video_output/PORTFOLIO_VIDEO_SCRIPT_video.mp4Advanced: Manual Generation with Custom Configuration
# Install dependencies (Linux/Ubuntu)
sudo apt-get install -y ffmpeg espeak espeak-data fonts-dejavu-core
# Set environment variables for custom configuration
export REPO_ROOT="$(pwd)"
export SCRIPT_DIR="$(pwd)/satellites/portfolio"
export SCRIPT_PATTERN="*SCRIPT*.md"
export VIDEO_OUT_DIR="$(pwd)/video_output"
export VIDEO_RESOLUTION="1920x1080"
export FPS="30"
# Run video production agent
python3 satellites/video-production/video_production_agent.pyOption 2: Use GitHub Actions
- Go to Actions → Generate Portfolio Videos
- Click Run workflow
- Download video from workflow artifacts
Option 3: Pre-built Version Check the Releases section for pre-generated videos.
- 📖 VIDEO_PRESENTATION_GUIDE.md - Complete video documentation
- 📝 Portfolio Video Script - Full narration script
- 🎨 Storyboard - Visual specifications
- ⚙️ Production Agent - Automation script
For Job Applications:
- Include video link in portfolio websites
- Share on LinkedIn profile
- Use in follow-up communications
- Perfect for product/strategy roles
For Investor Pitches:
- First 4:30 minutes = executive summary
- Full video = comprehensive technical detail
- Demonstrates strategic thinking capability
- 🎯 Quest System: Transform lessons into engaging quests
- 👥 Character Creation: Customizable student avatars
- 📊 Progress Tracking: Real-time learning analytics
- 🏆 Achievement System: Rewards for milestones and accomplishments
- 🎨 Modern UI: Built with Radix UI and Tailwind CSS
- ⚡ Fast Development: Vite-powered with hot module replacement
- 🎬 Autonomous Video Production: Generate professional MP4 videos from scripts
- 🗣️ Text-to-Speech: Local TTS audio generation (espeak)
- 🎥 Automated Visuals: FFmpeg-powered visual generation
- ⏱️ Timeline Sync: Precise timecode synchronization
- 🤖 GitHub Actions: Automated video generation workflows
- Node.js v18 or higher
- npm or yarn
- Git
- Python 3.11+ (for video production features)
- FFmpeg (for video production features)
- Clone the repository
git clone https://github.com/ivviiviivvi/classroom-rpg-aetheria.git
cd classroom-rpg-aetheria- Install dependencies
npm install- Start development server
npm run devThe application will be available at http://localhost:5173
# Development
npm run dev # Start dev server with hot reload
npm run build # Build for production
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run optimize # Optimize dependencies
# Utilities
npm run kill # Kill process on port 5000- ORGANIZATION.md - 📁 Repository structure and file organization guide
- CONTRIBUTING.md - How to contribute to the project
- CODE_OF_CONDUCT.md - Community guidelines
- SUPPORT.md - Getting help and support
- SECURITY.md - Security policies and reporting
- CHANGELOG.md - Version history and changes
- TECHNICAL_ROADMAP.md - Future plans and roadmap
- docs/guides/DEVELOPMENT_WORKFLOW.md - Ingestion → Digestion → Implementation process
- docs/guides/RESEARCH_GUIDELINES.md - How to contribute research
- 🔬 research/ - Research, analysis, and evaluation documents
- 📝 drafts/ - Work in progress, iterations, and experimental features
- 🛰️ satellites/ - Auxiliary tools and utilities
- Video Production - Autonomous video generation
- Portfolio Videos - Portfolio presentation generator
- docs/ - Detailed documentation and guides
- GitHub Discussions - Community discussions
- GitHub Issues - Bug reports and feature requests
- React 19 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Utility-first CSS
- Radix UI - Accessible component primitives
- Framer Motion - Animations
- Python 3.11+ - Video production automation
- FFmpeg - Video rendering
- GitHub Actions - CI/CD automation
classroom-rpg-aetheria/
├── .github/ # GitHub configuration
│ ├── ISSUE_TEMPLATE/ # Issue templates
│ ├── PULL_REQUEST_TEMPLATE/ # PR templates
│ └── workflows/ # GitHub Actions workflows
├── src/ # Source code
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── styles/ # Global styles
│ └── assets/ # Static assets
├── docs/ # Technical documentation
│ └── guides/ # Development guides and workflows
├── research/ # 🔬 Research, analysis, and evaluations
├── drafts/ # 📝 Work in progress and iterations
├── satellites/ # 🛰️ Auxiliary tools and utilities
│ ├── video-production/ # Autonomous video generation
│ └── portfolio/ # Portfolio video generator
└── public/ # Public assets
- Create a feature branch:
git checkout -b feature/your-feature - Make your changes
- Run linter:
npm run lint - Build:
npm run build - Commit: Follow Conventional Commits
- Push and create a pull request
We use several tools to maintain code quality:
- ESLint - JavaScript/TypeScript linting
- TypeScript - Type checking
- Pre-commit hooks - Automated checks before commits
- EditorConfig - Consistent coding styles
- Prettier - Code formatting (via ESLint)
We welcome contributions! Please see our Contributing Guidelines for details on:
- Code of Conduct
- Development setup
- Coding standards
- Commit message guidelines
- Pull request process
New to the project? Look for issues labeled:
good first issue- Perfect for newcomershelp wanted- Extra attention neededdocumentation- Documentation improvements
# Generate videos locally
python3 video_production_agent.py
# Or use GitHub Actions
# Go to: Actions → Generate Portfolio Videos → Run workflow✅ Script parsing with timecode detection
✅ Local TTS audio generation (espeak)
✅ Automated visual generation (FFmpeg)
✅ Timeline synchronization
✅ MP4 rendering (1920x1080@30fps)
✅ GitHub Actions integration
See VIDEO_PRODUCTION_README.md for complete documentation.
Security is a top priority. If you discover a security vulnerability:
- DO NOT open a public issue
- Follow our Security Policy
- Report privately to the maintainers
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright GitHub, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...
- Built with GitHub Spark
- UI components from Radix UI
- Styling with Tailwind CSS
- Icons from Heroicons and Phosphor Icons
- GitHub Issues: For bug reports and feature requests
- Discussions: For questions and community interaction
- Email: See repository settings for maintainer contact
See our Technical Roadmap for planned features and improvements.
Made with ❤️ for educators and students
Transforming classrooms into adventures, one quest at a time.