Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 43

CODE TOGETHER - A CODE SHARING PLATFORM

A PROJECT PHASE 1 REPORT

Submitted by

V.R.DIKSHITREDDY 212219040026

E.GANESHREDDY 212219040028

R.GANESH 212219040032

in partial fulfillment for the award of the degree

of

BACHELOR OF ENGINEERING

IN

COMPUTER SCIENCE AND ENGINEERING

SAVEETHA ENGINEERING COLLEGE


ANNA UNIVERSITY :: CHENNAI- 600 025
DECEMBER 2022
ANNA UNIVERSITY, CHENNAI

BONAFIDE CERTIFICATE

Certified that this project report “CODE TOGETHER - A CODE SHARING PLATFORM”
is the bonafide work of V.R.DIKSHITREDDY (212219040026), E.GANESHREDDY
(212219040028) and R.GANESH(212219040032), who carried out the project work under my
supervision.

SIGNATURE SIGNATURE

Dr. R.RAMYA DEVI, M.E.,Ph.D., Dr. G.NAGAPPAN, M.E., Ph.D.,

Associate Professor Professor

SUPERVISOR HEAD OF THE DEPARTMENT

Dept of Computer Science and Dept of Computer Science and

Engineering, Engineering,

Saveetha Engineering College, Saveetha Engineering College,

Thandalam, Chennai 602105. Thandalam, Chennai 602105.

DATE OF THE VIVA VOCE EXAMINATION: ……………………..

INTERNAL EXAMINER EXTERNAL EXAMINER


ACKNOWLEDGEMENT

We express our deep sense of gratitude to our honorable and beloved Founder President
Dr. N. M. Veeraiyan, our President Dr. Saveetha Rajesh, our Director Dr. S.Rajesh and other
management members for providing the infrastructure needed.

We express our wholehearted gratitude to our principal, Dr. N. Duraipandian, for his whole
hearted encouragement in completing this project.

We convey our thanks to Dr. G. Nagappan, Professor and Head of the Department of
Computer Science and Engineering, Saveetha Engineering College, for his kind support and
for providing necessary facilities to carry out the project work.

We would like to express our sincere thanks and deep sense of gratitude to our Supervisor Dr.
Ramyadevi R, Associate Professor, Department of Computer Science and Engineering,
Saveetha Engineering College and our Project Coordinator, Dr.Anitha Julian, Professor,
Department of Computer Science and Engineering, Saveetha Engineering College, for their
valuable guidance, suggestions and constant encouragement that paved the way for the
successful completion of the project work and for providing us necessary support and details
at the right time and during the progressive reviews.

We owe our thanks to all the members of our college, faculty, staff and technicians for their
kind and valuable cooperation during the course of the project. We are pleased to
acknowledge our sincere thanks to our beloved parents, friends and well-wishers who
encouraged us to complete this project successfully.
Table of Contents

Chapter Number Title Page


Number
Abstract 1
1 INTRODUCTION 2
1.1 Overview of the project 2
1.2 Scope and Objective 3
2 LITERATURE SURVEY 5
2.1 Introduction 5
2.2 Literature Survey 6
3 SYSTEM DESIGN 9
3.1 Introduction 9
3.2 Existing System 10
3.3 Proposed System 12
3.4 Algorithm / Methodology 11
3.5 System Architecture Diagram 13
3.6 System Requirements 16
4 IMPLEMENTATION AND ANALYSIS 17
4.1 Feasibility Study 20
4.2 Dataset Description 21
4.3 Module Description 22
4.4 Results 28
5 CONCLUSION 30
5.1 Conclusion 30

5.2 Future Work 30


Appendix A – Sample Coding 32
Appendix A – Sample Output 36
References 37
ABSTRACT

CodeTogether is a platform that aims to bring all the developers and coders
together to appreciate collaborative coding by resolving issues faced by
programmers on normal IDEs/platforms. It allows developers to communicate with
their fellow developers or collaborators through online voice call and realtime
chat.It allows developers to communicate with their fellow developers or
collaborators through online voice call and realtime chat. Besides, the whiteboard
makes the framing of an algorithm easier by helping programmers working
collaboratively to discuss and plan their approach together. The saved code of one
collaborator is easily reflected to the others allowing them to save the changes in
their codes. Moreover, in case of any coding related queries, the relevant articles
can prove to be a helping hand for programmers.

CodeTogether is the perfect blend of functionality and simplicity, designed


by a team of remote developers that rely on collaborative development. Whether
you are on an Agile team that uses pair programming as part of your regular
software development flow or you just like to live share your code in the occasional
troubleshooting session, CodeTogether is the best tool for pair programming, mob
programming, code review, and more! If you’ve been using screen sharing or an
online code editor for collaborative coding. Live share IDEs and coding sessions
with Code Together. See changes in real time, even when coding in the same file,
like Google Docs for your code. Cross-IDE support for Eclipse, IntelliJ, and VS
Code and IDEs based on them. So many uses: pair programming, mob
programming, code review, project design, unit testing, education, interviews,
remote development, code collaboration and more.

