CodeElevate - Elevate Your Coding Journey.

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, a user connection system, post sharing and engagement, 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).
The system is powered by seamless and optimized backend and frontend pipelines with structured database and cloud storage integration, along with performance and SEO optimization. Built using an MVC architecture for a modular, scalable, and maintainable codebase, the platform ensures production-grade, performance-driven reliability and 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.

CodeElevate

🌐 Live URL: https://codeelevate-community.vercel.app

CodeElevate Demo / Preview Video

🎥 Click here to watch full video on YouTube

CodeElevate SEO Visibility

📈 Click here to see the SEO Visibility/Result

Production-Grade SEO, Indexing & Web Performance Implementation with Verified Top Google Search Visibility

CodeElevate Performance

📊 Click here to see the Lighthouse Detailed Performance Report

Production-Grade, Live-Measured Web Performance & SEO Validation

---

Table of Content 📑

1. Description
2. Live Application
3. Demo / Preview Video
4. SEO Visibility & Indexing
5. Live-Measured Web Performance & SEO Validation
6. Overview
7. Features
8. Technologies Used / Tech Stack
9. System Architecture of CodeElevate
10. CodeElevate Database Design
11. Folders and Files Structure
    • Overview of Folders and Files Structure
    • Detailed Folders and Files Structure
12. Environment Variables Configuration
13. Installation
14. Structure Flow Diagrams, Web Performance & SEO Visibility
15. Features Preview
16. Audit & Performance Reports
17. Project Portal
18. License
19. Author

---

Overview 🖥️

CodeElevate is a MERN stack-based web application that empowers users to showcase their coding and development profiles in one unified platform. It enables learners, competitive programmers, professionals, coders, and developers to analyze, track, and elevate their progress in both competitive programming and software development. Users can compete, connect, and grow together by earning ranks across multiple categories, building meaningful connections, and engaging through posts, connections, and real-time messaging features. At CodeElevate, our goal is to inspire growth, celebrate achievement, and build a community where every coder can rise to their full potential.

---

Features ✨

S.No.	Feature	Description
1.	User Authentication & Authorization - Multi-Factor Authentication (MFA) with Two-Factor Authentication (2FA) using TOTP (Time-Based One-Time Password)	Robust and Secure authentication using Passport, Passport-Local-Strategy, Sessions, JWT, and Two-Factor Authentication (2FA) via TOTP and QR code for enhanced account protection.
2.	User Profile System & User Profile Management System	Comprehensive profiles with editable details, skills, education, social links, user details, coding and development profiles, customizable profile images and banners and show stats feature to control the visibility of CP and Development statistics.
3.	Competitive Programming and Development Profiles Stats	Users can add their Competitive Programming or Coding profiles (LeetCode, Codeforces, AtCoder, CodeChef, GeeksforGeeks, HackerRank) and development profiles (GitHub, GitLab). After enabling the Stats feature, real-time data from LeetCode, Codeforces, and GitHub APIs are displayed.
4.	Search & Filter Search Functionality	Smart, responsive search by names, roles, domains, or tags, with advanced filters for Trending, CP, Devs, Experience, and Professionals.
5.	Real-Time Messaging	Instant one-on-one text and image chat built using Socket.IO and Socket.IO Client, featuring real-time communication, online user detection, responsive UI and smooth UI animations.
6.	Connection System	Follow, unfollow, connect, disconnect, and message users seamlessly with real-time messaging system, connection status tracking and notifications.
7.	Ranking System	Dynamic leaderboards across five categories — Competitive Programmers, Developers, Rankers, Contributors, and All-Rounders — using live API data. Rankings automatically updated every 24 hours.
8.	Post Feature	Create, edit, and delete posts with image uploads to share updates and achievements. Add or delete comments, and like or unlike posts seamlessly.
9.	Notification System	Notifications for follows, unfollows, likes, and connection requests (including accept or reject responses), with robust management and auto-expiry.
10.	API (Application Programming Interface) Routes	Modular, secure REST API with layered authentication, authorization, Two-Factor Authentication (2FA), and validation middleware for scalability and maintainability.
11.	Architecture & Security	Developed using the MERN Stack, Socket.IO, MVC Design Pattern, RESTful APIs and Cloudinary for cloud storage management, with Two-Factor Authentication, Authorization, and Validation layers implemented for Robust Performance and Security.
12.	Interactive 3D Models, 3D Animations & Real-Time 3D Interactions	An immersive 3D CodeElevate logo showcased on the About page, featuring views from multiple camera angles, fluid animations, and styling variations. Built with dynamic transitions for a captivating visual experience, users can seamlessly rotate the models through intuitive interactive controls.
13.	Animations & Transitions	Smooth, visually appealing animations and transitions across pages and components using Framer Motion, enhancing interactivity and user engagement throughout the platform.
14.	Responsive UI/UX (User Interface and User Experience)	Modern, mobile-first, fully responsive interface built with React, Tailwind CSS, and Framer Motion, featuring smooth animations and visually rich, accessible experiences across all screen sizes.

