React Templates & Themes Logo React Templates & Themes
Codeforces Diary screenshot

Codeforces Diary

Author Avatar Theme by Rishabh malhotraa
Updated: 23 Jun 2021
69 Stars

Get the list of all questions you attempted on a particular date on codeforces, along with your account stats.

Github Live Preview

Categories

Material ui

Overview

The CodeForces Diary is a tool created by Rishabh Malhotraa to help users track their progress on the CodeForces platform. The website allows users to view a heatmap of the questions they have attempted, providing a visual representation of their progress over time. The tool also displays various stats and features, such as a radar chart, a list of unsolved questions, and a bar chart for levels and ratings. The website is built with React, Material UI, and Redux Toolkit, written in TypeScript.

Features

  • Heatmap with Dialog Box: Users can click on any colored box in the heatmap to get a list of all the questions they attempted on that day.
  • Radar Chart: Provides a visual representation of the user’s performance on different categories of questions.
  • Stats about Questions and Contest: Displays useful statistics related to the user’s questions and contest participation.
  • List of Unsolved Questions: Shows a list of questions that the user has not yet solved.
  • Bar Chart for Levels And Ratings: Provides a visual representation of the user’s performance based on question levels and ratings.
  • Virtual Rating Changes: (Not implemented)
  • Bubble Chart in D3 JS: (Not implemented)
  • A Separate Page For Useful Resources for CodeForces: (Not implemented)
  • Donut Chart for Languages and Verdicts: (Not implemented)

Installation

To install the CodeForces Diary theme, follow these steps:

Prerequisites:

  • npm
  1. Clone the repository.
  2. Install the npm packages.
  3. Start the React server.
git clone [repository_link]
cd [folder_name]
npm install
npm start

Summary

The CodeForces Diary is a handy tool for CodeForces users to track and visualize their progress on the platform. By providing features such as a heatmap, radar chart, and stats display, users can easily monitor their performance and identify areas for improvement. The website is built with React, Material UI, and Redux Toolkit, offering a user-friendly interface. Future plans for the tool include implementing virtual rating changes, a bubble chart in D3 JS, and a separate page for useful resources on CodeForces.