dev-arena
<div align="center">
# 🚀 DevArena
### The Next-Generation AI-Powered Coding Platform & Personalized Learning Coach
**Official Submission for HACKNEX SEASON 2**
https://dev-arena-1.onrender.com
</div>
---
## 🎯 The Problem
Learning Data Structures and Algorithms is often fragmented across multiple platforms.
Students typically need separate platforms for learning concepts, solving coding problems, tracking progress, competing with other developers, and getting personalized guidance.
Most coding platforms provide static problem-solving experiences and generic solutions, leaving learners without continuous feedback about their actual strengths, weaknesses, and reasoning process.
**DevArena brings these experiences together into one unified platform.**
---
## 💡 Our Solution
**DevArena** is an AI-powered coding and learning platform that combines competitive programming, personalized learning, real-time multiplayer coding, AI coaching, and developer analytics in a single environment.
The platform helps developers not only **solve problems**, but also understand:
- What they are good at
- Where they struggle
- What they should learn next
- How they are progressing
- How they perform against other developers
DevArena combines AI-powered guidance with real coding practice and real-time competition to create a more interactive learning experience.
---
## 📊 Dashboard & Coding Progress
The DevArena Dashboard provides a centralized overview of a developer's coding journey.
It brings together:
- Problems solved
- Difficulty distribution
- Duel statistics
- Win rate
- Arena ranking
- Problem of the Day
- Coding activity
- Platform synchronization
This allows developers to understand their overall coding performance from a single dashboard.
<p align="center">
<img src="SCREENSHOT_DASHBOARD" width="90%">
</p>
<p align="center">
<i>
Dashboard — a unified overview of coding progress, competitive performance,
problem-solving statistics, and daily activity.
</i>
</p>
---
## 📈 Coding Activity & Consistency
DevArena visualizes coding activity over time using a contribution-style activity graph and an activity timeline.
The platform can represent activity from multiple coding platforms, helping developers understand their consistency and identify changes in their problem-solving habits.
Supported activity sources include:
- LeetCode
- Codeforces
- CodeChef
- AtCoder
- HackerRank
- GeeksforGeeks
<p align="center">
<img src="SCREENSHOT_ACTIVITY" width="90%">
</p>
<p align="center">
<i>
Activity Timeline — visual representation of coding activity and consistency
across different competitive programming platforms.
</i>
</p>
---
## 🤖 AI Coach
DevArena includes a personalized **AI Coding Coach** powered by Groq.
Instead of simply returning solutions, the AI Coach is designed to guide developers through their reasoning process.
It can:
- Analyze coding performance
- Identify weak areas
- Suggest learning directions
- Answer technical questions
- Provide interview preparation guidance
- Generate topic-specific roadmaps
- Interact through voice
The AI Coach also provides a visual **Skill Analysis** based on the developer's coding activity and performance.
<p align="center">
<img src="SCREENSHOT_AI_COACH" width="90%">
</p>
<p align="center">
<i>
AI Coach — personalized skill analysis, focus areas, and conversational
coding guidance based on the developer's activity.
</i>
</p>
### 🎙️ Voice-Powered AI Coaching
DevArena integrates **ElevenLabs** to make the AI Coach interactive through voice.
The system supports:
- 🎤 Speech-to-Text for user questions
- 🔊 Text-to-Speech for AI responses
Users can speak naturally with their coding coach instead of relying entirely on typed conversations.
---
## 🧠 Personalized Learning Path & Socratic Quiz
DevArena generates a personalized learning path based on the developer's weaknesses and progression.
Recommended topics are ranked according to identified focus areas.
Examples include:
- Hash Tables
- Two Pointers
- Dynamic Programming
- Trees
- Graphs
Users can directly launch a **Socratic Quiz** for a selected topic.
The Socratic approach focuses on understanding the developer's reasoning rather than simply checking whether the final answer is correct.
<p align="center">
<img src="SCREENSHOT_LEARNING_PATH" width="90%">
</p>
<p align="center">
<i>
Personalized Learning Path — recommended DSA topics based on identified
weaknesses, with an integrated Socratic Quiz workspace.
</i>
</p>
---
## ⚔️ Live Coding Duels
DevArena transforms coding practice into a real-time competitive experience.
Developers can challenge friends or participate in live coding duels where both players solve the same programming problem.
The Live Duel system includes:
- Real-time Socket.IO communication
- Server-authoritative game state
- Live opponent status
- Countdown timers
- Code synchronization
- JDoodle-based code execution
- Submission evaluation
- Winner/loser tracking
- XP and statistics updates
The objective is to make coding practice more interactive and competitive.
<p align="center">
<img src="SCREENSHOT_LIVE_DUEL" width="90%">
</p>
<p align="center">
<i>
Live Coding Duel — real-time competitive coding with synchronized game state,
live opponent status, timers, and code evaluation.
</i>
</p>
---
## 🛡️ Anti-Cheat System
Live Duels include a server-authoritative anti-cheat system designed to detect suspicious behavior during active competitions.
The system monitors signals such as:
- Fullscreen exits
- Tab visibility changes
- Focus loss
- Suspicious large code pastes
- Repeated anti-cheat violations
Anti-cheat events are reported to the backend through Socket.IO.
The server maintains the authoritative violation state and can automatically forfeit a player after the configured violation threshold.
This prevents the client from directly manipulating the duel outcome.
> AI-generated-code detection is treated as a signal rather than a standalone automatic verdict, avoiding unreliable client-side assumptions.
---
## 👥 Friends & Social Competition
DevArena includes social features that allow developers to connect and compete with each other.
Users can:
- Search for other developers
- Manage their friends list
- Challenge friends to Live Duels
- Receive duel invitations
- Accept or decline challenges
<p align="center">
<img src="SCREENSHOT_FRIENDS" width="90%">
</p>
<p align="center">
<i>
Friends & Duel Challenges — connect with other developers and start
real-time coding competitions.
</i>
</p>
---
## 🧩 Secure Code Execution
DevArena integrates **JDoodle** as its code execution engine.
Supported languages include:
- JavaScript
- Java
- C++
Code execution requests are handled through the backend integration, keeping execution credentials away from the frontend.
JDoodle powers code execution for coding practice and Live Duel evaluation.
---
# 🏗️ System Architecture
```text
┌──────────────────────┐
│ React + Vite │
│ Frontend │
└──────────┬───────────┘
│
REST API + Socket.IO
│
┌──────────▼───────────┐
│ Node.js + Express │
│ Backend │
└──────┬───────┬───────┘
│ │
┌───────────┘ └────────────┐
▼ ▼
┌─────────────┐ ┌─────────────┐
│ MongoDB │ │ Socket.IO │
│ Database │ │ Live Duels │
└─────────────┘ └─────────────┘
│
┌─────────┼───────────┬────────────┐
▼ ▼ ▼ ▼
Groq AI ElevenLabs JDoodle Coding
TTS / STT Execution Platforms
https://youtu.be/G6HjCkQkRB4?si=YvANcCYaRGpt6Vpl