Giter Club home page Giter Club logo

codemaniacs's Introduction

CodeManiacs

CodeManiacs is an online judge for IIT Mandi. It helps students of IIT Mandi practice problems, host contests and allows them to compete on a personal platform, specifically made for them.

Getting Started

Install the Node Package Manager

$ sudo snap install node --classic --channel=10
$ npm install nodemon -g

Fork this repo and clone it

$ git clone https://github.com/<Your User Name>/CodeManiacs.git

Open the folder CodeManiacs and install the dependencies

$ npm install

Next you need to set the database configurations. Create a database.js file in the config folder, and add the following to it.

module.exports = {
    database: "mongodb://localhost/codemaniacs",
    secret: "Ask-Secret-From-Us"
}

Make sure you have mongodb installed. Then, run the following

$ sudo service mongod start

Now, run the application

$ nodemon

The server runs at port 3000 i.e. http://localhost:3000/

Next Steps

Open localhost:3000 in your browser and create a new user profile.

You will need admin access to create problems, make contests etc. So to gain admin access, open MongoDB compass (or use command line) and edit the users collection by setting isAdmin to true.

Doing this will provide you admin access, and then you can explore the full functionality.

Explore the features, get familiar with the codebase, read the contribution guide and check out the issues to get started

File Structure

The file structure of this repo is same as any other NodeJS project. The routes are in routes/ directory, the logics for the routes are in controllers/ directory, the models for the database used are in models/ directory. The client side files are in public/ directory, and the EJS (HTML Structures) files are in views/ directory.

Want to help? contributions welcome

Want to file a bug, request a feature, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues. Make sure you follow the guidelines before sending a contribution!

Contribution

People looking to contribute can checkout the CONTRIBUTING.md file.

codemaniacs's People

Contributors

aashish-ak avatar abhigyank avatar anjali142 avatar creatoon avatar dependabot[bot] avatar dheeraj135 avatar dipanshu231099 avatar gautam-arora24 avatar karry26 avatar kartik1000 avatar milind712000 avatar pankajkumarbij avatar piyushdhamane avatar pranshukharkwal avatar rapperdinesh avatar ruchika06 avatar shrirangpdeshmukh avatar signior-x avatar vishal1541 avatar vsvipul avatar

Stargazers

 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

codemaniacs's Issues

Edit problems to the database

Route: http://localhost:3000/admin/edit/:qID
The app is connected to the database: ./config/database.js. Edit the problems to the database. The schema is in ./models/problems.js and ./models/testcases.js.
Basically, you'll have to implement the function: editQuestion() in the file ./controls/admin.js. You can add other helping functions there.

Create a Login/Signup page!

You need to create a login/signup page and call the functions from the Firebase API that has already been implemented by @vsvipul , the HTML , CSS should be done from scratch, no templates are allowed, the page should look good.

Add snackbar to the top.

Add a snackbar like the one shown below, to show success/failure notifications on login/signup/form submission etc.

Connect the app to Judge0 API.

The code submitted by user should be added to a JSON object along with details metioned here , and should be sent to the API, so design an interface to do this task, the JS scripts, should be able to extract data regarding the question from firebase and should be able to handle the API response as well. It is a Judge0 API which is currently hosted on IIT Mandi SNTC Server, the authentication token will be provided to you once you start working on this issue.

Add Google Firebase Login/Signup API

Add Google firebase JS integration and make a login/signup API with a proper database of users on firebase itself, it should be able to do google and facebook signup as well.

Create a basic interface to hold contests.

Anyone can create a contest, with a separate contest id assigned to it, the host can invite multiple people to contribute in the contest, with minimum 5 questions required per question, they can have questions from existing questions repository or can create new ones, with the questions not visible in the practice section until the contest is over. More features will be added later, but this should suffice for a basic app.

Add a webpage to update user's details

Add a link below [ My submissions history ] and a webpage to update the user's details except for the username. Separate update buttons for {name, email} and {password}.

Add models for problems and testcases

In the folder ./models create a model for problems in a file named problems.js and export it as Problems. Following is the structure:

  • qID: Integer

  • name: String

  • description: String

  • inputFormat: String

  • outputFormat: String

  • constraints: String

  • sampleInput: String

  • sampleOutput: String

  • explanation: String

  • difficulty: Integer

  • problemSetter: String

  • timeLimit: Integer

  • memoryLimit: Integer

  • tags: String

  • editorial: String

Similarly create a model for testcases in a file named testcases.js and export it as Testcases. Here's the structure:

  • qID: Integer

  • timeLimit: Integer

  • memoryLimit: Integer

  • cases: [{stdin: String, stdout: String}]

