Make it Real Elite — Third week — Collaborative Canvas

This third week I had the chance to do a collaborative canvas or a page to do kind of live pair programing; I decided to do the collaborative canvas because doing a canvas was something that I didn’t like to much in the past… that’s why I choose it; it was the opportunity to start liking the canvas and learning how to use it; so, in the future I can create some graphics on it.

The technologies used to create this collaborative canvas was: React, Socket.io, MongoDB and node.js.

React:

I use react to continue practicing it, I had a little experience using it so that’s why I choose to use it. In this case I used create-react-app to start the project, and use other components like, axios that is a promise based HTTP client for the browser and node.js, to define the routes I used React-Router, to handle the state with the store I used Redux and for some design I choose react-bootstrap and Material-UI

Doing this on react helped me learn a lot of new thing and good practices about it; in one case I was passing some props to the state, that is absolutely a bad practice; and a mentor on make it real, teach me this:

State Criteria:
1. Is it passed in from a parent via props? If so, it probably isn’t state. A lot of the data used in our child components are already listed in their parents. This criterion helps us de-duplicate.
2. Does it change over time? If not, it probably isn’t state. This is a key criterion of stateful data: it changes.
3. Can you compute it based on any other state or props in your component? If so, it’s not state. For simplicity, we want to strive to represent state with as few data points as possible.

Scocket.io:

Before start developing I learn how to use socket.io, it was the first time that I use it, so I follow the tutorial that they have and create a live chat, the first difficulty that I have on the moment of use socket.io on react was how to integer both, after researching on different places I found how to use It, I share with you in case you need it:

Client side:

import SocketIOClient from ‘socket.io-client’;

on the constructor (you must put the route where the socket.io is running):

this.socket = SocketIOClient(‘http://localhost:8080');
this.socket.on(‘event’, (data)=>{
this.someFunction(data.property)
})

on the function, you want to use to emit:

someOtherFunction(){
this.socket.emit(‘event’, {
property: ‘data’
})
}

Server side:

var express = require(‘express’);
var app = express();
var http = require(‘http’).Server(app);
var io = require(‘socket.io’)(http);
var port = process.env.PORT || 8080
app.get(‘/’, function(req, res){
res.json({ message: ‘welcome to our api on port: ‘ + port});
})
io.on(‘connection’, function(socket){
socket.on(‘event’, function(data){
io.emit(‘event, data)
})
});
http.listen(port, function() {
console.log(‘listening to port 8080’)
});

when the socket detects a connection, it starts listening until an event happen, and when it happens it emit the info that receives to the other users that are connected too.

MongoDB:

On mongodb I used mongoose that is a mongodb object modeling for node.js, where I create to models of it, one for the users:

var mongoose = require(‘mongoose’);
var Schema = mongoose.Schema;
module.exports = mongoose.model(‘User’, new Schema({
email: String,
userName: String,
password: String,
token: String
}))

and one for the canvas:

var mongoose = require(‘mongoose’);
var Schema = mongoose.Schema;
module.exports = mongoose.model(‘Canvas’, new Schema({
name: String,
image: String,
users: [String]
}))

I used the id of the canvas to identify it on the web application, so, when a user enter to a link, he/she can get the info stored on it.

Node.js:

I used node.js with express which is a minimalist web framework for node.js. This was the first time that I used it on a project, so in this first approach I have some mistakes that I have to improve, I used web tokens to check if the user is logged and has access to some views of the app.

On the next day’s I’ll post the link of the final result.