-
-
SkillArena blends learning & gaming
-
Track XP, streaks, and progress in a sleek, gamified dashboard with gradients and skill cards that boost your learning journey.
-
Live leaderboard shows real-time ranks, XP, and streaks in a dark UI—compete with others as you rise through coding challenges.
-
Showcase your skills with verified certs and XP boosts from React, TypeScript, and QA—beautifully displayed in a dark UI.
SkillArena: A Gamified Learning Revolution:
SkillArena transforms education into an electrifying, competitive arena, blending cutting-edge tutorials with real-time challenges and AI-driven insights. Built with React, JavaScript, and Python Flask, it’s the ultimate platform for mastering skills while having fun.
Inspiration
The spark for SkillArena came from our frustration with dull e-learning platforms that fail to captivate. Inspired by the thrill of battle royale games and platforms like Duolingo and Kahoot, we envisioned a futuristic arena where learners, coders, and game testers could level up skills through immersive tutorials and compete in real-time. The addition of an AI copilot powered by OpenAI to answer doubts instantly sealed our vision for a game-changing EdTech experience.
What It Does
SkillArena merges learning and gaming into an addictive experience:
. Tutorials: Structured paths in coding (Python, JavaScript), AI (chatbots, classifiers), gaming (mechanics), and vibe coding (creative, aesthetic coding).
. Challenges: Real-time, battle royale-style quizzes for four players with live leaderboards.
. Game Testing: Test game prototypes, submit feedback, and earn XP.
. AI Copilot: Instant answers to questions, powered by OpenAI.
. Spectator Mode: Dynamic heatmaps visualize players’ thought processes.
. Dashboards: Track XP, streaks, and progress with skill tree visuals.
. Achievements: Earn rare badges for milestones.
How We Built It
We crafted SkillArena with scalability and user experience in mind:
. Frontend: Used React and JavaScript for a dark-themed UI with vibrant gradients, 3D card effects, and smooth animations. React components power card-based tutorials and a skill tree.
. Backend: A Python Flask server handles authentication, progress, leaderboards, and feedback, using SQLite (with plans for PostgreSQL).
. AI Copilot: Integrated OpenAI API for real-time answers.
. Real-time Features: WebSockets enable live leaderboards and chat.
. Game Testing: Built a React module for prototype testing and rewards.
. Spectator Mode: Heatmaps via live data streams for a visual wow factor.
' ' ' // React component for AI Copilot import React, { useState } from 'react';
const CopilotChat = () => { const [question, setQuestion] = useState(''); const [messages, setMessages] = useState([]);
const sendQuestion = async () => { if (!question) return; setMessages([...messages, { sender: 'You', text: question }]); const response = await fetch('http://localhost:5000/api/copilot', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ question }) }); const data = await response.json(); setMessages([...messages, { sender: 'You', text: question }, { sender: 'Copilot', text: data.answer }]); setQuestion(''); };
return (
{messages.map((msg, index) => ({msg.sender}: {msg.text}
))} setQuestion(e.target.value)} placeholder="Ask a question..." /> Send ); };export default CopilotChat; ' ' '
Challenges We Ran Into
. React-Flask Sync: Syncing React with Flask for real-time updates was tricky, solved with async JavaScript calls.
. OpenAI Limits: Managing API rate limits required prompt optimization and caching.
. Performance: Low-latency leaderboards under high loads needed lightweight JSON and WebSocket tweaks.
. UI Complexity: Balancing stunning visuals with mobile performance took multiple iterations.
. Time Crunch: Prioritizing AI copilot and spectator mode in a hackathon was a race against time.
Accomplishments That We're Proud Of
. Gamified Learning: Created an addictive experience with leaderboards, badges, and XP.
. AI Copilot: Seamlessly integrated OpenAI for instant, context-aware answers.
. Spectator Mode: Built innovative heatmaps that wowed judges.
. React UI: Delivered a polished, mobile-friendly interface rivaling top platforms.
. Game Testing: Enabled users to contribute to game development while earning rewards.
What We Learned
. React & JavaScript: Mastered component-based design, state management, and async APIs.
. Python Flask: Learned API management and real-time data handling.
. AI Integration: Gained expertise in NLP and prompt engineering with OpenAI.
. Gamification: Balanced motivation and challenge in leaderboards and badges.
. Scalability: Optimized serverless functions and queries for concurrent users.
What's Next for SkillArena
SkillArena is set to grow:
. New Skills: Add data science, cybersecurity, and AR/VR tutorials.
. Multiplayer: Scale to 100-player challenges and team competitions.
. Mobile App: Build React Native apps for iOS and Android.
. AI Analytics: Enhance personalized learning with AI-driven insights.
. Community: Add forums and social sharing for a vibrant community.
. Deployment: Transition to PostgreSQL and deploy on Heroku or AWS.
Built With
- bolt-pro-(prototyping)-apis:-openai-api-(copilot)
- css-frameworks/platforms:-react-(frontend)
- flask-(backend)
- html
- languages:-javascript
- planned-for-postgresql-cloud-services:-heroku-(planned)-tools:-dotenv-(environment-variables)
- postman-(api-testing)
- python
- react
- vite
- websockets-(real-time)-databases:-sqlite-(prototyping)
Log in or sign up for Devpost to join the conversation.