platinum-fox-2017 · eksant · Mar 7, 2018 · Mar 7, 2018 · Mar 8, 2018 · Mar 8, 2018
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # socmed-aggregator
-client server app for your social media with oAuth and Facebook login
+Client-Server app for your social media with oAuth and Facebook login
+
+![Socmed Aggregator](https://raw.githubusercontent.com/eksant/socmed-aggregator-1/master/client/img/socmed-aggregator.png "Preview")
diff --git a/client/css/bootstrap.min.css b/client/css/bootstrap.min.css
diff --git a/client/css/style.css b/client/css/style.css
@@ -0,0 +1,47 @@
+.nav-pills-custom>li>a {
+	color: lightgrey;
+}
+.nav-pills-custom>li>a:focus,
+.nav-pills-custom>li>a:hover {
+	background: none;
+	color: grey;
+}
+.panel-custom>.panel-heading {
+	background: none;
+	border-bottom: none;
+}
+.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
+	background-color: #337AB7;
+}
+.form-control-nav{
+	background-color:#F0FFFF;
+  border: lightgrey solid 1px;
+	border-radius:15px;
+}
+body{
+  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+  color: #242020;
+  opacity: 0.95;
+}
+.navbar-default .navbar-collapse, .navbar-default{
+background-color: white;
+}
+.panel-footer{
+	background-color: lightcyan;
+}
+.well{
+	background-color: lightcyan;
+}
+a{
+	color:#60A6C1;
+}
+div.panel-heading{
+	padding-top:15px;
+	padding-bottom: 0px;
+}
+.form-control-feedback{
+	line-height:27px;
+}
+.panel-info{
+	border:1px lightgrey solid;
+}
diff --git a/client/img/logo_e.png b/client/img/logo_e.png
diff --git a/client/img/socmed-aggregator.png b/client/img/socmed-aggregator.png
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Socmed Aggregator</title>
+  <link rel="icon" type="image/png" href="img/logo_e.png">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/style.css">
+  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
+  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+</head>
+
+<body>
+  <!-- top-bar -->
+  <div class="navbar navbar-default navbar-static-top">
+    <div class="container">
+      <div class="navbar-collapse navbar-collapse-1 collapse" aria-expanded="true">
+        <ul class="nav navbar-nav">
+          <li class="active"><a href="#fake"><i class="fas fa-stopwatch"></i> Timeline</a></li>
+        </ul>
+        <div class="navbar-form navbar-right">
+          <div class="form-group has-feedback">
+            <input type="text" class="form-control-nav" id="find" name="find">
+          </div>
+          <!-- <a class="btn" onclick="search()"><i class="fas fa-search"></i></a> -->
+          <button class="btn btn-xs btn-default" type="submit" onclick="search()">
+  					<i class="fas fa-search"></i>
+  				</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-3">
+        <!-- left-bar -->
+        <div class="panel panel-default">
+          <div class="panel-body">
+            <img class="img-responsive" id="img-profile" alt="profile" src="http://placehold.it/800x500">
+            <div class="row">
+              <div class="col-xs-3">
+                <h5 id="user-tweets"><small>TWEETS</small><br>1,453</h5>
+              </div>
+              <div class="col-xs-4">
+                <h5 id="user-following"><small>FOLLOWING</small><br>2531</h5>
+              </div>
+              <div class="col-xs-5">
+                <h5 id="user-follower"><small>FOLLOWERS</small><br>153</h5>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- user-timeline -->
+        <div class="panel panel-default panel-custom">
+          <div class="panel-heading">
+            <h3 class="panel-title">My Timeline</h3>
+          </div>
+          <div class="panel-body">
+            <ul class="list-unstyled" id="tweet-user"></ul>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="panel panel-info">
+          <div class="panel-heading">
+            <div class="media">
+              <div class="media-body">
+                <div class="col-sm-9">
+                  <div class="form-group">
+                    <input type="text" class="form-control" id="status" name="status">
+                  </div>
+                </div>
+                <div class="col-sm-3">
+                  <button class="btn btn-primary" id="submit"><i class="fab fa-twitter"></i> Post</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div id="tweet-home"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- right-nav -->
+      <div class="col-sm-3">
+        <div class="panel panel-default panel-custom">
+          <div class="panel-heading">
+            <h3 class="panel-title"><strong>I am always in...</strong></h3>
+          </div>
+          <div class="panel-body">
+            <div class="media">
+              <div class="media-left"><i class="fab fa-linkedin fa-2x"></i></div>
+              <div class="media-body">
+                <h4 class="media-heading"><a href="https://www.linkedin.com/in/eko-santoso/">Linkedin</a></h4>
+              </div>
+            </div>
+            <div class="media">
+              <div class="media-left"><i class="fab fa-github-square fa-2x"></i></div>
+              <div class="media-body">
+                <h4 class="media-heading"><a href="https://github.com/eksant">Github</a></h4>
+              </div>
+            </div>
+            <div class="media">
+              <div class="media-left"><i class="fab fa-google-plus-square fa-2x"></i></div>
+              <div class="media-body">
+                <h4 class="media-heading"><a href="http://google.com/+EkoSantosoGPlus">Google+</a></h4>
+              </div>
+            </div>
+          </div>
+          <div class="panel-footer">
+            <small><a href="mailto:[email protected]">eksant[at]gmail.com</a> &copy; 2018 soc-agg</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    $.ajax({
+      url: `http://localhost:3000/api/twatts/timelinehome`,
+      type: 'GET',
+      dataType: 'JSON',
+      success: function(resp) {
+        $('#img-profile').attr('src', resp[0].user.profile_image_url)
+        $('#img-profile').attr('width', '200px')
+        $('#user-tweets').html(`<small>TWEETS</small><br>${resp[0].user.statuses_count}`)
+        $('#user-following').html(`<small>FOLLOWING</small><br>${resp[0].user.friends_count}`)
+        $('#user-follower').html(`<small>FOLLOWERS</small><br>${resp[0].user.followers_count}`)
+
+        resp.forEach(function(data) {
+          $('#tweet-home').append(
+            `
+            <div class=\"media\">
+              <div class=\"media-body\">
+                <h4 class=\"media-heading\">${data.user.name}</h4>
+                <p>${data.text}</p>
+                <ul class=\"nav nav-pills nav-pills-custom\">
+                  <li><small><i class=\"fab fa-twitter\"></i> ${data.user.screen_name}</small></li>
+                  <li><small><i class=\"fas fa-map-marker\"></i> ${data.user.location}</small></li>
+                </ul>
+              </div>
+            </div>
+          `
+          )
+        })
+      },
+      error: function(error) {
+        console.error(error)
+      }
+    })
+
+    $.ajax({
+      url: `http://localhost:3000/api/twatts/timelineuser`,
+      type: 'GET',
+      dataType: 'JSON',
+      success: function(resp) {
+        // console.log(resp);
+        resp.forEach(function(data) {
+          $('#tweet-user').append(`<li><small>#${data.text}</small></li>`)
+        })
+      },
+      error: function(error) {
+        console.error(error)
+      }
+    })
+
+    $('#submit').click(function() {
+      $.ajax({
+        type: "POST",
+        url: `http://localhost:3000/api/twatts/newpost`,
+        data: {
+          status: $('#status').val()
+        },
+        success: function(resp) {
+          $('#status').val('')
+          $('#tweet-home').prepend(
+            `
+            <div class=\"media\">
+              <div class=\"media-body\">
+                <h4 class=\"media-heading\">${resp.user.name}</h4>
+                <p>${resp.text}</p>
+                <ul class=\"nav nav-pills nav-pills-custom\">
+                  <li><small><i class=\"fab fa-twitter\"></i> ${resp.user.screen_name}</small></li>
+                  <li><small><i class=\"fas fa-map-marker\"></i> ${resp.user.location}</small></li>
+                </ul>
+              </div>
+            </div>
+          `
+          )
+          swal("Nice Post!", resp.text, "success", {
+            button: "Aww yiss!",
+          })
+        },
+      });
+    })
+
+    function search() {
+      let value = $('#find').val()
+
+      $.ajax({
+        type: "GET",
+        url: `http://localhost:3000/api/twatts/search?q=${value}`,
+        success: function(resp) {
+          // console.log(resp.statuses);
+          $('#search').val('')
+          resp.statuses.forEach(data => {
+            $('#tweet-home').prepend(
+              `
+              <div class=\"media\">
+                <div class=\"media-body\">
+                  <h4 class=\"media-heading\">${data.user.name}</h4>
+                  <p>${data.text}</p>
+                  <ul class=\"nav nav-pills nav-pills-custom\">
+                    <li><small><i class=\"fab fa-twitter\"></i> ${data.user.screen_name}</small></li>
+                    <li><small><i class=\"fas fa-map-marker\"></i> ${data.user.location}</small></li>
+                  </ul>
+                </div>
+              </div>
+            `
+            )
+          });
+          $('#tweet-home').prepend(
+            `
+              <div class=\"media\">
+                <div class=\"media-body\">
+                  <h4 class=\"media-heading\">Search: ${value}</h4>
+                </div>
+              </div>
+            `
+          )
+        },
+        error: function(error) {
+          console.error(error)
+        }
+      });
+    }
+  </script>
+</body>
+
+</html>
diff --git a/client/js/bootstrap.min.js b/client/js/bootstrap.min.js
diff --git a/client/js/jquery.min.js b/client/js/jquery.min.js
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,23 @@
+# twatt
+oauth twitter
+
+### Route List
+List of twatts in routes:
+
+|           Route           |  HTTP  |     Description      |
+| ------------------------- | ------ | -------------------- |
+| /api/twatts/profile       | GET    | Get profile user     |
+| /api/twatts/timelinehome  | GET    | Get home timeline    |
+| /api/twatts/timelineuser  | GET    | Get user timeline    |
+| /api/twatts/search        | GET    | Search a tweet       |
+| /api/twatts/newpost       | POST   | Post tweet status    |
+
+
+### Usage
+```
+yarn install
+yarn run dev
+```
+
+
+Access API `http://localhost:3000/api/twatts`