Code Monkey home page Code Monkey logo

online-judge's Introduction

logo

Django CI

Online-Judge

Port of the Online Judge in Python

Architecture

logo

Working

Initially the user chooses a language in the code editor and starts to write the answer based on the coding question. When the user submits the answer, the answer passes to the server. In the server a task id is being created in the PostgreSQL and the job is being sent to the RabbitMQ/Redis message queue. Then celery picks up the job and executes it in a sandbox environment which is developed using C. This helps to increase security and prevents malicious code injection attacks on the platform. When the job finishes execution the result is sent to the frontend using long poling. In this way the system verifies the users code, evaluate it and generates it ranking based on scores from other peers.

You can check out the code executor part of the project here.

Documentation to help with Celery

https://docs.celeryproject.org/en/stable/getting-started/next-steps.html#next-steps

Documentation to help setting up public PostgreSQL

https://blog.logrocket.com/setting-up-a-remote-postgres-database-server-on-ubuntu-18-04/

Development Environment Config

This project uses PEP8 code style, please make sure to follow. Yapf is our preffered formatting tool. If you are using VSCode add the following in your settings.json

"python.formatting.provider": "yapf",
"python.formatting.yapfArgs": ["--style={based_on_style: pep8, indent_width: 4, column_limit: 120}"],
"python.linting.enabled": true

Message Broker setup

This project uses RabbitMQ as the primary option for implementing the message broker service. To set it up you need to have Docker on your system:

Instructions to set up Docker are here

To pull Rabbit mq, run sudo docker pull rabbitmq in the terminal.

We use the Management plugin version of RabbitMQ, so to do that run: sudo docker run -d -p 15672:15672 -p 5672:5672 -e RABBITMQ_DEFAULT_USER={{ your_custom_user }} -e RABBITMQ_DEFAULT_PASS={{ your_custom_password }} rabbitmq:3-management

Check the management console at http://host-ip:15672/ to see if the broker server is running fine.

This will generate a broker-url of the format amqp://{user}:{password}@{your_ip}:5672/. Add this as the CELERY_BROKER_URL in the .env file for the project as well as the executors.

Second alternative to RabbitMQ - REDIS - (long connections cause problem)

For the code execution part to function properly, you need to install a broker. Steps to install redis are as follows:

  1. sudo apt install redis-server
  2. sudo nano /etc/redis/redis.conf
  3. Inside the file find the supervised directive and change it to systemd. It should be set to no by default.
  ...
  supervised systemd
  ...
  1. sudo systemctl restart redis.service
  2. Add redis://localhost:6379 in the CELERY_BROKER_URL part of the .env file you have in your locally cloned repository.

To check if redis is working or not:

  1. Type in redis-cli
  2. Type ping
  3. If it returns PONG, then your redis-broker server is running fine.

Documentation to help setting up public Redis

https://linuxize.com/post/how-to-install-and-configure-redis-on-ubuntu-18-04/
https://www.w3resource.com/redis/redis-auth-password.php

To add Language models after running SQL migrations run

python manage.py loaddata --app interface language_model.json

online-judge's People

Contributors

arc9693 avatar deadlycoder07 avatar dependabot[bot] avatar himanshu272 avatar kumanik avatar mayankt18 avatar noob-atbash avatar phantsure avatar realsdx avatar rishav4101 avatar rohitsh16 avatar romitkarmakar avatar v-rohan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

online-judge's Issues

User interface issues - Frontend

  • Alert window keeps reappearing after closing
    Screenshot from 2020-08-17 17-47-46

  • Briefly showing this, when the logo is clicked even when contests to exist, which is not a desirable effect.
    Screenshot from 2020-08-17 17-49-18

  • Login button takes to the registration window
    Screenshot from 2020-08-17 17-53-56

Define types - Frontend

Observation - Typescript syntax is being used on the frontend for react components.
Facts -

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. The main benefit of Typescript is that it offers the ability to add static types to your Javascript code. Static typing allows you to catch errors earlier in the debugging process.

Issue description - Most of the components are not using the typescript to its best advantage because there are no type definitions in the first place. Except for two .d.ts files under lib folder, no types have been used at all.

Solution -

  • Define types.
  • Define the tsx files correctly by defining classes and modules properly.

Must go through resources -

Routing enhancements

  1. Clicking on any contest yields the same path for questions, submissions, leader board, and my submissions, for all the contests which looks vague. It would be better if we at least add contest code before the path.
    For ex:

    • http://localhost:3000/submissions to http://localhost:3000/JCC1/submissions
    • http://localhost:3000/question to http://localhost:3000/JCC1/question
  2. A specific question route currently looks like http://localhost:3000/question/description?id=ADDJCC

    Passing question id as a query parameter does not make sense. URI parameter (Path Param) is basically used to identify a specific resource or resources whereas Query Parameter is used to sort/filter those resources.

    It can be changed to match this format - {baseUrl}/{ContestId}/question/{questionId}

Overall this issue covers similar kinds of routing enhancements that we should create in this app. Feel free to share your ideas.

Design enhancements

  • Stick to universally acknowledged icons for showing the status of a submission
    • SS (showing status icon for a wrong submission):
      Screenshot from 2020-10-28 18-44-51
  • Move the logout button under the profile dropdown.
  • Root or Home page is Contests. Makes sense to move the navigation button of contests before the other buttons.
  • If the contest is over, we don't need a timer.
    • The Contest has ended 00:00:00:00 can be changed to The Contest has ended.

Separate business/service logic from component files - Frontend

Description - It is not desirable to write business logic/service logic in the components.
Screenshots reflecting the issue -
Screenshot from 2020-08-17 17-36-18
Screenshot from 2020-08-17 17-36-03
Solution - Organise folder structure first and then separate the logical part from components (where you are supposed to use the functions instead of defining them).

Improve code organisation - Frontend

The code organization is very poor. This reflects bad code quality and hinders the app development.
Few questions and observations:-

  1. Why are tsx files separated into components and pages? Provide logical explanation.
  2. Why static files like css and images in two separate folders? Also observed js files with tsx components.
  3. Code is not commented at all.
  4. Business logic is defined in the same files as state components.

Here is the checklist that should be completed/looked into before closing off this issue:-

  • Organised folder structure
    Inspiration - Blog link
    code
  • camelCased file names
  • Organised static assets
  • tsconfig.json should build needed files

Feel free to comment and ask anything.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.