SkyOffice

An immersive virtual office - Winner of 2021 Monte Jade Innovation Competition

• Come try it out - Official Website
• Why we built this - Concept Video
• 🙌 Get latest updates? Follow our Twitter.
• 💕 Love this project? Consider buy me a coffee.

SkyOffice works on all PC browsers (mobile browsers are currently not supported)

Built with

• Phaser3 - Game engine
• Colyseus - WebSocket-based server framework
• React/Redux - Front-end framework
• PeerJS - WebRTC for video/screen sharing
• TypeScript and ES6 - for both client and server sides

Features

• Proximity Chat
• Flexible Screen Sharing
• Multifunctional Rooms
• Text Message Chat
• Custom/Private Rooms
• Embedded Whiteboards (iframe embed of WBO)

Proximity Chat (distance-based interactive system)

Multifunctional Rooms

Flexible & Immediate Screen Sharing

Text Message Chat (with real time dialog bubbles)

Embedded Whiteboards

Custom/Private Rooms

Controls

• W, A, S, D, or arrow keys to move (video chat will start if you are close to someone else)
• E to sit down
• R to use computer (for screen sharing)
• Enter to open chat
• ESC to close chat

Prerequisites

You'll need Node.js, npm installed.

Getting Started

Clone this repository to your local machine:

git clone https://github.com/kevinshen56714/SkyOffice.git

This will create a folder named SkyOffice. You can specify a different folder name like this:

git clone https://github.com/kevinshen56714/SkyOffice.git my-folder-name

To start a server, go into the project folder and install dependencies/run start command:

cd SkyOffice or 'my-folder-name'
yarn && yarn start

To start a client, go into the client folder and install dependencies/run start command:

cd SkyOffice/client or 'my-folder-name/client'
yarn && yarn dev

Hosting

Client: Inside the root folder there is a netlify.toml file. This makes it easy to deploy our client over on Netlify. All you have to do it just connect the github repository and Netlify will do the rest following the instructions from the .toml file.

Server: Go to heroku and deploy from Github, it will give you a SSL encrypted site link that you can then use and add to your environment variables under VITE_SERVER_URL (without the port number).

Credits 🎉

Big thanks to this great repo - ourcade/phaser3-typescript-parcel-template

Big thanks to pixel artist - LimeZu

Big thanks to open-source whiteboard project - WBO

License

This project is licensed under MIT.

If you're using SkyOffice to power your virtual office or using our code in other projects, please consider buy me a coffee. Thank you :)