DashCode

Unified Competitive Programming Analytics Platform and Developer Showcase

Executive Summary

DashCode is an enterprise-grade competitive programming analytics platform and developer portfolio synthesizer. The application unifies profile statistics, contest history, and submission telemetry from four primary competitive programming platforms into a single interface:

LeetCode: Problem volume distribution, acceptance rates, and ranking metrics
Codeforces: Real-time ELO ratings, rank tier classifications, and round history
CodeChef: Star tier evaluations, global standings, and division ratings
HackerRank: Track badges, skill milestones, and verified exercise completions

The system provides algorithmic domain radar tracking, an interactive 365-day submission heatmap, upcoming contest countdown schedules, peer benchmark comparisons, and an exportable developer card generator for technical portfolios and repository documentation.

Interface and Analytics Suite Gallery

1. Dashboard Command Center Overview

The central command console integrates multi-platform problem volumes, peak rating crests, streak analytics, and individual platform matrices with difficulty segmentation.

Figure 1: Main command dashboard featuring the top Bento statistics grid, platform matrix cards, and 365-day contribution heatmap.

2. Primary KPI Bento Telemetry

High-level operational metrics highlighting aggregate solved volumes across four coding networks, peak ELO rating tiers, and continuous practice streaks.

Figure 2: Bento statistics grid presenting 3,290 aggregate solved problems, 2,315 Master rating status, and unbroken streak telemetry.

3. Four-Platform Telemetry Matrices

Dedicated platform telemetry engines displaying real-time metrics, global ranks, acceptance percentages, contest histories, and difficulty splits.

Figure 3: Platform cards for LeetCode, Codeforces, CodeChef, and HackerRank with direct platform links and verified badges.

4. 365-Day Algorithmic Activity Heatmap

A unified multi-platform contribution calendar displaying aggregate daily problem-solving velocity across the past 365 days with active streaks.

Figure 4: Algorithmic submission calendar tracking 1,615 submissions and a 64-day active streak with intensity grading.

5. Algorithmic Domain Radar and Contest Rating Trajectory

Multi-dimensional skill evaluation tracking core algorithm competencies alongside an interactive historical rating trajectory curve.

Figure 5: Algorithmic domain spider radar (Dynamic Programming, Graph Theory, Greedy, Math, Data Structures, Strings) paired with historical rating curves.

6. Problem Volume and Difficulty Spectrum Breakdown

Normalized volume comparison across platform ecosystems side-by-side with an algorithmic complexity donut breakdown.

Figure 6: Cross-platform volume comparative bars and difficulty spectrum donut chart categorized into Easy, Medium, and Hard tiers.

7. Contest Radar and Arena Schedule

Real-time synchronized competition calendar with live countdown timers, official round durations, and one-click reminder alarms.

Figure 7: Live arena schedule tracking upcoming rated competitions across Codeforces, LeetCode, and CodeChef.

8. Competitive Milestones and Prestige Trophies

Tiered gamification engine featuring unlock progress indicators, rarity classifications (Common, Rare, Epic, Legendary, Mythic), and completion criteria.

Figure 8: Milestone badge showcase highlighting unlocked achievements, solve counters, and tier progression.

9. Peer Benchmark and Rival Head-to-Head

Comparative performance analyzer contrasting individual metrics against global competitive programming averages, top 5 percent cohorts, or elite benchmarks.

Figure 9: Head-to-head performance benchmarks displaying relative volume and rating deltas against cohort baselines.

10. Competitive Programming Codex and Reference Library

Essential curated problem sheets, competitive theory documentation, global contest aggregators, and editorial video masterclasses.

Figure 10: Curated knowledge library linking LeetCode 150, CSES, CP-Algorithms, USACO Guide, CLIST.by, and editorial walkthroughs.

11. Quick Actions and Telemetry Export Utilities

Single-click export controls for raw telemetry data in JSON format, spreadsheet-compatible CSV summaries, and clipboard-formatted highlights.

Figure 11: Export controls for JSON data archives, CSV spreadsheets, and social highlight sharing.

12. DevCard Portfolio Generator

The DevCard synthesizer produces shareable developer badges with customizable color profiles, Markdown badges for GitHub profiles, and portfolio links.

Figure 12: DevCard modal synthesizer with real-time badge preview and copy-to-clipboard Markdown snippets.

13. Landing and Telemetry Showcase