CHAPTER 1
INTRODUCTION

CodeTogether is a platform that aims to bring all the developers and coders together to
appreciate collaborative coding by resolving issues faced by programmers, normal
IDEs/platforms. It allows developers to communicate with their fellow developers,
collaborators through online voice call and real time chat. Besides, the whiteboard makes the
framing of an algorithm easier by helping programmer working collaboratively to discuss and
plan their approach together. Live share IDEs and coding sessions with Code Together. See
changes in real time, even when coding in the same file, like Google Docs for your code. Cross-
IDE support for Eclipse, IntelliJ, and VS Code and IDEs based on them. So many uses: pair
programming, mob programming, code review, project design, unit testing, education,
interviews, remote development, code collaboration and more. It’s nice to get a little help from
your friends, but not if it means disrupting your flow. After adding CodeTogether to Vs Code
, Intellij or Ecllipse, it only takes seconds to live share your code with others. Simply click a
button, define access privileges, and then invite others to join. Invitees join from their IDE
(even if it’s different from yours) or a web browser (with the theme and key bindings of their
preferred IDE).

1.1 OVERVIEW OF THE PROJECT


CodeTogether makes it easy to switch between groups of developers coding together, or
even code on your own when you live share a coding session. Same-file simultaneous
editing lets developers edit files at the same time. With the CodeTogether view, you’ll never
get lost—providing a nice overview of the session so you can quickly see who’s doing what,
and jump into a new group or branch out on your own. 

For real pair programming, you want more than a simple collaborative code editor. The
host’s IDE provides language-smarts for a superior coding experience that includes content
assist (aka IntelliSense), as-you-type validation across the workspace, and rename
refactoring. You’ll also appreciate the multitude of ways you can navigate and visualize your
code, including call and type hierarchies, open symbol, full file content search, Outline
view, minimap, inline definitions and references to symbols, and much more.

collaboration (Fan et al., 2019). In non-real-time collaboration, programmers will have


to either sending the source code to-and-fro with one another if they are not sharing a single
computer or use some version control system such as Git to manage the project and keep
them up to date. However, neither of these are helpful for teams that works together in a
same file as the supports provided are insufficient for close synchronous collaboration
(Goldman, Little and Miller, 2011b). By using service control system also manifest a
problem, which is code transparency. The other collaborators will not know how the assigned
programmer is doing and how he is dealing with the problem as the copy of the program he
is working with is kept private and it would not be revealed until the code is pushed and
merged with the master branch of the program. This may lead to conflicts and inconsistency
of software architecture that will need extra time to resolve. To address the issue,
programmers will have to use an online coding platform that rely on cloud service such as
real-time IDE to collaborate simultaneously to make their effort real-time and consequently
contribute to better coding performance and quality. It allows transparency between the
development teams in which misunderstandings and ambiguities can be avoided effectively.
If it is made delicately, it may become an inseparable platform for programmers’ daily
routine.

1.2 SCOPE AND OBJECTIVE :


CodeTogether is the perfect blend of functionality and simplicity, designed by a
team of remote developers that rely on collaborative development. Whether you are on an
Agile team that uses pair programming as part of your regular software development flow or
you just like to live share your code in the occasional troubleshooting session, CodeTogether
is the best tool for pair programming, mob programming, code review, and more! If you’ve
been using screen sharing or an online code editor for collaborative coding, you’ll be amazed
at the difference.
Instant Live Sharing
Host or join a live coding session from Eclipse, IntelliJ or VS Code. With IDE to
IDE support,guests can live code with others directly from their local IDE—even if it’s
different. True collaboration without repository cloning or a learning curve.
Browser Optional

Share a link and teammates can join a live sharing session from any modern browser.
No registration, download or install required—they just select the theme and key bindings of
their preferred IDE and start typing!

4% CPU of Screen Sharing

Get a nice IDE-like experience without the resource drain you get from screen
sharing tools. CodeTogether requires minimal network bandwidth and consumes only 4% of
the CPU load associated with screen sharing.

Corporate Level Security

Projects remain on your computer—only required data is relayed to participants


and our backend using full end-to-end encryption. An on-premises version that keeps all source
behind your firewall is also available.

Host-Provided Intelligence

Much more than a shared code editor! The host provides language smarts so
everyone gets key functionality, like content assist and validation, whether joining from a
browser or IDE, regardless of configuration.

Stay Together or Code

The host controls driving and editing privileges for the session. If the host
permits, guests can code or explore on their own or with any group, and even simultaneously
edit files just like in Google Docs.

CHAPTER 2

LITERATURE SURVEY
2.1 INTRODUCTION