Create a Google Firebase database of Problem Statements.

The database should be hosted on Google firebase and should contain a proper schema of the database, like the problem id, statement, difficulty level, problem setter, the contest it was a part of, no. of people who have solved it, no. of peoople who have tried it etc., One should be able to push questions to the realtime database and fetch at the same time.

Connect Homepage with Login/Signup page.

The homepage should provide a login/signup button (if not logged in) and a dashboard/profile button if logged in. The login status should be checked in with the Google firebase API, which is already implemented.

Add password security level.

Add constraints to the password security level eg. minimum 8 characters, include special characters etc. with a bar displaying the realtime security level of the current setup password.

Add sample code for each language.

Add hardcoded sample code like the one present for cpp for each language so that whenever user changes the language the sample code should get updated accordingly.

Create a global ranklist of all the users.

A global ranklist should sort the users based on a few parameters like, how much questions he/she has solved, his/her accuracy, no. of submissions in each question. This can only be resolved after creation of a question database as user can only submit after that.

Create the Homepage

You need to create the homepage with design similar to codechef, create the best possible design using expressJS ejs middleware. Add files as you please

Make an online IDE

Make an online IDE just like Codechef, Codeforces have their own on their platform.
The URL should be: localhost:3000/ide
For reference:
ide

Create a login and signup form

Create a simple login (./views/login.ejs) and signup form (./views/signup.ejs). The login form should have fields: name, username, email, password and signup form should have: username, password.

Add models for users

In the folder ./models create a file named users.js and export it as Users. Here's the structure:

  • name: String

  • username: String

  • email: String

  • password: String

  • isAdmin: boolean

Split webpages to header, content and the footer.

Currently, there is only a single webpage /views/index.html. It is a good practice to always maintain header, footer and the main body of the webpage separately. Divide the pages into a general purpose header and footer that can be used for web pages other than the index.html also.

index

Create a platform for editing problems and test cases

The admin login system can be implemented and integrated later. As of now, the problem description can be submitted through http://localhost:3000/question/submit. We need a platform for modifying the already created problems (editing prob desc, uploading/ modifying the test cases).
Create a page http://localhost:3000/admin to list all the existing problems. Eg. Codechef panel:
cc_admin
Clicking on any problem link should open a page http://localhost:3000/admin/edit? to modify the data. First section should contain all the fields that were there in while submitting the new question. Eg. Codeforces panel:
cf_admin
Second section for uploading and modifying the test cases. Eg. Hackerearth panel:
hackerearth_admin

Change the display images.

There are memes in the homescreen slideshow, remove all of them and add dummy images for now or previous even posters.
cm

Restrict from accessing invalid problems

Restrict any logged in user (non-admin)/ logged out guest from opening URL of the problem page and submit page with qID which is not present in db or which isVisible: false.
Restrict the admin from opening URL of the problem page and submit page with qID which is not present in db.
In case of restriction pass the client to the 404 page.

Add problems to the database

Route: http://localhost:3000/admin/add
The app is connected to the database: ./config/database.js. Add the problems to the database. The schema is in ./models/problems.js and ./models/testcases.js.
Currently, the data is being sent to the server: look at your terminal after submitting a problem. Basically, you'll have to implement the function: submitQuestion() in the file ./controls/functions.js. You can add other helping functions there.

Create a page to submit the code

Create a page where the user can paste the code and submit it. As of now create this as an independent page. Afterward, this page will be linked to the specific problem by passing the problem code through the URL. It should have a code editor interface, dropdown to select the Lang/ Compiler and a submit button to submit the code finally. For reference, you can look at the CodeChef or Codeforces submit page.

submit_page
submit_page2

Create a webpage to display problems.

Add a webpage to show all the problems. It should have a table with Prob ID, Prob Name and Tags. Also, add a link to the problem set on the homepage. For reference look at the codeforces problem set:
prob

Change the slideshow photos.

Currently, the slideshow in the /views/index.html contains some random pictures. Change the pictures to some of our own clicked photos e.g, photos from CodeEniacs event, Hackathon, Programming Club classes, etc.

slideshow

Implement user authentication using passport js

Implement user authentication using passport js. Potential files:

  • Signu form: ./views/signup.ejs

  • Login form: ./views/login.ejs

  • ./config/passport.js

  • ./routes/users.js

  • Schema: ./models/users.js

  • Implement any helper other helper functions in ./controls/functions.js

Remove the firebase code completely.

The following warning pops up in the developer tools window, when the Problem Set is opened, looks like some of the firebase code is still present in the app, remove it.
firebase

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.