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.
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:
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 backendnpm install
- to install all the backend packagesnode index.js
- to run the server
To setup frontend and run server locally:
cd codefry
- to switch to codefry frontendnpm install
- to install all the frontend packagesnpm start
- to start the client
To run the Video Meet and Drawing board:
cd CodeFry-Video-Meet
- to switch to codefry Video-meet & drawing Boardnpm install
- to install all the socket.io, WebRTC packages
To run the local database:
mongod
- to run local database
Features:
Main Features
- Codefry helps users to improve their coding skills by practising Codeforces problems by their tags.
- The user can also look at their solved problems by logging into their account.
- A personalised Todo list is available for the users to note down the deadlines of the coding contests and their favourite problems.
- Users can create personalised room with other coders, run & debug codes and have video and audio calling feature.
- 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.