Skip to content

Advanced Codeforces Visualizer with stats, heatmaps, rating graphs, and comparative analysis

Notifications You must be signed in to change notification settings

JayjitSingha/codeforces-visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

# Codeforces Visualizer

A cyberpunk-styled, hardcore aesthetic web visualizer for Codeforces that gives you deep insights into your competitive programming journey.

Built with love and sleepless nights by [Jayjit Singha](https://github.com/JayjitSingha), this project lets you **visually analyze your Codeforces profile** and even compare it with friends, rivals, or legends. 

---

## Live Features

### Single Handle Visualization (`index.html`)
- **Rating Chart** - Contest rating history
- **Daily Practice Heatmap** - Visualizes your grind
- **Tag-wise Problem Distribution** - Which topics you're mastering
- **Verdict Distribution** - ACs, WAs, TLEs, REs
- **Streak & Consistency Analysis** - See how consistent you are
- **Current Rating, Max Rating, and Rank**
- **Recent Submissions Table**

### Handle Comparison (`compare.html`)
- **Rating Comparison** - Current rating, max rating, and rank side-by-side
- **Radar Chart** - Tag-wise problem solving strengths
- **Upsolve Ratio Comparison**
- **Streak Comparison** - Who’s grinding harder?
- **Contest Timeline** - Visual track record of both users
- **Battle Verdict** - Who wins the Codeforces face-off?

---

## Tech Stack & Tools

- **HTML, CSS, JavaScript**
- **Chart.js** - For charts, radar, and visuals
- **Codeforces API** - Live data for user profiles and submissions
- **Neon-glow cyberpunk styling** - Inspired by anime & rockstar UI
- Modular JS structure - Easy to scale and extend

---

## Folder Structure

CP-Visualizer/ ├── index.html # Main visualizer page ├── script.js # Logic for user stats and visuals ├── style.css # Neon cyberpunk style │ ├── compare.html # Handle comparison page ├── compare.js # Comparison logic and charting ├── compare.css # Styled to match the main visualizer │ └── README.md # This file


---

## How to Use

```bash
git clone https://github.com/JayjitSingha/codeforces-visualizer.git
cd codeforces-visualizer

Then just open index.html or compare.html in your browser, no build tools required.


Screenshots

CP-VISUALIZER/screebshots and you will find the screenshots


Inspiration & Motivation

This project was created to help me get better reflects my passion for:

  • Competitive Programming
  • High-quality Visual Design
  • Deep, aesthetic analysis of coding progress

About

Advanced Codeforces Visualizer with stats, heatmaps, rating graphs, and comparative analysis

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published