diff --git a/index.js b/index.js
new file mode 100644
index 0000000..32a10d7
--- /dev/null
+++ b/index.js
@@ -0,0 +1,19 @@
+var express = require('express');
+var socket = require('socket.io');
+
+// App setup
+var app = express();
+var server = app.listen(4000, function(){
+ console.log('listening for requests on port 4000,');
+});
+
+// Static files
+app.use(express.static('public'));
+
+// Socket setup & pass server
+var io = socket(server);
+io.on('connection', (socket) => {
+
+ console.log('made socket connection', socket.id);
+
+});
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7a08894
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "websockets-playlist",
+ "version": "1.0.0",
+ "description": "A chat app using WebSockets",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/iamshaunjp/websockets-playlist.git"
+ },
+ "author": "The Net Ninja",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/iamshaunjp/websockets-playlist/issues"
+ },
+ "homepage": "https://github.com/iamshaunjp/websockets-playlist#readme",
+ "dependencies": {
+ "express": "^4.15.2",
+ "socket.io": "^1.7.3"
+ },
+ "devDependencies": {
+ "nodemon": "^1.11.0"
+ }
+}
diff --git a/public/chat.js b/public/chat.js
new file mode 100644
index 0000000..84b5877
--- /dev/null
+++ b/public/chat.js
@@ -0,0 +1,2 @@
+// Make connection
+var socket = io.connect('http://localhost:4000');
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..5aeaeff
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ WebScockets 101
+
+
+
+
+ Woo, you see me!
+
+
+
+
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..a28e285
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,69 @@
+body{
+ font-family: 'Nunito';
+}
+
+h2{
+ font-size: 18px;
+ padding: 10px 20px;
+ color: #575ed8;
+}
+
+#mario-chat{
+ max-width: 600px;
+ margin: 30px auto;
+ border: 1px solid #ddd;
+ box-shadow: 1px 3px 5px rgba(0,0,0,0.05);
+ border-radius: 2px;
+}
+
+#chat-window{
+ height: 400px;
+ overflow: auto;
+ background: #f9f9f9;
+}
+
+#output p{
+ padding: 14px 0px;
+ margin: 0 20px;
+ border-bottom: 1px solid #e9e9e9;
+ color: #555;
+}
+
+#feedback p{
+ color: #aaa;
+ padding: 14px 0px;
+ margin: 0 20px;
+}
+
+#output strong{
+ color: #575ed8;
+}
+
+label{
+ box-sizing: border-box;
+ display: block;
+ padding: 10px 20px;
+}
+
+input{
+ padding: 10px 20px;
+ box-sizing: border-box;
+ background: #eee;
+ border: 0;
+ display: block;
+ width: 100%;
+ background: #fff;
+ border-bottom: 1px solid #eee;
+ font-family: Nunito;
+ font-size: 16px;
+}
+
+button{
+ background: #575ed8;
+ color: #fff;
+ font-size: 18px;
+ border: 0;
+ padding: 12px 0;
+ width: 100%;
+ border-radius: 0 0 2px 2px;
+}