discourse

About

Code, collaborate, and chat together with discouse. The discourse platform offers real-time, cooperative code rooms. Choose from over 100 languages. Go beyond generic code sharing platforms, utilize powerful functionalities along with simple and intuitive interfaces. Try it out at https://discourse.vercel.app/. Make sure to give it couple seconds for the backend on heroku to wake up.

Demo

Setup

git clone https://github.com/MatoPlus/discourse
cd discourse
cd server && npm i
cd ..
cd client && npm i

Running the app for development

Both client, server, and socket url will need to be started up separately

client

cd client && npm run dev

socket

cd client && npx y-websocket-server

server

cd server && npm run watch # actively compiles to javascript, hangs
cd server && npm run dev # runs the compiled javascript

Environmental variables

Corresponding .env files are required in both the client and server directory.

client/.env.local

NEXT_PUBLIC_API_URL=<url of API hosted by server>
NEXT_PUBLIC_SOCKET_URL=<url of websocket for p2p CRDT handling>

server/.env

DATABASE_URI=<MongoDB connection url>
PORT=<port for server to listen on>
ACCESS_JWT_SECRET=<JWT secret, generated securely>
REFRESH_JWT_SECRET=<JWT secret, generated securely>
RECOVER_JWT_SECRET=<JWT secret, generated securely>
CORS_ORIGIN=<url of client, allow API calls from client>

Main Technologies

• MongoDB Atlas - Persist rooms and users in the platform
• Yjs - Integrates CRDT (Conflict-free replicated data type) to prevent conflict issues in code rooms
• Express.js - Used to setup backend logic via REST API
• Socket.io - Used sockets to implement real-time interactions between users
• Next.js - Used to do deliver better server/client-side rendering, faster pages!
• Node.js - Used as a Javascript runtime to build the platform
• Typescript - Superset of Javascipt, using static typing to enrich development
• React - Used to build frontend/user interface of the platofrm
• Chakra UI - Used to create accessible UI components