Code Together-2
Code Together-2
Submitted by
V.R.DIKSHITREDDY 212219040026
E.GANESHREDDY 212219040028
R.GANESH 212219040032
of
BACHELOR OF ENGINEERING
IN
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
Engineering, Engineering,
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
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.
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).
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.
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!
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.
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.
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].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.
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).
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
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.
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.
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
“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]]]
“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
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:
PROGRAMMING LANGUAGES:
1. HTML
2. CSS
3. REACT.JS
4. DJANGO
5. PYTHON
CHAPTER 4
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:
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.
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
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).
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.
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'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 :
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:
VONAGE :
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!
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();
}else{
require(`ace-builds/src-noconflict/mode-${lang}`);
}
});
themes.forEach((theme) => {
require(`ace-builds/src-noconflict/theme-${theme}`);
});
return ace;
});
Sample Output:
REFERENCES