Channel members can edit the shared view and share files. Workspace has draggable working area. You can create moveable sticky notes, add HTML code to the selected location, or upload images to the background in the selected location. All data is stored in Mongo DB. The workspace opens when a channel is selected. Functionality can be found in context menus. Smooth animated user experience.
app on Render
Test users are:
username:testuser password:testuser
and username:testuser2 password:testuser2
Or You can create your own. Using Google login app creates username from gmail address. A new channel must be created for a new user in order to try out app features. Firefox is slow with react-spring animations...
- MongoDB installation
- npm get npm
-
run
npm install
in folderclient
-
run
npm install
in folderserver
-
Create web app and get client id from https://console.cloud.google.com app credentials tabb for Google login.
set correct URIs in cloud console credentials tabUpdate line 61
CLIENT_ID=...
in client/src/components/Login.js -
Fix line 24
let socket = io('wss://visualchat.onrender.com')
tolet socket = io('ws://localhost:3003')
in client/src/index.js. -
Comment line 11
app.use(express.static('build'))
in server/app.js. (this is for Render cloud. It builds directly from github). -
create .env file with content:
MONGODB_URI=mongodb://127.0.0.1:27017 PORT=3003 NODE_ENV=test SECRET=mySecretString CLIENT_ID=client-id.apps.googleusercontent.com
into folder
server
tested with Firefox, Chrome and Edge. React-spring is super slow in Firefox and OAuth2 didn't work in Edge in VM
npm start
in server folder.npm start
in client folder.