Codeforces Insights

🟡 Website visualizing statistics of competitive programmers activity on the Codeforces🟡

Table of Contents

1. About The Project
2. Roadmap
3. Website appearance
4. Project structure
5. Built With
6. Launch the project
• Backend
• Frontend

About The Project

We aim to create a website that will reflect the dependence of the development of competitive programming skills on various learning factors. Our project will be based on data from the Codeforces website. This website contains tasks and regularly holds contests, through which participants change their rating.

The goal of the project is to guide developing competitive programmers in the right direction by demonstrating what topics were studied and what tasks were solved by individuals who reached their desired rating.

(back to top)

Website appearance

Main screen

Graph of user rating dependence on registration date

Main topics of codeforce blogs and their subtopics

(back to top)

Roadmap

Week 1: Design generation
Week 2: Scraping data, data preprocessing, filling the database
Week 3: Visualization planning, Flask API development
Week 4: LLM creation or choice
Week 5: Frontend implementation
Week 6: Implementation of core visualizations in D3.js and basic chart integrations
Week 7: Implementation of interactive features, panel integration, advanced feature development
Week 8: Final testing, polishing, presentation preparation

(back to top)

Project Structure

CF-INSIGHTS-LAST/
├── backend/                     # Backend application (FastAPI)
│   ├── app.py                   # Main application entry point
│   ├── config.py                # Project configuration settings
│   ├── models.py                # Data models definitions
│   ├── routes.py                # API routes definitions
│   ├── swagger.yml              # API documentation (Swagger format)
│   ├── requirements.txt         # Python dependencies list
│   ├── .env                     # Environment variables for backend
│   └── exploratory_data_analysis/ # Data analysis and research scripts
│
├── frontend/                    # Frontend application (React + Tailwind CSS)
│   ├── public/                  # Static assets
│   ├── src/                     # Frontend source code
│   ├── package.json             # Frontend dependencies and scripts
│   ├── tailwind.config.js       # Tailwind CSS configuration
│   ├── postcss.config.js        # PostCSS configuration
│
├── README.md                    # Project documentation
└── .gitignore                   # List of files and folders ignored by Git

(back to top)

Built With

The Daily Meeting Telegram was built using:

• 
  • 
  • 
• 
• 

(back to top)

Launch the project

Backend

Go to the backend folder and create a virtual environment:

cd backend
python -m venv venv        # Create a virtual environment
source venv/bin/activate   # For Linux/macOS
venv\Scripts\activate      # For Windows
pip install -r requirements.txt  # Install dependencies

Create a .env file in the backend folder and populate it with the following environment variables:

DB_NAME=your_database_name
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_HOST=your_database_host
DB_PORT=your_database_port

Run the Flask server

python app.py

After the server starts, it will be available at http://127.0.0.1:8000.

API documentation will be available at http://127.0.0.1:8000/api/ui

(back to top)

Frontend

Go to the frontend folder and install dependencies:

cd ../frontend
npm install

To run both parts of the project (frontend + backend) simultaneously, use the following command:

npm start

(back to top)