---

Technologies Used 💻🛠️

#	Category	Technologies / Tools
➤	Frontend	React.js, Vite, Tailwind CSS, Socket.io Client, Framer Motion, Optimistic UI Updates (State-based Incremental Rendering), Axios, React Router DOM, React Context API (Global Session State Management), Three.js (3D Rendering & Real-Time 3D Interactions), React Hot Toast, React Slick, Slick Carousel, 3D Animations, Smooth & Seamless UI Transitions and Animations, Interactive Custom 3D Logo Components, Performance Optimization, SEO Optimization, Fully Responsive UI/UX, JavaScript, CSS3, HTML5, Lucide React, React Icons, FontAwesome, Google Fonts
➤	Backend	Node.js, Express.js, MongoDB, Mongoose, Socket.io (Real-time Communication), RESTful APIs (Representational State Transfer Application Programming Interface), MVC (Model–View–Controller) Architecture / Design Pattern / Framework, RESTful web-service, Performance Optimization, Passport.js, Passport-Local, Cloudinary, Multer, Multer-Storage-Cloudinary, GraphQL, Joi, CORS (Cross-Origin Resource Sharing), Axios
➤	Database	MongoDB (MongoDB Atlas), Mongoose (Object Document Mapper (ODM) for MongoDB), Cloudinary (Cloud Storage for Media Files)
➤	Authentication & Security	Passport.js, Passport-Local-Strategy, Connect-Mongo (for Session Store), JWT (JSON Web Token), bcrypt.js, Express-Session, Cookie-Parser, Body-Parser, Speakeasy (Two-Factor Authentication (2FA)), QRCode (2FA), Joi Validations
➤	Architecture & Design	MERN Stack Architecture (MongoDB, Express, React, Node), MVC Design Pattern, RESTful API Structure, SessionContext for Global State Management, Real-time Communication using Socket.io, Robust, Modular and Scalable Codebase, Environment Configuration using dotenv, Optimized Folder Structure, Responsive and Component-Based Frontend Design, Client-side State Management with Incremental Update
➤	APIs Integrated	Custom REST APIs (CodeElevate): Authentication, Profiles, Messages, Posts, Rankings, Connections, Notifications, Competitive Programming Stats, Development Stats. External APIs: LeetCode GraphQL API, Codeforces REST API, GitHub REST API (for Displaying Competitive Programming Profiles / Coding Profiles Statistics and Development Profiles Statistics).
➤	SEO (Search Engine Optimization) & Website Optimization	Google Search Console (for Indexing & Performance Tracking), SEO-friendly Meta Tags (Title, Description, Keywords, Canonical URL, Author, Language), Open Graph (OG) Tags (for Facebook and Linkedin sharing), Twitter Card Meta Tags, Schema.org JSON-LD Structured Data (Organization & Author Info), Robots.txt (for Crawler Directives), Sitemap.xml (for Site Indexing), Manifest.json (for Web App Metadata & Theme Color), Mobile Viewport Meta Tag, Apple Touch Configuration (PWA (Progressive Web Application) readiness), Theme Color for Browser UI, Fast build using Vite, TailwindCSS for Lightweight CSS, Responsive Design for all Devices, Preconnect & Prefetch tags, Optimistic UI Updates, HTTPS-secured URLs (via Vercel & Render)
➤	Development Tools & Libraries	Nodemon, Vite Build, dotenv, Postman, Hoppscotch, Thunder Client, VS Code, Git, GitHub, Google Search Console, Canva (for UI Assets)
➤	Deployment & Hosting	Vercel (Frontend Hosting), Render (Backend Hosting), MongoDB Atlas (Database Hosting), Cloudinary (Cloud Storage), GitHub Pages (Portal Hosting)