The public entrance features unauthenticated telemetry overviews, feature breakdowns, and an instant guest showcase mode.

Figure 13: Production landing view with interactive showcase entry and architectural highlights.

14. Full-Height Dashboard Master View

Complete vertical assembly of all telemetry matrices, analytics charts, contest radars, achievements, benchmarks, and resources in a single interface.

Figure 14: Comprehensive full-height dashboard assembly demonstrating unified data synthesis and visual layout.

System Architecture

                    +------------------------------------+
                    |        DashCode Client (React)     |
                    +------------------------------------+
                                      |
         +----------------------------+----------------------------+
         |                            |                            |
+------------------+         +------------------+         +------------------+
| Context State    |         | Data Synthesizer |         | Visualizations   |
| - Auth Context   |         | - Mock Profiles  |         | - Recharts Radar |
| - Dashboard State|         | - Storage Layer  |         | - Activity Matrix|
| - Sound Engine   |         | - API Client     |         | - Donut Charts   |
+------------------+         +------------------+         +------------------+
                                      |
                    +------------------------------------+
                    |        Express Backend Service     |
                    +------------------------------------+
                                      |
         +----------------------------+----------------------------+
         |                            |                            |
+------------------+         +------------------+         +------------------+
| Official API     |         | Web Scraper      |         | Contest Feed     |
| - LeetCode       |         | - CodeChef       |         | - Codeforces     |
| - Codeforces     |         | - HackerRank     |         | - Clist Radar    |
+------------------+         +------------------+         +------------------+

Core Capabilities

1. Multi-Platform Telemetry Engine