The collaborative platform can provide development environments, code hosting, content
storage and more importantly, connection with stakeholders that are unable to meet that
frequent. With that being said, the collaborative coding platform should have functionalities not
just limited to concurrent coding platform, but also including communication functionalities as
well such as text chats, discussion boards, video/voice calls and project management tools are
invaluable to foster quality communication among teams especially those who are
geographically distributed.
The approach of organizing the workspace to put everything regarding the project in one
place allow programmers to access important files at anytime and anywhere as long as they
have access to the internet. Göğer (2019) also mentioned that programmers that are accustomed
to the private messaging apps such as Whatsapp and Telegram may find the approach
uncomfortable initially because their conversation are visible to everyone in the team.
Furthermore, it ensures the perpetual collaboration. If a developer resigned out of the blue on
the collaboration work, new people are able to overtake his job with ease.
Software projects are meant to deliver complex functionalities that comply with business
needs and requirements so that the software can be beneficial to help to solve some of the
fundamental problems faced by the community. Hence, they are not an easy task that can be
done by one people and it is not viable to write in a monolithic fashion. Hence, multiple
programmers will need to work on the program as a team to properly organise the workflow
and make it efficient for the delivery of the program. However, it is not easy to collaborate
between a team of programmers.

2.2 LITERATURE SURVEY:

[1] .T.Dorsch(2019) proposed an Hierarchical channel coding for broadcasting


employing GC-codes suggesting that Better interaction with coder.
He perceived the sequence of events as external stimulation followed by neural
processing followed by physiological reactions.CodeTogether is the perfect blend of
functionality and simplicity, designed by a team of remote developers that rely on collaborative
development. Whether you are on an Agile team that uses pair programming as part of your
regular software development flow or you just like to live share your code in the occasional
troubleshooting session, CodeTogether is the best tool for pair programming, mob
programming, code review, and more! If you’ve been using screen sharing or an online code
editor for collaborative coding

[2].Since Arun sharma (2021) suggests Better interaction with coders through
code sharing.
The empirical research on affective impairment of children and adults with autism is
wide and varied so that it is not surprising that the findings are extremely mixed. Hypotheses
of a general affective deficit (Hobson, 1986a; 1986b; Hobsonet al., 1988), and a selective
emotion recognition deficit (Baron-Cohen et al., 1999; Howard et al., 2000) have been
explored. The present investigations attempt to replicate and extend these findings with
coders with autism.For real pair programming, you want more than a simple collaborative
code editor. The host’s IDE provides language-smarts for a superior coding experience that
includes content assist (aka IntelliSense), as-you-type validation across the workspace, and
rename refactoring. You’ll also appreciate the multitude of ways you can navigate and
visualize your code, including call and type hierarchies, open symbol, full file content search,
Outline view, minimap, inline definitions and references to symbols, and much more.

[3].Adam Morison (2016) proposed a Specification and Complexity of


Collaborative Text Editing Suggests Collaborative text editing systems.But drawback is
It only provides platform for code together ,there is no code sharing.

CodeTogether makes it easy to switch between groups of developers coding together, or


even code on your own when you live share a coding session. Same-file simultaneous editing
lets developers edit files at the same time. With the CodeTogether view, you’ll never get lost—
providing a nice overview of the session so you can quickly see who’s doing what, and jump
into a new group or branch out on your own.

[4].A.Roy(2019)proposed a Closing a performance Gap between Csual


Consistency
The Performance Gap between Causal Consistency and Eventual Consistency
and suggests Code collaboration .Drawback is Code sharing available but there is no
whiteboard option to clear doubts.

It’s nice to get a little help from your friends, but not if it means disrupting your flow.
After adding CodeTogether to VS Code, IntelliJ or Eclipse, it only takes seconds to live share
your code with others. Simply click a button, define access privileges, and then invite others to
join. Invitees join from their IDE (even if it’s different from yours) or a web browser (with the
theme and key bindings of their preferred IDE).

[5].C.Cachin,R.Guerraoui, and L.Rodrigues.Introduction to the code collaborative


sharing Reliable and Secure Distributed Programming. Springer
Publishing Company, Incorporated, 2nd edition, 2011.
Much more than a shared code editor! The host provides language smarts so everyone
gets key functionality, like content assist and validation, whether joining from a browser or
IDE, regardless of configuration. The collaborative platform can provide development
environments, code hosting, content storage and more importantly, connection with
stakeholders that are unable to meet that frequent. With that being said, the collaborative coding
platform should have functionalities not just limited to concurrent coding platform, but also
including communication functionalities as well such as text chats, discussion boards,
video/voice calls and project management tools are invaluable to foster quality communication
among teams especially those who are geographically distributed .
[6].G.DeCandia,D.Hastorun,M.Jampani,G.Kakulapati,A.Lakshman,A.Pilchin,S.
Sivasubramanian, P.Vosshall, and W.Vogels. Dynamo:Amazon’s Highly Available Key-
value Store. In SOSP, 2007.

There are two general kind of collaborative programming approach or technique, that is
real-time and real-time collaboration . In non-real-time collaboration, programmers will have to
either sending the source code to-and-fro with one another if they are not sharing a single
computer or use some version control system such as Git to manage the project and keep them
up to date.

