Devspaces

• 

  Main Screen

• 

  Room/Code Compiler View

Inspiration

I wanted to create a one-stop place for developers where they can collaborate, discuss ideas, and code with each other, that is how the idea of this project came.

What it does

Devspaces is a collaborative platform for developers with an inbuilt online code editor and compiler where they can join various rooms and code and collaborate with each other.

How we built it

• Use ReactJS for the frontend development along with Chakra UI.
• Used ExpressJS framework for creating a server.
• Used Socket.io library for creating the server and client sockets and enabling connection and communication between them.
• Used CodeMirror for implementing the code editor.
• Used Judge0 API to compile the code.

Challenges we ran into

I have more experience with Frontend Development. So, this was the first time I was working with the ExpressJS framework and sockets and working on the full stack project all by myself. So the main challenge I faced was to implement the client-server communication through sockets and the real-time code compiler so that the code changes can be synced between multiple clients.

What we learned

• Learned how communication takes place between multiple clients and servers through sockets and how we can use the socket.io library for this purpose.
• Also, I was always curious to know how code compilers are developed so it was exciting to implement a code compiler all by myself.

What's next for Devspaces

• Currently, the code compiler only supports python language, so I will be extending the support to multiple languages.
• Integrate a collaborative white canvas board to discuss the code approach.

Built With

• chakra-ui
• codemirror
• express.js
• node.js
• react
• socket.io