Elevate your coding journey.
One profile for every place you code - live stats, community rankings, real-time chat and secure 2FA, built as a production-grade platform.
About
CodeElevate is a robust, scalable, and dynamic coder community platform built to empower competitive programmers, software developers, students, learners, and professionals.
The platform provides an all-in-one ecosystem featuring integrated coding and development statistics across multiple platforms, a community-driven and category-based ranking system, a real-time messaging system with online user detection and image messaging, a user connection system, post sharing and engagement with optimistic UI updates, personalized profiles with an advanced profile management system, a notification system, and search and filter functionality. It incorporates secure multi-factor authentication (MFA) and authorization mechanisms, including two-factor authentication (2FA) using Time-Based One-Time Password (TOTP), QR-code based enrollment, and secure email OTP-based 2FA reset and recovery. The system is powered by seamless and optimized backend and frontend pipelines with structured database and cloud storage integration, intelligent caching system, along with performance and SEO optimization. Built using an MVC architecture with modular REST APIs, authentication, authorization, validation, and centralized error-handling layers for a scalable and maintainable codebase, the platform ensures production-grade, performance-driven reliability, efficient API usage, and enhanced scalability. It achieves top Google search visibility through its SEO-optimized architecture. It also features interactive custom 3D models, smooth animations, interactive 3D animations, and a modern, fully responsive UI/UX design.
The goal is to foster growth, collaboration, and innovation among coders worldwide.
Watch it in action.
A full walkthrough of the live application, feature by feature.
Features
Everything a coder profile needs, wired together.
Sixteen production features spanning security, social, stats and performance.
Multi-Factor Authentication & Authorization
Passport, JWT, session-based and token-based authentication layered with two-factor authentication using TOTP and QR-code enrollment. Email OTP verification is used for 2FA enablement and secure 2FA reset and recovery when the authenticator device is unavailable.
Profile Management System
Customizable profiles with editable details, skills, education, social links, coding & development profiles, profile images and banners, plus visibility controls for statistics.
Live CP/Coding & Development Statistics
Connect LeetCode, Codeforces, AtCoder, CodeChef, GeeksforGeeks, HackerRank, GitHub and GitLab profiles, with live LeetCode, Codeforces and GitHub API statistics.
Search & Filter Functionality
Smart, responsive search by name, role, domain or tag, with advanced filters for Trending, CP, Devs, Experience and Professionals.
Real-Time Messaging
Instant one-to-one text and image messaging with Socket.IO, online-user detection, responsive UI, optimistic updates and smooth animations.
Connection System
Follow, unfollow, connect, disconnect and message users with real-time communication, connection-status tracking and notifications.
Category-Based Rankings
Live leaderboards for Competitive Programmers, Developers, Rankers, Contributors and All-Rounders, updated every 24 hours with MongoDB-backed caching for faster, scalable and reliable performance.
Posts & Engagement
Create, edit and delete image posts, manage comments, like or unlike posts, and experience fast interactions through optimistic UI updates.
Notification System
Notifications for follows, unfollows, likes and connection requests, including accept/reject responses, with robust management and automatic expiry.
REST API Infrastructure
Modular REST APIs across 9 modules and 45+ endpoints covering authentication, profiles, messaging, rankings, posts, connections, notifications, coding statistics and development statistics, with layered security, validation, error handling and Postman testing.
Intelligent Caching & Optimization
MongoDB-backed TTL caching for LeetCode, Codeforces, GitHub and ranking data, reducing API requests, improving response times, handling rate limits and providing stale-cache fallbacks.
MERN & MVC Architecture
Scalable MERN and MVC architecture with layered backend services, component-based React frontend, REST and GraphQL APIs, real-time communication, cloud media storage, environment configuration, validation, centralized errors and production-grade security.
Interactive 3D Experience
Immersive Three.js CodeElevate models with multiple camera views, fluid animations, styling variations and intuitive real-time rotation controls.
Animations & Transitions
Smooth Framer Motion animations and transitions across pages and components for a more interactive and engaging user experience.
Responsive UI/UX
Modern mobile-first interface built with React, Tailwind CSS and Framer Motion, delivering responsive, accessible and visually rich experiences across screen sizes.
Production-grade SEO, Optimization & Performance
Production-grade SEO with Search Console, Bing Webmaster Tools, GA4, structured data, Open Graph, Twitter Cards, canonical URLs, sitemap, robots.txt, manifest/PWA configuration, preconnect/prefetch and Lighthouse validation, achieving #1 Google visibility and scores of 98 Performance, 96 Accessibility, 100 Best Practices and 100 SEO.
Stack
Technologies Used / Tech Stack.
Every technology used across the frontend, backend, database, security, architecture, SEO, tooling and deployment layers.
Frontend
Backend
Database & Storage
Authentication & Security
Architecture & Design
APIs Integrated
SEO & Website Optimization
Development Tools & Libraries
Deployment & Hosting
Architecture
Architecture, database & feature flows.
Every core system is diagrammed end to end.
Performance
SEO visibility & live-measured performance.
Audited with Lighthouse on the live deployment, and indexed through Google Search Console, Bing Webmaster Tools and Google Analytics 4 (GA4).
Install
Get CodeElevate running.
Backend and frontend run as separate services, each with their own environment file.
git clone https://github.com/OmkarArdekar12/CodeElevate.git cd CodeElevate
backend/.env
NODE_ENV=development PORT=8080 MONGODB_URL=your_mongodb_connection_string SESSION_SECRET=your_session_secret_key JWT_SECRET=your_jwt_secret_key CLOUD_NAME=your_cloudinary_cloud_name CLOUD_API_KEY=your_cloudinary_api_key CLOUD_API_SECRET=your_cloudinary_api_secret BACKEND_URL=http://localhost:8080 FRONTEND_URL=http://localhost:5173
frontend/.env
VITE_BACKEND_URL=http://localhost:8080
Run both services
cd backend && npm install && npm start cd frontend && npm install && npm start