The Coding Platform is a web-based application inspired by platforms like LeetCode and HackerRank, designed to help users practice programming, improve problem-solving skills, and prepare for technical interviews.
It provides a structured and interactive environment where users can:
- Solve coding problems across multiple difficulty levels
- Write and execute code in an integrated editor
- Submit solutions and receive feedback
- Track progress and performance
- Compete via leaderboards and contests
- Get AI-powered hints for better learning
This is a full-stack coding platform designed for:
- Coding practice
- Code execution and submission
- Performance tracking
- Competitive programming (contests)
- Ranking systems
| Stage | Description |
|---|---|
| Static | UI only |
| Hybrid | Partial API integration |
| Dynamic | Fully backend-driven system |
- Authentication
- Problem Management
- Code Execution
- Submissions
- Leaderboard
- Contests
- Dashboard & Profile
Each module evolves through: UI → API → Database → Persistent System
Frontend (HTML, CSS, JS)
↓
API Layer (HTTP Requests)
↓
Backend (Node.js / Express)
↓
Database (MongoDB / Firebase)
- Client-Server Architecture
- RESTful APIs
- Modular Backend Design
User Action → API Call → Backend → Database → Response → UI Update
Handles UI and user interaction.
Pages:
- index.html
- problems.html
- problem.html
- submissions.html
- leaderboard.html
- contests.html
- dashboard.html
- profile.html
- login/signup
Responsibilities:
- Form validation
- API calls
- State management
- Filtering problems
State Types:
- Local State
- Global State
| Method | Purpose |
|---|---|
| GET | Fetch data |
| POST | Create data |
| PATCH | Update data |
| DELETE | Remove data |
Handles:
- Business logic
- Authentication
- Code execution
- Ranking system
Stores:
- Users
- Problems
- Submissions
- Contests
- Leaderboard data
- Login & Signup
- JWT Authentication
- Secure Sessions
User → POST /api/auth/login → Backend verifies → JWT Token → Stored → Used for requests
- Password hashing
- Token validation
- Input validation
- Browse problems
- Filter by difficulty
- View detailed problem statements
GET /api/problemsGET /api/problems/:id
- Run code in real-time
- View outputs and errors
User → Write Code → POST /api/run-code → Execution → Result
- Submit solutions
- Track submission history
- View verdicts
POST /api/submit-codeGET /api/submissions
- Rank users
- Display scores
GET /api/leaderboard
- View contests
- Register for contests
GET /api/contestsPOST /api/contests/:id/register
- Track solved problems
- Performance stats
- Activity heatmap
GET /api/user/stats
- AI-generated hints
- Learning assistance
POST /api/ai/hint
| Feature | Static Version | Dynamic Version |
|---|---|---|
| Loading | Fake | Real |
| Data | Hardcoded | API-based |
| Errors | Not handled | Handled via API |
- Connect frontend with APIs
- Implement full CRUD operations
- Add leaderboard & analytics
- Real-time features + AI integration
- HTML5
- CSS3
- JavaScript
- Node.js
- Express.js
- MongoDB / Firebase
/
├── index.html
├── problems.html
├── problem.html
├── submissions.html
├── leaderboard.html
├── contests.html
├── dashboard.html
├── profile.html
├── login.html
├── signup.html
├── style.css
└── assets/
- Static UI in early stages
- No real-time execution initially
- Limited backend integration
- No persistent storage (in static phase)
- Real-time code execution engine
- Advanced analytics dashboard
- AI-based recommendations
- Multi-language support
- Interview preparation tracks
- Peer competition & social features
- Full API integration readiness
- Scalable backend architecture
- Modular system design
This project transforms a static frontend UI into a fully functional coding platform.
- Secure authentication system
- Code execution engine
- Submission tracking
- Leaderboard & contest system
- AI-powered learning assistance
This project is designed for learning, hackathons, and scalable development. Feel free to fork, extend, and enhance it.
Open for educational and development purposes.
💡 Code. Compete. Improve.