To address the issue, programmers will have to use an online coding platform that rely
on cloud service such as real-time IDE to collaborate simultaneously to make their effort real-
time and consequently contribute to better coding performance and quality. It allows
transparency between the development teams in which misunderstandings and ambiguities can
be avoided effectively. If it is made delicately, it may become an inseparable platform for
programmers’ daily routine.
CHAPTER 3

SYSTEM DESIGN

3.1 Introduction

CodeTogether is the perfect blend of functionality and simplicity, designed by a team of


remote developers that rely on collaborative development. Whether you are on an Agile team
that uses pair programming as part of your regular software development flow or you just like
to live share your code in the occasional troubleshooting session, CodeTogether is the best tool
for pair programming, mob programming, code review, and more!

1. Differential synchronization
The client sends the difference between its local copy and the server
copy. At each node, 2 copies of the document are maintained. At the start, both the copies are in
the same state. Let’s say there is a client with copies c and cc, a server with copies s and sc.
Any edits at the client happening locally will be done to the copy c. Take the diff between the
copies c and cc, send this diff to the server also update the copy cc with the diff. At the server,
SC takes the diff and patches its copy with the diff. Also, the diff is applied to copy.
2. Conflict-Free Replicated Data Type

CRDT works on two core principles, Commutative and Idempotency. Every character in
the document is assigned a unique ID, and when a new character is inserted, the new character
would get an ID based on the average of its neighbors (ideally could even take non-integer
IDs), which helps to make the algorithm less complex in conflict resolution. Lagoot is a widely
known implementation of the CRDTs to solve distributed concurrency problems in P2P
Networks.

3.2 Existing Systems

 Installation: Often called Cloud IDEs, these are tools hosted in the cloud. No local
installation is required other than a web browser. Other tools require local installation. Better
still are plugins that extend popular editors/IDEs with collaborative editing capability.
 Cross-Platform: Some tools may run on Windows but not on Mac or Linux. Plugins
are better in this regard. They extend familiar software already available for various platforms.
 Editing: Simultaneous editing by both developers. Copy/paste between systems. One
developer can navigate to other parts of codebase or other applications while the other is
editing. Editor/IDE agnostic.
 Multimodal: Bidirectional live audio/video streaming. Chat window. Integrated with
editor/IDE.
 Usability: Uncluttered layouts. Awareness about what's shared and the current editing
context. Automatic turn-off of notifications, thus providing a distraction-free environment.
 Performance: Minimal lag. Supports high video resolutions. Fall back to lower
resolutions on low-bandwidth connections. Visibility into performance metrics.
 Integration: Connect to code repositories (GitHub, GitLab, Bitbucket) and other tools
(Jira, Trello).
 Others: Security, cost and customer support are also important. Open source may be
important for some teams.

3.3 Proposed System

 Screen Show: Only screensharing. Before switching roles, we need to push code
changes to a shared repository. Videoconferencing tools such as Skype, Google Hangouts,
Google Meet and Slack Calls are examples.
 Screen Control/Share: Temporary remote control of your partner's system.
Interactions can lag. Zoom, VNC, Join.me, CoScreen, Tuple, TeamViewer and tmux are
examples.
 Application Share: True collaborative editing and hence most preferred. Each
environment can be personalized. Developers can use different editors or IDEs. A developer
can navigate within the codebase without interrupting the partner. Developers can even edit
different parts of the code in parallel. Live Share (with Visual Studio and VS Code),
CodeTogether, GitLive, Floobits, Drovio, Atom Teletype, and AWS Cloud9 are examples.

3.4 Algorithm

Adaption of Lagoot’s CRDT Algorithm

We have used an adaptation of the Lagoot framework. Each character is represented by


a unique positional identifier, which helps us to make clear distinctions while merging the
changes. The following is an example of what a single line of text encoded in CRDT looks like,

