CODEFRY - A Programming Community Application

Inspiration:

Considering the present condition due to Covid-19, distant and remote learning has been of everyone's life. We wanted to give it a try from our end to address the issues faced by programmers in a simpler way.

Using the most powerful weapon with humanity - technology, we decided to solve the issue by introducing Codefry Application. It is a MernStack Web Application, based upon the user’s Codeforces profile handles, helps programmers to code together and eases their tasks in the online schedule.

Links of the Application:

S.No.	Name	Link
1.	Frontend	https://codefry.netlify.app/
2.	Backend	https://codefry-server.herokuapp.com/
3.	Video meet & drawing-board	https://codefrymeet.herokuapp.com/

Technology Stack:

• Frontend - React
  
• Backend - ejs, Express.js, Node.js
  
• IDE - VS Code
  
• API Testing - Postman
  
• Version Control - Git and Github
  
• Database - MongoDB, Atlas
  
• Other tools & technologies - Web APIs, Socket.io, Peer.js Library and WebRTC
  

Setup (APIs used)

Following APIs are required to run this web app:

• Codeforces Problem Set API
• Codeforces User Status API
• Rapid Judge API

Instructions

Environment Variables

• Place the API keys in .env with your own

GitHub Repository Structure

S.No.	Directory Name	Purpose
1.	master	contains the main code
2.	backend	contains all backend code
3.	codefry	contains all frontend code
4.	CodeFry-Video-Meet	contains code for Video-meet & drawing Board
5.	screenshots	contains all the screenshots

Install dependencies

To setup backend and run server locally:

• cd server - to switch to codefry backend
• npm install - to install all the backend packages
• node index.js - to run the server

To setup frontend and run server locally:

• cd codefry - to switch to codefry frontend
• npm install - to install all the frontend packages
• npm start - to start the client

To run the Video Meet and Drawing board:

• cd CodeFry-Video-Meet - to switch to codefry Video-meet & drawing Board
• npm install - to install all the socket.io, WebRTC packages

To run the local database:

• mongod - to run local database

Features:

Main Features

• Programming skills - Codefry helps users to improve their coding skills by practising Codeforces problems by their tags.
  
• Tags based problems - Users can also look at all the Codeforces problems on the basis of problem tags (ex-array, dp, greedy, etc.)
  
• Login and Signup Authentication - Every user has to create his/her account to access personalised features.
  
• Codeforces solved problems - The user can also look at their solved problems by logging into their account & putting the Codeforces handle.
  
• Todo list - A personalised Todo list is available for the users to note down the deadlines of the coding contests with the feature add to favorites.
  
• Coding rooms - Users can create personalised coding room with other coders, run & debug codes and have video, audio calling, screen-share feature.
  
• Drawing Notepad - The users can also use the online drawing notepad to explain the problems pictorially to the other coders.
  
• Code Editor - A code editor is also present for the user to run the code in four languages - C, C++, Python and Java.
  

How to get started?

You can refer to the following articles on the basics of Git and Github and also contact the Project Mentors, in case you are stuck:

• Watch this video to get started, if you have no clue about open source
• Forking a Repo
• Cloning a Repo
• How to create a Pull Request
• Getting started with Git and GitHub

Steps to follow:

1. Code of conduct

Please read our Code of conduct which stipulates explicitly that everyone must be gracious, respectful, and professional. This also documents our conflict resolution policy.

2. Fork it

You can get your own fork/copy of Codefry by using the Fork button.

3. Clone it

You need to clone (download) it to a local machine using

$ git clone https://github.com/Your_Username/Codefry.git

This makes a local copy of the repository in your machine.

Once you have cloned the Codefry repository in Github, move to that folder first using the change directory command on Linux and Mac.

# This will change directory to a folder Codefry
$ cd Codefry

Move to this folder for all other commands.

4. Set it up

Run the following commands to see that your local copy has a reference to your forked remote repository in Github

$ git remote -v
origin  https://github.com/Your_Username/Codefry.git (fetch)
origin  https://github.com/Your_Username/Codefry.git (push)

Now, let’s add a reference to the original Codefry repository using

$ git remote add upstream https://github.com/lavishabhambri/CodeFry.git

This adds a new remote named upstream.

See the changes using

$ git remote -v
origin    https://github.com/Your_Username/CodeFry.git (fetch)
origin    https://github.com/Your_Username/CodeFry.git (push)
upstream  https://github.com/lavishabhambri/CodeFry.git (fetch)
upstream  https://github.com/lavishabhambri/CodeFry.git (push)

5. Sync it

Always keep your local copy of the repository updated with the original repository. Before making any changes and/or in an appropriate interval, run the following commands carefully to update your local repository.

# Fetch all remote repositories and delete any deleted remote branches
$ git fetch --all --prune

# Switch to `master` branch
$ git checkout master

# Reset local `master` branch to match `upstream` repository's `master` branch
$ git reset --hard upstream/master

# Push changes to your forked `Codefry` repo
$ git push origin master

6. Ready Steady Go...

Once you have completed these steps, you are ready to start contributing by checking our Help Wanted Issues and creating pull requests.

7. Create a new branch

Whenever you are going to make a contribution. Please create a separate branch using command and keep your master branch clean (i.e. synced with remote branch).

# It will create a new branch with the name Branch_Name and switch to branch Folder_Name
$ git checkout -b Folder_Name

Create a separate branch for contribution and try to use the same name of the branch as in the folder.

To switch to the desired branch

# To switch from one folder to other
$ git checkout Folder_Name

To add the changes to the branch. Use

# To add all files to branch Folder_Name
$ git add .

Type in a message relevant for the code reviewer using

# This message get associated with all files you have changed
$ git commit -m 'relevant message'

9. Share your work

Now, Push your awesome work to your remote repository using

# To push your work to your remote repository
$ git push -u origin Folder_Name

Then, go to your repository in the browser and click on compare and pull requests. Then add a title and description to your pull request that explains your precious effort.

Team:

Team Members:

S.No.	Team Member Name	Role	GitHub Username
1.	Lavisha Bhambri	Mernstack Development	@lavishabhambri
2.	Vaibhav Pathak	Backend Development	@vaibhavpathak999
3.	Dev Krishna Sadana	Backend Development	@devk232

Contributors:

Credit goes to these wonderful people:

ScreenShots:

• Problems by their tags:

• Register:

• Login:

• Solved Problems:

• About:

• Create your Tasks:

• Task list:

• Code Editor:

Features We Demand:

• Displaying graphs to user to show the progress and notify user about upcoming contests.
  
• Adding collaborative live code editor.
  
• Adding other programming languages in the code editor.
  
• AI and advanced mathematics enabled user's progress detection and suggesting learning paths.
  
• Gamification of the Application and planned learning roadmap for the users.
  

Hope you like it ❤️