platinum-fox-2017 · ardhiansyahputra · Mar 7, 2018 · Mar 7, 2018
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Mini-Twatt</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="topnav">
+        <a href="#" onClick="getTimeline(); return false;">Mini-Twatt</a>
+        <input type="text" name="status" id="status" placeholder="What's happening?">
+        <div class="search-container">
+            <input type="text" placeholder="Search.." name="search" id="search">
+            <button type="submit" id="btnSearch"><i class="fa fa-search"></i></button>
+        </div>
+    </div>
+    <div class="timeline"></div>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="./moment.min.js"></script>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/client/moment.min.js b/client/moment.min.js
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,65 @@
+const populateTimeline = (data) => {
+    $('.timeline').empty();
+    let side = ['left', 'right'];
+    let count = 0;
+    data.forEach(element => {
+        $('.timeline').append(`
+        <div class="container ${side[count]}">
+        <div class="content">
+        <span>${ moment(moment(element.created_at)).fromNow() }</span>
+        <h4><img src="${element.user.profile_image_url}"> ${element.user.name} <span>@${element.user.screen_name}</span></h4>
+        <p>${element.text}</p>
+        </div>
+        </div>
+        `)
+        count = ((count + 1) % 2);
+    });
+}
+
+const getTimeline = () => {
+    $.ajax({
+        url: 'http://localhost:3000/api/timeline',
+        method: 'get',
+        success: (response) => {
+            populateTimeline(response);
+        }
+    })
+}
+
+$('#status').keypress(function (e) {
+    var key = e.which;
+    if(key == 13) {
+        $.ajax({
+            type: "POST",
+            data: { status: $('#status').val() },
+            url: 'http://localhost:3000/api/tweet',
+            success: (response) => {
+                getTimeline();
+                $('#status').val('');
+            },
+        });
+    }
+});
+
+$('#btnSearch').click(function (event) {
+    $.ajax({
+        url: `http://localhost:3000/api/search/${ $('#search').val() }`,
+        method: 'get',
+        success: (response) => {
+            populateTimeline(response.statuses);
+        }
+    })
+});
+
+$('#search').keypress(function (e) {
+    var key = e.which;
+    if(key == 13) {
+        $('#btnSearch').click();        
+    }
+});
+
+getTimeline();
+
+setInterval(function () {
+    getTimeline();
+}, 300000);
diff --git a/client/style.css b/client/style.css
@@ -0,0 +1,215 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    /* background-color: #474e5d; */
+    background-color: #e6e6e6;
+    margin: 0;
+    font-family: Helvetica, sans-serif;
+}
+
+#status[type=text] {
+    width: 200px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+}
+
+/* When the input field gets focus, change its width to 100% */
+#status[type=text]:focus {
+    width: 60%;
+}
+
+.topnav {
+    overflow: hidden;
+    background-color: #2196F3;
+}
+
+.topnav a {
+    float: left;
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+/* .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+} */
+
+.topnav a.active {
+    background-color: #2196F3;
+    color: white;
+}
+
+.topnav .search-container {
+    float: right;
+}
+
+.topnav input[type=text] {
+    padding: 6px;
+    margin-top: 8px;
+    font-size: 17px;
+    border: none;
+}
+
+.topnav .search-container button {
+    float: right;
+    padding: 6px 10px;
+    margin-top: 8px;
+    margin-right: 16px;
+    background: #ddd;
+    font-size: 17px;
+    border: none;
+    cursor: pointer;
+}
+
+.topnav .search-container button:hover {
+    background: #ccc;
+}
+
+@media screen and (max-width: 600px) {
+    .topnav .search-container {
+        float: none;
+    }
+    .topnav a, .topnav input[type=text], .topnav .search-container button {
+        float: none;
+        display: block;
+        text-align: left;
+        width: 100%;
+        margin: 0;
+        padding: 14px;
+    }
+    .topnav input[type=text] {
+        border: 1px solid #ccc;  
+    }
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: black;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+}
+
+/* Container around content */
+.container {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+}
+
+/* The circles on the timeline */
+.container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: white;
+    border: 4px solid black;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+/* Place the container to the left */
+.left {
+    left: 0;
+}
+
+/* Place the container to the right */
+.right {
+    left: 50%;
+}
+
+/* Add arrows to the left container (pointing right) */
+.left::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid white;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent white;
+}
+
+/* Add arrows to the right container (pointing left) */
+.right::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.right::after {
+    left: -16px;
+}
+
+/* The actual content */
+.content {
+    padding: 20px 30px;
+    background-color: white;
+    /* background-color: burlywood; */
+    position: relative;
+    border-radius: 6px;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media all and (max-width: 600px) {
+  /* Place the timelime to the left */
+  .timeline::after {
+    left: 31px;
+  }
+
+  /* Full-width containers */
+  .container {
+    width: 100%;
+    padding-left: 70px;
+    padding-right: 25px;
+  }
+
+  /* Make sure that all arrows are pointing leftwards */
+  .container::before {
+    left: 60px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+  }
+
+  /* Make sure all circles are at the same spot */
+  .left::after, .right::after {
+    left: 15px;
+  }
+
+  /* Make all right containers behave like the left ones */
+  .right {
+    left: 0%;
+  }
+}
diff --git a/server/.gitignore b/server/.gitignore
@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
diff --git a/server/README.md b/server/README.md
@@ -0,0 +1,2 @@
+# twatt
+oauth twitter