“abcd” => [[‘a’, [0]], [‘b’, [1]], [‘c’, [2]], [‘d’, [3]]

The character a’s position identifier is 0 and as follows for other characters. Now if we
want to insert a character between index 0 and 1, the position ID would be ‘0.5’. But since
floating points aren’t precise, we represent the floating-point arithmetic using integers as [0,
5]. With the insert operation the text and CRDT data would look like,
“a1bcd” => [[‘a’, [0]], [‘1’, [0, 5]], [‘b’, [1]], [‘c’, [2]], [‘d’, [3]]]

If we again try to insert a character at index 1, the positional identifier would be as


follows,

“a21bcd” => [[‘a’, [0]], [‘2’, [0, 4]], [‘1’, [0, 5]], [‘b’, [1]], [‘c’, [2]], [‘d’, [3]]]

Selecting the positional identifiers using the above algorithm helps in merging the
changes effectively, even without a central server for coordination. Consider the following
example, where client 1 inserts char ‘e’ at index 1 and parallelly client 2 inserts char ‘d’ at
index 2, both clients generate the changes to CRDT data and transmit them to the server. And
finally, the server broadcasts both changes and the clients attain a synchronous state. Deletion
operation could also be drawn under the same lines.
3.5 System Architecture Diagram

End-to-end Encryption

CodeTogether is designed to keep your code safe and secure by keeping the full source
code on the host system and only relaying necessary information using end-to-end encryption.
When you live share your IDE using CodeTogether, a unique key is generated for the session.
This key is used for AES-GCM encryption at the host and all participants. Our servers never
receive this key. The Edge backend server has the responsibility of routing requests between
edge clients, using TLS 1.3/SHA256 encryption.

Integrated Communication

Built-in communication tools include audio, video, text chat and screen sharing. Anyone
in the session can start an audio/video bridge via a simple toggle, which can easily be joined by
anyone in the session. You can also invite guests who only have access to the communication
tools and not the actual code—perfect for getting customer feedback without live sharing code.
A toolbar with basic capabilities is included in the IDE, however, the audio/video bridge is
managed in your browser to keep your IDE uncluttered. Access cool features like polls and
reactions from the browser.
Flow Chart -

The platform that aims to bring all the developers and coders together to appreciate
collaborative coding by resolving issues faced by programmers on normal IDEs/platforms. It
allows developers to communicate with their fellow developers or collaborators through online
voice call and realtime chat. Besides, the whiteboard makes the framing of an algorithm easier
by helping programmers working collaboratively to discuss and plan their approach together.
The saved code of one collaborator is easily reflected to the others allowing them to save the
changes in their codes. Moreover, in case of any coding related queries, the relevant articles can
prove to be a helping hand for programmers.
3.6 Data Flow Diagram

Software projects are meant to deliver complex functionalities that comply with
business needs and requirements so that the software can be beneficial to help to solve some of
the fundamental problems faced by the community. Hence, they are not an easy task that can be
done by one people and it is not viable to write in a monolithic fashion. Hence, multiple
programmers will need to work on the program as a team to properly organise the workflow
and make it efficient for the delivery of the program. However, it is not easy to collaborate
between a team of programmers.
3.6 SYSTEM REQUIREMENTS

The software requirements specification is produced at the culmination of the analysis


task. The function and performance allocated to software as part of system engineering are
refined by establishing a complete information description as functional representation of
system behavior, an indication of performance requirements and design constraints,
appropriate validation criteria.

HARDWARE REQUIREMENTS

 Processor - Intel

 RAM - 4 Gb (min)
 Hard Disk - 260 GB
 Key Board - Standard Windows Keyboard
 Mouse - Two or Three Button Mouse
 Monitor - SVGA
 Speed - 1.1 GHz

SOFTWARE REQUIREMENTS:

 Operating System - Windows 7/8/10

 IDE - Visual Studio

 PROGRAMMING LANGUAGES:
1. HTML
2. CSS
3. REACT.JS
4. DJANGO
5. PYTHON
CHAPTER 4

IMPLEMENTATION AND ANALYSIS


PYTHON

Python is a general-purpose interpreted, interactive, object-oriented, and high-level


programming language. It was created by Guido van Rossum during 1985- 1990. Like Perl,
Python source code is also available under the GNU General Public License (GPL).

Python is a high-level, interpreted, interactive and object-oriented scripting language.


Python is designed to be highly readable. It uses English keywords frequently where as
other languages use punctuation, and it has fewer syntactical constructions than other
languages.

Python is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down
some of the key advantages of learning Python:

 Python is Interpreted − Python is processed at runtime by the interpreter. You do


not need to compile your program before executing it. This is similar to PERL and PHP.
 Python is Interactive − You can actually sit at a Python prompt and interact with
the interpreter directly to write your programs.
 Python is Object-Oriented − Python supports Object-Oriented style or technique
of programming that encapsulates code within objects.
 Python is a Beginner's Language − Python is a great language for the beginner-
level programmers and supports the development of a wide range of applications from
simple text processing to WWW browsers to games.
Characteristics of Python
Following are important characteristics of Python Programming −

 It supports functional and structured programming methods as well as OOP.


 It can be used as a scripting language or can be compiled to byte-code for building
large applications.
 It provides very high-level dynamic data types and supports dynamic type
checking.
 It supports automatic garbage collection.
 It can be easily integrated with C, C++, COM, ActiveX, CORBA, and Java.

As mentioned before, Python is one of the most widely used language over the web.
I'm going to list few of them here:

 Easy-to-learn − Python has few keywords, simple structure, and a clearly defined
syntax. This allows the student to pick up the language quickly.
 Easy-to-read − Python code is more clearly defined and visible to the eyes.
 Easy-to-maintain − Python's source code is fairly easy-to-maintain.
 A broad standard library − Python's bulk of the library is very portable and
cross-platform compatible on UNIX, Windows, and Macintosh.
 Interactive Mode − Python has support for an interactive mode which allows
interactive testing and debugging of snippets of code.
 Portable − Python can run on a wide variety of hardware platforms and has the
same interface on all platforms.
 Extendable − You can add low-level modules to the Python interpreter. These
modules enable programmers to add to or customize their tools to be more efficient.
 Databases − Python provides interfaces to all major commercial databases.
 GUI Programming − Python supports GUI applications that can be created and
ported to many system calls, libraries and windows systems, such as Windows MFC,
Macintosh, and the X Window system of Unix.
 Scalable − Python provides a better structure and support for large programs than
shell scripting.

Python Platform

Installing PyCharm
This will use PyCharm Community Edition 2019.1 as it’s free and available on every
major platform. Only the section about the professional features will use PyCharm
Professional Edition 2019.1.

The recommended way of installing PyCharm is with the JetBrains Toolbox App.


With its help, you’ll be able to install different JetBrains products or several versions of the
same product, update, rollback, and easily remove any tool when necessary. You’ll also be
able to quickly open any project in the right IDE and version.

To install the Toolbox App, refer to the documentation by JetBrains. It will


automatically give you the right instructions depending on your OS. In case it didn’t
recognize your OS correctly, you can always find it from the drop down list on the top right
section:
4.1 FEASIBILITY STUDY:
One of the integral part to maintain the consistency is the
literature survey. It’s the crucial steps to be followed in the development process. The Software
Development needs authenticity of the resources and the availability of the same. This part
helps in discovering the content that been worked on and find the utilization and the
implementation of the same in today’s time. The key factor to the development is the economy
and the strength of the product. Once the innovation of the same undergoes through the
building phase the support and the resource flow is to be monitored and computed. This is also
known as the Research phase where all the research is embedded and done to carry the flow.
DataSet Description:

Host a session in seconds


It’s nice to get a little help from your friends, but not if it means disrupting your flow.
After adding CodeTogether to VS Code, IntelliJ or Eclipse, it only takes seconds to live share
your code with others. Simply click a button, define access privileges, and then invite others to
join. Invitees join from their IDE (even if it’s different from yours) or a web browser (with the
theme and key bindings of their preferred IDE).

Host-provided language smarts


For real pair programming, you want more than a simple collaborative code editor. The
host’s IDE provides language-smarts for a superior coding experience that includes content
assist (aka IntelliSense), as-you-type validation across the workspace, and rename
refactoring. You’ll also appreciate the multitude of ways you can navigate and visualize your
code, including call and type hierarchies, open symbol, full file content search, Outline
view, minimap, inline definitions and references to symbols, and much more.
Keep the code flowing

CodeTogether makes it easy to switch between groups of developers coding together, or


even code on your own when you live share a coding session. Same-file simultaneous
editing lets developers edit files at the same time. With the CodeTogether view, you’ll never
get lost—providing a nice overview of the session so you can quickly see who’s doing what,
and jump into a new group or branch out on your own. 

4.3 MODULE DISCRIPTION :

4.3.1 FRONT END :

NEXT.JS :
Next.js is an open-source web development framework created by Vercel enabling React-
based web applications with server-side rendering and generating static websites.
The main features provided by Next.js

Hot Code Reloading


Next.js reloads the page when it detects any change saved to disk.

Automatic Routing:
Any URL is mapped to the filesystem, to files put in the pages folder, and you don't
need any configuration (you have customization options of course).

Single File Components:


Using styled-jsx, completely integrated as built by the same team, it's trivial to
add styles scoped to the component.

Server Rendering :
You can render React components on the server side, before sending the HTML to the
client.

Ecosystem Compatibility:
Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.

Automatic Code Splitting:

Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.

Prefetching:
The Link component, used to link together different pages, supports a prefetch prop
which automatically prefetches page resources (including code missing due to code splitting) in
the background.

Dynamic Components:
You can import JavaScript modules and React Components dynamically.

Static Exports:
Using the next export command, Next.js allows you to export a fully static site from your
app.

TypeScript Support7:
Next.js is written in TypeScript and as such comes with an excellent TypeScript support.

TAILWIND CSS

Tailwind CSS is an open source CSS framework. The main feature of this library is that,
unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes
for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can
be used to style each element by mixing and matching
For example, in other traditional systems, there would be a class  message-warning  that
would apply a yellow background color and bold text. To achieve this result in Tailwind, one
would have to apply a set of classes created by the library:  bg-yellow-200  and  font-bold .

FRAMER MOTION
Framer Motion is a production-ready motion library for React from Framer.
It's simple yet powerful, allowing you to express complex user interactions with robust,
semantic markup.
4.3.2 BACKEND :

DJANGO :

Django  is a free and open-source, Python-based web framework that follows the model–


template–views (MTV) architectural pattern. It is maintained by the Django Software
Foundation (DSF), an independent organization established in the US as a non-profit.

Django's primary goal is to ease the creation of complex, database-driven websites. The
framework emphasizes reusability and "pluggability" of components, less code, low coupling,
rapid development, and the principle of don't repeat yourself. Python is used throughout, even
for settings, files, and data models. Django also provides an optional administrative create,
read, update and delete interface that is generated dynamically through introspection and
configured via admin models.

API :

An application programming interface (API) is a way for two or more computer


programs to communicate with each other. It is a type of software interface, offering a service
to other pieces of software.
A document or standard that describes how to build or use such a connection or interface
is called an API specification. A computer system that meets this standard is said
to implement or expose an API. The term API may refer either to the specification or to the
implementation.

In contrast to a user interface, which connects a computer to a person, an application


programming interface connects computers or pieces of software to each other. It is not
intended to be used directly by a person (the end user) other than a computer programmer who
is incorporating it into the software. An API is often made up of different parts which act as
tools or services that are available to the programmer. A program or a programmer that uses
one of these parts is said to call that portion of the API. The calls that make up the API are also
known as subroutines, methods, requests, or endpoints. An API specification defines these
calls, meaning that it explains how to use or implement them.

One purpose of APIs is to hide the internal details of how a system works, exposing only
those parts a programmer will find useful and keeping them consistent even if the internal
details later change. An API may be custom-built for a particular pair of systems, or it may be a
shared standard allowing interoperability among many systems.

The term API is often used to refer to web APIs, which allow communication between
computers that are joined by the internet. There are also APIs for programming
languages, software libraries, computer operating systems, and computer hardware. APIs
originated in the 1940s, though the term did not emerge until the 1960s and 1970s. Recent
developments in APIs have led to the rise in popularity of microservices, which are loosely
coupled services accessed through public APIs.
TWILIO:

Twilio  is an American company based in San Francisco, California, which provides


programmable communication tools for making and receiving phone calls, sending and
receiving text messages, and performing other communication functions using its web
service APIs.

VONAGE :

Vonage is an American cloud communications provider operating as a subsidiary


of Ericsson. Headquartered in Holmdel Township, New Jersey, the organization was founded in
1998 as Min-X as a provider of residential telecommunications services based on voice over
Internet Protocol (VoIP). In 2001, the organization changed its name to Vonage.

As of 2020, Vonage reported consolidated revenues of $1.25 billion. Through a series of


acquisitions beginning in 2013, Vonage, previously a consumer-focused service provider, has
expanded its presence in the business-to-business marketplace, while still keeping its home
VOIP service. Vonage's offering includes unified communications, contact center applications
and communications APIs. In July 2022, Ericsson completed its acquisition of Vonage for $6.2
billion.

4.4 Result :

Our Features are Collaborate Coding ,Seamless Communication ,Whiteboard .We always
face problems to share our code snippets with other programmers and do collaboration with
other programmers in all the platforms/IDEs that are available CodeTogether solves all those
problems and brings a new rich experience for programmers to appreciate collaborative coding
Realtime code sharing among all the fellow programmers who are present in the room.
Realtime voice call, chat to appreciate seamless communication among the fellow programmers
Discuss and plan the algorithmic approaches, do rough work through realtime whiteboard.
CHAPTER 6

CONCLUSION
5.1 Conclusion
CodeTogether is the perfect blend of functionality and simplicity, designed by
a team of remote developers that rely on collaborative development. Whether you
are on an Agile team that uses pair programming as part of your regular software
development flow or you just like to live share your code in the occasional
troubleshooting session, CodeTogether is the best tool for pair programming, mob
programming, code revie.

Live share IDEs and coding sessions with CodeTogether. See changes in real
time, even when coding in the same file, like Google Docs for your code. Cross-
IDE support for Eclipse, IntelliJ, and VS Code and IDEs based on them. So many
uses: pair programming, mob programming, code review, project design, unit
testing, education, interviews, remote development, code collaboration and more
and more!

5.2 Future Work

Future Plans :

Future Plan 1 :
Host team based coding contest through our platform which are backed by
sponsors .
Future Plan 2:
Freemium/subscription for more features and richer experience

Business Model :

Every product needs future plans to sustain , we also have a great business
model to sustain in the ecosystem .
 Subscription
 Transactional
 Freemium
Appendix A

Sample Coding:

Login.js
    const handleSubmit = () => {
        if(username == ""){
            setTypeAlert("error")
            setAlert("Please enter your username");
        }else if(password == ""){
            setTypeAlert("error")
            setAlert("Please enter your password");
           
        }else{
          setLoading(true)
           axios.post("http://127.0.0.1:8000/api-token-auth/", {
            username: username,
            password: password
            })
           
           
            .then(res => {
              console.log("res",res);
              if(res.status === 200){

               
                setCookie("token", res.data.token,{expires: cookieExpiry});
                setLoading(false)

                setTypeAlert("success");
                setAlert("Login Successful");
               
                setUsername("");
                setPassword("");
               
                return res.data.token;
              }
          }).then((resp) => {
            console.log("auth: ",resp);
           

            axios.post('http://127.0.0.1:8000/api/get_user_details/',{
              token:resp
            }).then(res=>{
           
              console.log( res.data.username);
              setCookieUsername("username", res.data.username, {expires:
cookieExpiry});
              setLoading(false)
              router.push("/createroom");

            }
            )

          })
          .catch(err => {
            if(err.response.status === 400){
             
              setTypeAlert("error");
              setAlert("Invalid credentials");
              console.log("err",err.response.data);
            }else{
              setTypeAlert("error");
              setAlert("Something went wrong");
             
            }
            setLoading(false)
          })
        }
       
        console.log(password, username);
       

Register.js
  var cookieExpiry = new Date();
  cookieExpiry.setDate(cookieExpiry.getDate()+60);
  const router = useRouter();

  const handleSubmit = () => {


    console.log(username, fullname, email, password, confirmPassword);
    if (username == "") {
      setTypeAlert("error");
      setAlert("Please enter your username");
    }
    else if (fullname == "") {
      setTypeAlert("error");
      setAlert("Please enter your fullname");
    }
    else if (email == "") {
      setTypeAlert("error");
      setAlert("Please enter your email");
    }
    else if (password == "") {
      setTypeAlert("error");
      setAlert("Please enter your password");
    }
    else if (confirmPassword == "") {
      setTypeAlert("error");
      setAlert("Please enter your confirm password");
    }

    else if (password !== confirmPassword) {


      setAlert("Password and Confirm Password do not match");
      setTypeAlert("error");
    }
    else {
      setLoading(true);
      axios
        .post("http://127.0.0.1:8000/api/register/", {
          username: username,
          first_name: fullname,
          email: email,
          password: password
        })
        .then(res => {
          console.log(res);
          setAlert("Signed up successfully");
          setTypeAlert("success");
          setCookie("token", res.data.token, {expires: cookieExpiry});
          setCookieUsername("username", res.data.username, {expires: cookieExpiry});
          setLoading(false);
          router.push("/createroom");
         
        })
        .catch(err => {
          console.log(err);
          setAlert("Register Failed");
          setTypeAlert("error");
          setLoading(false);
        });
    }
Compiler.js

import React from "react";


import { languages, themes } from "../Constants";
import dynamic from "next/dynamic";
const AceEditor = dynamic(async () => {
  const ace = await import("react-ace");
  languages.forEach((lang) => {

    if(lang === 'c' || lang === 'cpp'){


      console.log(lang);
      require(`ace-builds/src-noconflict/mode-c_cpp`);

    }else{
      require(`ace-builds/src-noconflict/mode-${lang}`);
    }

   
  });
  themes.forEach((theme) => {
    require(`ace-builds/src-noconflict/theme-${theme}`);
  });
  return ace;
});

export default function CodeComplier({


  height,
  width,
  defaultValue,
  mode,
  theme,
  handleChange,
  handleSave,
  editorVal
 
}) {
  return (
    <>
      <AceEditor
        mode={mode}
        theme={theme}
        showGutter={true}
        highlightActiveLine={true}
        height={height}
        width={width}
        defaultValue={defaultValue}
        value={editorVal}
        onChange={handleChange}
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: t
Appendix A

Sample Output:
REFERENCES

[1]. H. Attiya, S. Burckhardt, A. Gotsman, A. Morrison, H. Yang,


and M. Zawirski. Specification and Complexity of
Collaborative Text Editing (Extended Version). Available
from http://www.software.imdea.org/~gotsman.

[2]. H. Attiya, F. Ellen, and A. Morrison. Limitations of


Highly-Available Eventually-Consistent Data Stores. In
PODC, 2015.

[3].P. Bailis, A. Ghodsi, J. M. Hellerstein, and I. Stoica. Bolt-on


Causal Consistency. In SIGMOD, 2013.

[4]. J. Du, C. Iorgulescu, A. Roy, and W. Zwaenepoel. Closing


The Performance Gap between Causal Consistency and
Eventual Consistency. In PaPEC, 2014.

[5].hierarchical channel coding for broadcasting employing GC-codes Publisher : IEEE -


2019 Author : T. Dorsch; S. Huttinger ; J.B. Huber

[6].Collaborative opportunistic network coding for persistent data stream in disruptive


sensor networks Publisher : IEEE - 2021 Author : Mingsen Xu

[7].J. Day-Richter. What’s different about the new Google Docs:


Making collaboration fast. http://googledrive.blogspot.com/
2010/09/whats-different-about-new-google-docs.html, 2010.

[8].G. DeCandia, D. Hastorun, M. Jampani, G. Kakulapati,


A. Lakshman, A. Pilchin, S. Sivasubramanian, P. Vosshall,
and W. Vogels. Dynamo: Amazon’s Highly Available
Key-value Store. In SOSP, 2007.

[9].X. Défago, A. Schiper, and P. Urbán. Total Order Broadcast


and Multicast Algorithms: Taxonomy And Survey. ACM
CSUR, 36(4), 2004.

[10].J. Du, S. Elnikety, A. Roy, and W. Zwaenepoel. Orbe:


Scalable Causal Consistency Using Dependency Matrices
and Physical Clocks. In SoCC, 2013.

You might also like