---

System Architecture of CodeElevate ⌨️🏗️

---

CodeElevate Database Design 💾🗃️

---

Folders & Files Structure 📂🗄️

Overview of Folders & Files Structure

📂 CODEELEVATE
├── 📁 backend
│   ├── 📁 src
│   ├── .env
│   ├── .gitignore
│   ├── package.json
│   ├── package-lock.json
│   └── 📁 node_modules
├── 📁 frontend
│   ├── 📁 src
│   ├── .env
│   ├── .gitignore
│   ├── eslint.config.js
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── vercel.json
│   ├── vite.config.js
│   └── 📁 node_modules
├── 📁 docs
│   └── index.html
├── .gitignore
├── .gitattributes
├── LICENSE
└── README.md

Detailed Folders & Files Structure

📂 CODEELEVATE
├── 📁 backend
│   ├── 📁 src
│   │   ├── 📁 controllers
│   │   │   ├── authController.js
│   │   │   ├── profileController.js
│   │   │   ├── rankingController.js
│   │   │   ├── messageController.js
│   │   │   ├── connectionController.js
│   │   │   ├── postController.js
│   │   │   ├── notificationController.js
│   │   │   ├── competitiveProgrammingStatsController.js
│   │   │   └── developmentProfilesStatsController.js
│   │   ├── 📁 middlewares
│   │   │   ├── auth.js
│   │   │   ├── auth2FA.js
│   │   │   ├── verifyAuth.js
│   │   │   ├── userValidations.js
│   │   │   ├── profileValidations.js
│   │   │   ├── postValidations.js
│   │   │   ├── messageValidations.js
│   │   │   ├── notificationValidations.js
│   │   │   └── errorHandlers.js
│   │   ├── 📁 routes
│   │   │   ├── authRoutes.js
│   │   │   ├── profileRoutes.js
│   │   │   ├── rankingRoutes.js
│   │   │   ├── messageRoutes.js
│   │   │   ├── postRoutes.js
│   │   │   ├── connectionRoutes.js
│   │   │   ├── notificationRoutes.js
│   │   │   ├── competitiveProgrammingStatsRoutes.js
│   │   │   └── developmentProfilesStatsRoutes.js
│   │   ├── 📁 utils
│   │   │   ├── ExpressError.js
│   │   │   └── wrapAsync.js
│   │   ├── 📁 validations
│   │   │   ├── userValidations.js
│   │   │   ├── profileValidations.js
│   │   │   ├── postValidations.js
│   │   │   ├── messageValidations.js
│   │   │   └── notificationValidations.js
│   │   ├── 📁 models
│   │   │   ├── user.js
│   │   │   ├── profile.js
│   │   │   ├── rankingCache.js
│   │   │   ├── post.js
│   │   │   ├── message.js
│   │   │   └── notification.js
│   │   ├── 📁 schemas
│   │   │   ├── userSchema.js
│   │   │   ├── profileSchema.js
│   │   │   ├── rankingCacheSchema.js
│   │   │   ├── postSchema.js
│   │   │   ├── messageSchema.js
│   │   │   └── notificationSchema.js
│   │   ├── 📁 lib
│   │   │   ├── 📁 docs
│   │   │   │   ├── codeElevateArchitecture.png
│   │   │   │   └── mongodbDatabaseStructure.png
│   │   │   ├── 📁 reports
│   │   │   │   ├── 📁 lighthouse-report
│   │   │   │   │   └── index.html
│   │   │   │   ├── lighthouseAuditSummary.png
│   │   │   │   ├── lighthousePerformanceMetrics.png
│   │   │   │   ├── prevLighthouseAuditSummary.png
│   │   │   │   ├── prevLighthousePerformanceMetrics.png
│   │   │   │   ├── prevLighthouseReport.pdf
│   │   │   │   ├── currLighthouseReport.pdf
│   │   │   │   ├── CodeElevateLighthouseReport.html
│   │   │   │   ├── CodeElevateLighthouseReport.json
│   │   │   │   └── LighthouseReport.pdf
│   │   │   ├── 📁 seo
│   │   │   │   ├── crawlStats1.png
│   │   │   │   ├── crawlStats2.png
│   │   │   │   ├── httpReport.png
│   │   │   │   ├── indexedPages1.png
│   │   │   │   ├── indexedPages2.png
│   │   │   │   ├── robotsStats.png
│   │   │   │   ├── seoPerformance1.png
│   │   │   │   ├── seoPerformance1curr.png
│   │   │   │   ├── seoPerformance1prev.png
│   │   │   │   ├── seoPerformance2.png
│   │   │   │   ├── seoPerformance2curr.png
│   │   │   │   ├── seoPerformance2prev.png
│   │   │   │   ├── seoResult.png
│   │   │   │   ├── seoSearchResult.png
│   │   │   │   ├── seoSearchUpdated.png
│   │   │   │   ├── seoSearchUpdated1.png
│   │   │   │   ├── seoSearchUpdated2.png
│   │   │   │   ├── seoSitemaps1.png
│   │   │   │   ├── seoSitemaps2.png
│   │   │   │   ├── seoSiteResult.png
│   │   │   │   ├── seoStats.png
│   │   │   │   ├── seoStatsprev.png
│   │   │   │   └── urlInspection.png
│   │   │   └── 📁 diagrams
│   │   │       ├── authenticationDiagram.png
│   │   │       ├── authorizationDiagram.png
│   │   │       ├── profileSystemDiagram.png
│   │   │       ├── rankingSystemDiagram.png
│   │   │       ├── messagingSystemDiagram.png
│   │   │       ├── postSystemDiagram.png
│   │   │       ├── connectionSystemDiagram.png
│   │   │       ├── notificationSystemDiagram.png
│   │   │       ├── cpStatsSystemDiagram.png
│   │   │       └── devsStatsSystemDiagram.png
│   │   ├── 📁 config
│   │   │   ├── cloudConfig.js
│   │   │   ├── dbConnect.js
│   │   │   └── passportConfig.js
│   │   └── index.js
│   ├── .env
│   ├── .gitignore
│   ├── package.json
│   ├── package-lock.json
│   └── 📁 node_modules
│
├── 📁 frontend
│   ├── 📁 src
│   │   ├── 📁 service
│   │   │   ├── api.js
│   │   │   ├── socketService.js
│   │   │   ├── authApi.js
│   │   │   ├── profilesApi.js
│   │   │   ├── rankingsApi.js
│   │   │   ├── messagesApi.js
│   │   │   ├── connectionApi.js
│   │   │   ├── postsApi.js
│   │   │   ├── competitiveProgrammingStatsApi.js
│   │   │   ├── developmentProfilesStatsApi.js
│   │   │   ├── notificationsApi.js
│   │   │   └── 📁 utils
│   │   │       └── getToken2FA.js
│   │   ├── 📁 context
│   │   │   └── SessionContext.jsx
│   │   ├── 📁 assets
│   │   │   ├── CodeElevateLogo.gif
│   │   │   └── CodeElevateLogo.png
│   │   ├── 📁 components
│   │   │   ├── ProtectedRoute.jsx
│   │   │   ├── PrivateRoute.jsx
│   │   │   ├── CodeElevate3DLogo.jsx
│   │   │   ├── Logo3D.jsx
│   │   │   ├── Logo3DGold.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── LoginForm.jsx
│   │   │   ├── TwoFASetup.jsx
│   │   │   ├── TwoFAVerification.jsx
│   │   │   ├── LeetCodeCardStats.jsx
│   │   │   ├── CodeforcesCardStats.jsx
│   │   │   ├── GitHubCardStats.jsx
│   │   │   ├── Loading.jsx
│   │   │   ├── Loading2.jsx
│   │   │   ├── PostCard.jsx
│   │   │   ├── Comment.jsx
│   │   │   ├── PostsList.jsx
│   │   │   ├── NotFound.jsx
│   │   │   └── Error.jsx
│   │   ├── 📁 pages
│   │   │   ├── HomePage.jsx
│   │   │   ├── LoginPage.jsx
│   │   │   ├── Setup2FA.jsx
│   │   │   └── Verify2FA.jsx
│   │   ├── 📁 home
│   │   │   ├── Home.jsx
│   │   │   ├── Hero.jsx
│   │   │   ├── TopCard.jsx
│   │   │   ├── Profile.jsx
│   │   │   ├── ProfileSection.jsx
│   │   │   ├── SearchSection.jsx
│   │   │   ├── Search.jsx
│   │   │   ├── FilterSection.jsx
│   │   │   └── Filter.jsx
│   │   ├── 📁 profiles
│   │   │   ├── ProfilePage.jsx
│   │   │   ├── EditProfilePage.jsx
│   │   │   ├── UserProfileSection.jsx
│   │   │   ├── ButtonSection.jsx
│   │   │   ├── ProfileSettings.jsx
│   │   │   ├── ConnectionPage.jsx
│   │   │   ├── AboutSection.jsx
│   │   │   ├── CompetitiveProgrammingSection.jsx
│   │   │   ├── DevelopmentSection.jsx
│   │   │   ├── CompetitiveProgrammingStatsSection.jsx
│   │   │   ├── DevelopmentStatsSection.jsx
│   │   │   ├── PostsSection.jsx
│   │   │   ├── DomainRoleSection.jsx
│   │   │   ├── TagsSection.jsx
│   │   │   ├── EducationSection.jsx
│   │   │   └── SocialsSection.jsx
│   │   ├── 📁 messages
│   │   │   ├── 📁 skeletons
│   │   │   │   ├── ChatSkeleton.jsx
│   │   │   │   └── SidebarSkeleton.jsx
│   │   │   ├── MessagePage.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   ├── ChatWindow.jsx
│   │   │   ├── ChatHeader.jsx
│   │   │   ├── MessageBubble.jsx
│   │   │   ├── MessageInput.jsx
│   │   │   └── NoChatSelected.jsx
│   │   ├── 📁 posts
│   │   │   ├── CreatePostPage.jsx
│   │   │   ├── EditPostPage.jsx
│   │   │   ├── PostPage.jsx
│   │   │   ├── PostsList.jsx
│   │   │   ├── PostCard.jsx
│   │   │   └── Comment.jsx
│   │   ├── 📁 rankings
│   │   │   ├── RankingPage.jsx
│   │   │   ├── SelectRank.jsx
│   │   │   ├── Rank.jsx
│   │   │   └── RankingList.jsx
│   │   ├── 📁 notifications
│   │   │   ├── NotificationPage.jsx
│   │   │   ├── ConnectRequestNotification.jsx
│   │   │   └── Notification.jsx
│   │   ├── 📁 about
│   │   │   ├── AboutPage.jsx
│   │   │   ├── Hero.jsx
│   │   │   ├── Features.jsx
│   │   │   ├── AuthenticationFeature.jsx
│   │   │   ├── ProfileSystem.jsx
│   │   │   ├── ProfileOptions.jsx
│   │   │   ├── RankingSystemFeature.jsx
│   │   │   ├── StatsFeature.jsx
│   │   │   ├── PostingFeature.jsx
│   │   │   ├── RealTimeMessagingSystemFeature.jsx
│   │   │   ├── ConnectionSystem.jsx
│   │   │   ├── SearchAndFilterSearchFunctionalityFeature.jsx
│   │   │   ├── NotificationFeature.jsx
│   │   │   ├── UserCentricDesign.jsx
│   │   │   ├── ResponsiveDesignFeature.jsx
│   │   │   ├── ImageSection.jsx
│   │   │   ├── ContentSection.jsx
│   │   │   └── Creator.jsx
│   │   ├── routes.jsx
│   │   ├── main.jsx
│   │   ├── socket.js
│   │   ├── App.jsx
│   │   ├── App.css
│   │   └── index.css
│   ├── 📁 public
│   │   ├── 📁 about
│   │   │   ├── authentication.png
│   │   │   ├── accessibility.png
│   │   │   ├── searchFunctionality.png
│   │   │   ├── profilePreview.png
│   │   │   ├── profileStatsPreview.png
│   │   │   ├── profileOptions.png
│   │   │   ├── rankingSystem.png
│   │   │   ├── rankingFilters.png
│   │   │   ├── statsSystem.png
│   │   │   ├── postFeature.png
│   │   │   ├── postOptions.png
│   │   │   ├── messagingSystem.png
│   │   │   ├── messagingProcess.png
│   │   │   ├── messagingSystemResponsiveness.png
│   │   │   ├── connectionProcess.png
│   │   │   ├── notificationSystem.png
│   │   │   ├── custom3DSilverLogo.png
│   │   │   ├── custom3DGoldLogo.png
│   │   │   ├── responsiveness.png
│   │   │   └── creator.png
│   │   ├── 📁 icons
│   │   │   ├── LogoCodeElevate.png
│   │   │   └── LogoCodeElevate-share.png
│   │   │   └── LogoCodeElevate-192.png
│   │   │   └── LogoCodeElevate-512.png
│   │   │   └── LogoCodeElevate-logo.png
│   │   ├── 📁 images
│   │   │   ├── CodeElevate3DLogo.stl
│   │   │   ├── CodeElevateLogo.png
│   │   │   ├── CodeElevateLogo.gif
│   │   │   ├── LogoCodeElevate.png
│   │   │   ├── CodeElevateText.gif
│   │   │   ├── defaultBgBannerImage.png
│   │   │   ├── defaultUserImage.png
│   │   │   ├── userImage.png
│   │   │   ├── bgBannerImage.png
│   │   │   ├── rank.png
│   │   │   ├── trophy.png
│   │   │   ├── computer.png
│   │   │   ├── laptop.png
│   │   │   ├── laptopTrophy.png
│   │   │   ├── CodeforcesLogo.png
│   │   │   ├── LeetCodeLogo.png
│   │   │   ├── LeetCodeGuardianBadge.png
│   │   │   ├── LeetCodeKnightBadge.png
│   │   │   ├── logo.gif
│   │   │   ├── CodeElevate.gif
│   │   │   ├── CodeElevateLogoGIF.gif
│   │   │   ├── gifLogo.png
│   │   │   ├── logo.png
│   │   │   └──CodeElevate.png
│   │   ├── 📁 videos
│   │   │   └── codeelevateGIF.gif
│   │   ├── favicon.ico
│   │   ├── sitemap.xml
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── .env
│   ├── .gitignore
│   ├── eslint.config.js
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── vercel.json
│   ├── vite.config.js
│   └── 📁 node_modules
│
├── 📁 docs
│   ├── 📁 assets
│   │   ├── codeelevateGIF.gif
│   │   ├── CodeElevateLogo.gif
│   │   ├── CodeElevateText.gif
│   │   ├── favicon.ico
│   │   └── logo.png
│   ├── 📁 docs
│   │   ├── codeElevateArchitecture.png
│   │   └── mongodbDatabaseStructure.png
│   ├── 📁 reports
│   │   ├── 📁 lighthouse-report
│   │   │   └── index.html
│   │   ├── lighthouseAuditSummary.png
│   │   ├── lighthousePerformanceMetrics.png
│   │   └── LighthouseReport.pdf
│   ├── 📁 seo
│   │   ├── crawlStats1.png
│   │   ├── crawlStats2.png
│   │   ├── httpReport.png
│   │   ├── indexedPages1.png
│   │   ├── indexedPages2.png
│   │   ├── robotsStats.png
│   │   ├── seoPerformance1.png
│   │   ├── seoPerformance1curr.png
│   │   ├── seoPerformance1prev.png
│   │   ├── seoPerformance2.png
│   │   ├── seoPerformance2curr.png
│   │   ├── seoPerformance2prev.png
│   │   ├── seoResult.png
│   │   ├── seoSearchResult.png
│   │   ├── seoSearchUpdated.png
│   │   ├── seoSearchUpdated1.png
│   │   ├── seoSearchUpdated2.png
│   │   ├── seoSitemaps1.png
│   │   ├── seoSitemaps2.png
│   │   ├── seoSiteResult.png
│   │   ├── seoStats.png
│   │   ├── seoStatsprev.png
│   │   └── urlInspection.png
│   ├── 📁 diagrams
│   │   ├── authenticationDiagram.png
│   │   ├── authorizationDiagram.png
│   │   ├── profileSystemDiagram.png
│   │   ├── rankingSystemDiagram.png
│   │   ├── messagingSystemDiagram.png
│   │   ├── postSystemDiagram.png
│   │   ├── connectionSystemDiagram.png
│   │   ├── notificationSystemDiagram.png
│   │   ├── cpStatsSystemDiagram.png
│   │   └── devsStatsSystemDiagram.png
│   └── index.html
│
├── .gitignore
├── .gitattributes
│
├── LICENSE
└── README.md

---

Environment Variables Configuration ⚙️

To run CodeElevate successfully, you must configure the required environment variables for both backend and frontend parts of the project.

1. Backend Configuration

Create a .env file inside the backend directory:

cd backend
touch .env

.env

NODE_ENV=development  # or 'production' during deployment
PORT=8080 or your_port_number
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 or your_backend_url
FRONTEND_URL=http://localhost:5173 or your_frontend_url

2. Frontend Configuration

Create a .env file inside the frontend directory:

cd frontend
touch .env

.env

VITE_BACKEND_URL=http://localhost:8080 or your_backend_url

---

Installation 💽📩

1. Clone the Repository

git clone https://github.com/OmkarArdekar12/CodeElevate.git
cd CodeElevate

2. Backend Installation

2.1. Backend Setup

cd backend
npm install

2.2. Run the Backend Server

npm start

or

node src/index.js

3. Frontend Installation

3.1. Frontend Setup

cd frontend
npm install

3.2. Run the Frontend Server

npm start

or

npm run dev

4. Contribution Guide

4.1. Fork the Repository

• Click the Fork button on the top-right corner of this repository page.

4.2. Clone Your Fork

git clone https://github.com/<your-username>/CodeElevate.git
cd CodeElevate

4.3. Create a New Branch

git checkout -b feature/your-feature-name

4.4. Make Your Changes

• Implement your changes.

4.5. Commit Your Changes

git add .
git commit -m "Add: description of your change"

4.6. Push the Changes

git push origin feature/your-feature-name

4.7. Create a Pull Request (PR)

• Go to your forked repository on GitHub.

• Click “Compare & Pull Request”.

• Provide a clear description of your changes.

• Submit your PR for review.

---

Structure Flow Diagrams 📊, Web Performance ⚡, and SEO Visibility 🌐

Two Factor Authentication	Two Factor Authorization
Profile Management System	Ranking System
Real-time Messaging System	Post Management and Engagement System
Connection System	Notification System
Competitive Programming Stats System	Development Stats System
Ranked #1 on Google Search with fully indexed routes and strong SEO visibility
SEO Google Search Visibility
Google Search Visibility	Google Search Visibility with Different Logo Icon
SEO Crawl Stats	SEO Detailed Crawl Stats
SEO Performance	SEO Detailed Performance
Page indexing	Indexed pages
HTTPS	Browser Search Visibility
SEO Sitemaps Success	Search Visibility
sitemap.xml Accepted and Successfully Indexed
robots.txt Accepted and Successfully Validated
Lighthouse Audit Summary (Production)
Lighthouse Performance Metrics (Core Web Vitals)
SEO Achievement Stats
URL Inspection

---

Features Preview 🎨🪟

Two Factor Authentication using TOTP	User Centric UI Design & Multi-functionality
Search and Filter Search Functionality	User Profile Stats
User Profile	User Profile Options
Post Feature	Post Options
Connection System and Connection Process	Messaging System
Messaging Process	Messaging System Responsiveness
Ranking Categories	Ranking System
Notification System	Stats Feature
Custom 3D Logo	Custom 3D Logo
Responsive UI Design

---

Audit and Performance Reports 🧾

Verified and production-grade audit reports generated using industry-standard tools to evaluate web performance, accessibility, best practices, and SEO on the live CodeElevate application.

• CodeElevate Application Live Production Level Lighthouse Performance Report

• Lighthouse Performance Report (PDF)

---

Project Portal 📘

Publicly hosted documentation and reports for CodeElevate, served via GitHub Pages. This portal consolidates performance audits, SEO validation, and system documentation in a single, accessible location.

• CodeElevate Project Portal

---

License 📄

This project is licensed under the terms of the MIT License.

See the LICENSE file for more information.

---

Author 👨‍💻

Omkar Ardekar 💻

---

---