Synchronized Data Pipeline: Ingests metrics from official platform APIs and backend scraping endpoints.
Direct Client-Side API Fallback: Queries official Codeforces endpoints directly from the browser if backend proxy is unreachable, ensuring live ratings and solve counts load anywhere.
Fail-Safe Showcase Mode: Built-in verified elite coder dataset (tourist, World #1 Legendary Grandmaster) providing operational resilience.
Configurable Auto-Polling: Automated background metric re-synchronization with customizable polling intervals.

2. Global Cyber Command Palette (Ctrl+K / Cmd+K)

Spotlight Navigation: Instant keyboard-driven dialog accessible via Ctrl+K or Cmd+K.
Fuzzy Search and Filtering: Fast jumps to any dashboard section (Bento grid, Heatmap, Skill Radar, Rating Trajectory, DevCard generator, Codex).
Profile and Platform Switching: 1-click toggling between verified demo profiles, live handles, and platform isolation filters.
Data Export and Audio Shortcuts: Instant triggers for JSON archives, CSV spreadsheets, and audio chimes toggle.

3. Daily Algorithmic Mission Widget

Curated Daily Challenge: Featured high-impact problem with algorithmic topic tags, acceptance percentages, and difficulty indicators.
Interactive Completion Tracking: Solve toggle with triumphant audio celebration and local streak persistence.
Live Reset Countdown: Real-time ticking counter tracking hours, minutes, and seconds until the midnight UTC challenge rotation.

4. Deep Visual Analytics

Algorithmic Domain Radar: Multi-axis radar chart evaluating competency across Dynamic Programming, Graph Theory, Greedy Algorithms, Math and Number Theory, Data Structures, and String Algorithms.
365-Day Activity Heatmap: Unified calendar aggregating daily submissions across platforms with intensity gradation and streak persistence.
Contest Rating Timeline: Historical area chart plotting rating milestones with net delta markers and peak indices.
Difficulty Distribution Donut: Concentric visualizer categorizing problems into Easy, Medium, and Hard difficulty bands with relative percentage ratios.

5. Contest Arena Radar and Calendar Sync

Live Countdown Timers: Precise ticking timers tracking upcoming rated rounds on Codeforces, LeetCode, CodeChef, and HackerRank.
Google Calendar Integration: 1-click URL generation to add contest dates, duration, and direct arena links directly to Google Calendar.
Universal .ics Export: Download standardized iCalendar files for Apple Calendar, Outlook, and mobile calendar apps.
Direct Arena Links and Alarms: Immediate navigation to official contest registrations with in-app reminder toggles.

6. Gamification and Milestone Engine

Prestige Milestones: Tiered accomplishment badges categorized by rarity (Common, Rare, Epic, Legendary, Mythic).
Metric Verification: Automatically calculates unlocking thresholds based on verified total solves, contest counts, and rating achievements.
Dynamic Filtering: Switch between All, Unlocked, and In-Progress milestone collections.

7. Peer Benchmark and Rival Head-to-Head 2.0

Cohort Baselines: Normalized comparative metrics measuring performance against the global median programmer and Top 5 percent candidate masters.
Legendary Benchmarks: Compare directly with world-class competitors including Errichto (Kamil Debowski) and tourist (Gennady Korotkevich).
Custom Milestone Targets: Interactive target editor allowing custom rating and solve goals with real-time differential tracking and local storage persistence.
Metric Differential Indicators: Live calculations showing exact rating points and problem volumes needed to bridge the gap or maintain a lead.

8. DevCard Portfolio Generator 2.0

HTML5 Canvas High-Res PNG Export: Client-side rendering of 1200x630 pixel social cards generated natively in the browser without third-party dependencies.
README Badge Synthesis: Generates ready-to-paste GitHub Markdown badges with verified ratings, ranks, and handle tags.
Multi-Theme Previews: Includes Cyber Obsidian, Cosmic Violet, Neon Matrix, and Solar Flare presentation styles.
Structured Export: Data archive downloads available in JSON and CSV formats.

9. Procedural Audio Engine

Web Audio API Synthesis: Low-latency tactile audio feedback for clicks, sweeps, celebratory trophies, and mode switches without external media files.
Global Sound Toggle: Accessible header control to toggle sound effects on or off.

Technical Specifications

Frontend Stack

Dependency	Version	Application Layer
React	18.2.0	Core view layer and component model
TypeScript	5.2.2	Type safety and strict data contract enforcement
Vite	5.0.8	Bundling and hot module replacement
TailwindCSS	3.3.6	Utility CSS and design token foundation
Recharts	2.10.3	Vector data visualizations and responsive charts
Framer Motion	10.16.16	Declarative layout transitions and spring physics
Anime.js	3.2.2	Numerical counter interpolation and physics animations
Lucide React	0.294.0	Interface icon set
Axios	1.6.2	Promise-based HTTP networking

Backend Stack

Dependency	Version	Application Layer
Express	4.18.2	RESTful API routing and middleware
Cheerio	1.0.0-rc.12	Server-side DOM parsing for platform web scraping
Node-Fetch	3.3.2	Asynchronous upstream HTTP requests
CORS	2.8.5	Cross-origin resource sharing controls

Directory Structure

DashCode/
├── index.html                       # Entry HTML with typography preconnects
├── package.json                     # Dependency manifests and scripts
├── postcss.config.js                # PostCSS toolchain configuration
├── tailwind.config.js               # Theme definitions and color tokens
├── tsconfig.json                    # TypeScript compiler configuration
├── api/
│   └── index.js                     # Vercel serverless function entrypoint
├── screenshots/                     # Verified interface capture gallery
│   ├── analytics-heatmap.png        # 365-day algorithmic activity calendar
│   ├── analytics-radar-trajectory.png # Domain radar and ELO curve
│   ├── analytics-volume-difficulty.png # Volume comparison and difficulty donut
│   ├── arena-schedule-contests.png  # Rated competition schedule with countdowns
│   ├── codex-resources-suite.png    # Problem sheets, theory, and clist links
│   ├── dashboard-bento-metrics.png  # Primary KPI Bento grid
│   ├── dashboard-complete.png       # Complete full-height interface master
│   ├── dashboard-overview.png       # Main dashboard command center view
│   ├── devcard-generator.png        # DevCard synthesizer and Markdown badge modal
│   ├── export-data-actions.png      # JSON, CSV, and clipboard export utilities
│   ├── landing-hero.png             # Production landing and showcase entrance
│   ├── platform-matrices.png        # LeetCode, Codeforces, CodeChef, HackerRank
│   ├── rival-benchmark-comparison.png # Global and cohort head-to-head metrics
│   └── trophies-and-milestones.png  # Achievement badges and progression tiers
├── server/
│   └── index.js                     # Express scraper and proxy service
├── vercel.json                      # Vercel deployment, rewrites, and serverless config
└── src/
    ├── App.tsx                      # Root component and layout orchestrator
    ├── main.tsx                     # Application bootstrapper
    ├── index.css                    # Glassmorphism tokens and cyber styles
    ├── types.ts                     # TypeScript schemas and data interfaces
    ├── components/
    │   ├── AchievementSystem.tsx    # Milestone cards and rarity tiers
    │   ├── ActivityHeatmap.tsx      # 365-day submission matrix
    │   ├── AnimatedDifficultyBreakdown.tsx # Donut complexity chart
    │   ├── AnimatedProgressChart.tsx# Platform volume comparative bars
    │   ├── AuthModal.tsx            # Authentication dialog with guest mode
    │   ├── CommandPalette.tsx       # Spotlight keyboard command launcher (Ctrl+K)
    │   ├── ComparisonView.tsx       # Rival comparison and target tracking 2.0
    │   ├── ConfigModal.tsx          # Handle configuration with live synchronization
    │   ├── ContestRatingTimeline.tsx# ELO trajectory line chart
    │   ├── DailyChallenge.tsx       # Daily algorithmic problem of the day
    │   ├── DashboardHeader.tsx      # Frosted glass command navigation bar
    │   ├── DevCardModal.tsx         # DevCard generator and HTML5 Canvas exporter
    │   ├── ErrorBoundary.tsx        # React runtime error boundary
    │   ├── ExportData.tsx           # JSON/CSV file export controls
    │   ├── HeroBentoStats.tsx       # Primary KPI Bento statistics grid
    │   ├── LandingHero.tsx          # Public showcase and entrance view
    │   ├── LoadingAnimation.tsx     # Orbital synchronization indicator
    │   ├── NotificationToast.tsx    # Feedback toast notification system
    │   ├── ParticleBackground.tsx   # Interactive constellation canvas
    │   ├── PlatformCardsGrid.tsx    # The 4 Titans platform matrices
    │   ├── QuickActions.tsx         # Competitive programming codex links
    │   ├── SettingsPanel.tsx        # Preference toggles and cache clearing
    │   ├── SkillRadarChart.tsx      # Algorithmic domain spider radar
    │   └── UpcomingContests.tsx     # Rated contest radar with countdown
    ├── contexts/
    │   ├── AuthContext.tsx          # Authentication and guest session state
    │   └── DashboardContext.tsx     # Telemetry data, filter, and demo state
    ├── data/
    │   └── mockData.ts              # High-fidelity sample CP coder datasets
    ├── services/
    │   └── api.ts                   # Backend proxy client functions
    └── utils/
        └── soundEffects.ts          # Web Audio procedural sound synthesizer

Installation and Local Setup

Prerequisites

Node.js version 18.0.0 or higher
npm version 8.0.0 or higher

Step 1: Clone the Repository

git clone https://github.com/Dhuvie/DashCode.git
cd DashCode

Step 2: Install Dependencies

npm install

Step 3: Run the Development Server

npm run dev

The application will be accessible at:

http://localhost:3000/

Step 4: Run the Backend Scraper Service (Optional)

To query live external platform handles through the proxy scraper:

npm run server

The Express backend starts on port 5000:

http://localhost:5000/

To run both frontend and backend concurrently:

npm run dev:all

Production Build and Verification

To compile and validate the production bundle:

npm run build

To preview the compiled production distribution locally:

npm run preview

Vercel Deployment

DashCode is pre-configured for automated deployment to Vercel via vercel.json.

Deployment Workflow

Commit and push the repository to GitHub:

git add .
git commit -m "Configure Vercel deployment with serverless API proxy"
git push origin main

Import the repository into the Vercel Dashboard:

Visit the Vercel dashboard and click Add New... then Project.
Select the DashCode repository.
The framework preset automatically detects Vite (npm run build command and dist output directory).

Deploy:

Click Deploy.
The Vite frontend is compiled into static assets and deployed to the Vercel global edge network.
The Express backend under api/index.js is automatically compiled and executed as a serverless function for API calls (/api/leetcode, /api/codeforces, /api/codechef, /api/hackerrank).
Client-side Single Page Application (SPA) routing is preserved with automatic fallbacks to index.html.

Configuration and Handle Settings

DashCode allows custom handle entry for all four platforms:

Navigate to the top navigation header and click Handles.
Input public handles for LeetCode, Codeforces, CodeChef, and HackerRank.
Alternatively, click Load Verified Preset: tourist to populate verified world-class benchmarks.
Click Save and Synchronize Telemetry.

License

This project is licensed under the MIT License. Refer to the LICENSE file for complete terms.

Name		Name	Last commit message	Last commit date
api		api
screenshots		screenshots
server		server
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation