Samples of my work
Systems Architecture Designs
Example
Front-End Javascript Code
React
import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
import CatsList from './CatsList.js'
import LendCats from './LendCats.js'
export default class App extends React.Component{
constructor(){
super()
this.state={
showAvailableCats:true,
catsList : []
}
this.onClickBorrow = this.onClickBorrow.bind(this);
this.onClickLend = this.onClickLend.bind(this);
}
componentWillMount(){
var catsArr = this.state.catsList.slice();
var context = this;
axios.get('/getCats')
.then((response) => {
console.log('this should be the cats arr' , response.data)
response.data.forEach(function(cat){
catsArr.push(cat);
})
context.setState({
catsList:catsArr,
showAvailableCats : true
})
}).then(function(){
console.log('cats in index', context.state.catsList)
context.render()
})
.catch((error) => console.log(error))
}
onClickBorrow(){
window.location.reload()
this.setState({
showAvailableCats: true
})
}
onClickLend(){
this.setState({
showAvailableCats: false
})
}
render(){
return (
{this.state.showAvailableCats ?
Redux
import React, { Component } from 'react'
import { FormGroup } from 'react-bootstrap'
import axios from 'axios'
import { connect } from 'react-redux';
import { Button } from 'react-bootstrap'
import Header from '../containers/header.jsx'
import URL from '../../config/url.js'
class Setting extends Component {
constructor(props) {
super(props)
this.handleClickCancel = this.handleClickCancel.bind(this)
this.handleClickUpdate = this.handleClickUpdate.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleIconClick = this.handleIconClick.bind(this)
// this.handleIconClick = this.handleIconClick.bind(this)
this.state = {
username: '',
password: '',
email: '',
firstname: '',
lastname: '',
quote: '',
icon: ''
};
}
componentDidMount() {
// this.setState({username: this.currentUserStore.username})
}
handleClickCancel() {
this.props.browserHistory.history.push('/main')
}
async handleClickUpdate() {
console.log(this.currentUserStore)
// alert(JSON.stringify(this.state))
let userObj = {
username: this.props.currentUserStore.username,
first: this.state.firstname,
last: this.state.lastname,
quote: this.state.quote,
icon: this.state.icon
}
// alert(JSON.stringify(userObj))
let response = await axios.post(`${URL.LOCAL_SERVER_URL}/main/update`, userObj)
this.props.browserHistory.history.push('/main')
}
handleChange(event) {
var obj = {};
obj[event.target.name] = event.target.value;
this.setState(obj, () => {
console.log('new state: ', this.state)
});
}
handleIconClick(e) {
console.log('icon clicked', e.target.src)
this.setState({
icon: e.target.src
})
}
render() {
return (
{/* Username: {this.props.currentUserStore.username}
*/}
{/* Email: {this.props.currentUserStore.email}
*/}
{/* FirstName: {this.props.currentUserStore.first}
*/}
{/* LastName: {this.props.currentUserStore.last}
*/}
Current motto: {this.props.currentUserStore.quote}
)
}
}
function mapStateToProps(state) {
return {
currentUserStore: state.currentUserStore,
browserHistory: state.browserHistory
}
}
export default connect(mapStateToProps)(Setting);
Back-End Javascript Code
NodeJS Restful API
const db = require('../../database/database.js');
const {getGeocode} = require('../../utils/getGeocode');
const nodemailer = require('nodemailer');
const path = require('path')
exports.allItems = function(req, res) {
const text = 'SELECT * FROM items';
db.query(text, (err, query) => {
if (err) {
console.log(err.stack)
} else {
res.json(query.rows)
}
})
};
exports.addItem = function(req, res) {
console.log(req.body);
req.body.price = parseInt(req.body.price);
let lat, lng;
getGeocode(req.body.location, (data) => {
console.log('DATA?', data);
lat = data.lat.toString();
lng = data.lng.toString();
const text = `INSERT INTO items (item_name, image_url, location, type, price, description, owner_email, owner_lat, owner_lng) VALUES ('${req.body.item_name}', '${req.body.image_url}', '${req.body.location}', '${req.body.type}', ${req.body.price}, '${req.body.description}', '${req.body.owner_email}', '${lat}', '${lng}')`;
db.query(text, (err, query) => {
if (err) {
console.log(err);
} else {
res.send('item saved to database');
}
})
});
}
exports.sendEmail = function(req, res) {
const smtpTrans = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: 'buyandsell404@gmail.com',
pass: 'buyandsell'
}
});
const mailOptions = {
from: 'buyandsell404@gmail.com',
to: req.body.owner_email,
subject: 'A BuyAndSell user has sent you an email about your item!',
text: req.body.text + ' Contact this user at ' + req.body.user_email
};
smtpTrans.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info);
}
});
res.send('email has been sent');
};
exports.addHistory = function(req, res) {
res.sendFile(path.resolve(__dirname, '../../client/build/index.html'));
}
exports.getpolicy = function(req,res){
res.sendFile(path.resolve(__dirname, '../../client/build/privacy/privacy.html'));
}
exports.addUser = function(req,res){
console.log('should be new user ', req.body)
const text = `INSERT INTO users (id, email, password, photo) VALUES ('${req.body.id}', '${req.body.email}', '${req.body.password}', '${req.body.photo}')`;
db.query(text, (err, query) => {
if (err) {
console.log(err);
} else {
res.send('item saved to database');
}
})
}
exports.getUser = function(req,res){
console.log('should be user id ', req.query.id)
const text = `SELECT * from users WHERE id = ('${req.query.id}')`;
db.query(text,(err,query)=>{
if(err){
console.log(err);
} else{
console.log('the user ', query.rows)
res.json(query.rows);
}
})
}
exports.deleteItem = function(req,res){
console.log('please be data ', req.body)
const text = `DELETE FROM items WHERE owner_email = ('${req.body.owner_email}') AND item_name = ('${req.body.item_name}')`;
db.query(text,(err,query)=>{
if(err){
console.log(err);
} else{
console.log('the user ', query.rows)
res.send('item deleted from database');
}
})
}
SocketIO Server
const express = require('express');
const s3models = require('./s3models.js')
const https = require('https');
const http = require('http');
const SocketIo = require('socket.io');
const env = require('../config/env.js');
const fs = require('fs');
let siofu = require('socketio-file-upload');
var app = express();
app.use(siofu.router)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Headers", "Content-Type");
res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
next();
});
const server = http.createServer(app);
const io = SocketIo(server);
var os = require('os');
// lol yolo
io.set('origins', '*:*');
io.on('connection', (socket) => {
let uploader = new siofu();
uploader.dir = './files';
uploader.listen(socket);
uploader.on("saved", function(event){
console.log(event.file);
s3models.dropFile(event.file, function (err, dataObj) {
console.log('s3 socket.js dataObj ', dataObj)
})
})
uploader.on("error", function(event){
console.log("Error from uploader", event);
});
socket.on('private', body => {
console.log('this is private channel ', body)
socket.broadcast.emit('private', body)
})
socket.on('group', body => {
console.log('this is group channel ', body)
socket.broadcast.emit('group', body)
})
socket.on('request', body => {
console.log('this is request channel ', body)
socket.broadcast.emit('request', body)
})
socket.on('accept', body => {
console.log('this is accept channel ', body)
socket.broadcast.emit('accept', body)
})
socket.on('newroom', body => {
console.log('this is newroom channel ', body)
socket.broadcast.emit('newroom', body)
})
socket.on('message', function(message) {
console.log('Client said: ', message);
// for a real app, would be room-only (not broadcast)
socket.broadcast.emit('message', message);
});
socket.on('create or join', function(room) {
console.log('Received request to create or join room ' + room);
var clientsInRoom = io.nsps['/'].adapter.rooms[room]; // socket.io 1.4.8
var numClients = clientsInRoom === undefined ? 0 : Object.keys(clientsInRoom.sockets).length;
// max two clients
if (numClients === 2) {
socket.emit('full', room);
return;
}
console.log('Room ' + room + ' now has ' + (numClients + 1) + ' client(s)');
if (numClients === 0) {
socket.join(room);
console.log('Client ID ' + socket.id + ' created room ' + room);
socket.emit('created', room, socket.id);
} else {
console.log('Client ID ' + socket.id + ' joined room ' + room);
io.sockets.in(room).emit('join', room);
socket.join(room);
socket.emit('joined', room, socket.id);
io.sockets.in(room).emit('ready');
}
});
socket.on('ipaddr', function() {
var ifaces = os.networkInterfaces();
for (var dev in ifaces) {
ifaces[dev].forEach(function(details) {
if (details.family === 'IPv4' && details.address !== '127.0.0.1') {
socket.emit('ipaddr', details.address);
}
});
}
});
socket.on('bye', function(){
console.log('received bye');
});
});
const port = process.env.PORT || env.SOCKET_SERVER_PORT;
server.listen(port, () => console.log(`socket server listening on port ${port}`));