Codeforces Diary

screenshot of Codeforces Diary
react
material-ui

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

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)
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.