arsh-v/Codeforces-Visualizer

It is a Chrome Extension which help you to analyze your coding skill on codeforces and it will also give you a brief description of your coding journey.

Codeforces-Visualizer

1. Introduction

I have to build a chrome extension that analyses the coding journey of any user on the code forces platform.

2. Technologies and Libraries Used

• Node.js
• Javascript
• CSS
• HTML
• Codeforces API's

3. Files

• lib/ : Contains necessary files for the graph implementation and library files
• scripts/ :Contains js file which control all the analysis part in background
• css/ : Take care of each element which presented after analises
• manifest.json : menifest file for the chrome extension.

4. How does it work?

1. First you need to load the chrome Extension.
2. After loading this chrome extention it look like.

3. Now you need to click on the icon of the chrome extension then it will genarate a popup

4. The popup will fetch some top-rated candidates from the code forces and display their current rating, Max rating, position, and contributions on Codeforces.

5. If you want to know some details about your code forces, just put your handle in the Input box and press the submit button. This will fetch your data from code forces with the help of the APIs provided by the code forces.

6. If you want a more detailed analysis of your coding journey on Codeforces, press the button on the top right corner.

7. Now after pressing that button, you will get a new page that look like

8. Write your name in the input box and hit the button.

9. After pressing the button, you will get a detailed analysis like
   • How many contests have you participated in now
   • how many languages do you use to submit your code? (with the help of a doughnut)

* How many AC, TLE, Runtime Error, Memory Exceed limit, etc. (with the help of doughnut).
* A Bar Graph that represents the question done by the user along with the question rating.

* A one more about how many problems you have done till now along with their problem tags.

* Now, we display some numbers about the contest given by the user and the question done by the user.

* In last, I put a section where the user finds some problems attempted by the user but not solved yet.

10. On the about page, we put our repo link, thank my pear for their help, and ask for more suggestions. If there is any, I would appreciate it.

Credits

I want to thank my teammate in this project.

• jash200115

🔗 Links