secondDeal

by Austin Liu

Introduction

"Create art together! Throw all of your photos onto a single canvas, and watch as the memories pile!"

This project was an attempt to create a virtual collage table, where users around the world can throw their pictures and memories onto the same surface for viewing! With a single app running, you can have many tables running, each with multiple clients all sharing photos at the same time thanks to Socket.io!

For Developers, this was also an attempt to explore what Socket.io and CSS transforms could do. It was really cool to transfer images via WebSockets!

How to Use

• Run npm install
• On a computer (preferably the one with the largest display)
  • Start this app up using npm start
  • Click Server
• From other devices (preferably mobile), navigate to the same site
  • Type in the Room Number
  • Click Client
• From the clients, you can choose to
  • Fling cards at random (influenced by flick speed and direction)
  • Fling pictures by hitting the upload picture button!
• From the server, you can move around the latest image, zoom in, etc.

Technologies Used

• VueJS
• Socket.io
• NodeJS
• Bootstrap
• QRCodeDecoder
• qrcode.js
• TouchTrack
• HammerJS
• Deck Of Cards

Inspired By

This project was heavily inspired by Hélio Dolores' amazing article on Medium! His code can be found on Github here!