First commit

Jordan-McMillan · Dec 5, 2016 · 716290d · 716290d
commit 716290d
Show file tree

Hide file tree

Showing 10 changed files with 2,096 additions and 0 deletions.
diff --git a/.env_sample b/.env_sample
@@ -0,0 +1,2 @@
+IMGUR_CLIENT_ID=x
+PORT=3000
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.idea
+node_modules
+.env
diff --git a/README.md b/README.md
@@ -0,0 +1,41 @@
+# Vue.js Essentials: Build Your First Vue App
+
+### Vue.js Poster Store
+
+#### Pre-installation
+
+1. Ensure that npm is installed globally
+2. Register Oauth 2 access to the [Imgur API](https://api.imgur.com/oauth2/addclient).
+
+    Register for OAuth 2 authorization without a callback URL. You can name your application anything you like and you don't need a callback URL. The important thing is that you get a *client ID*. 
+
+#### Installation
+
+1. Clone this repository on your local file system
+
+    ```
+    cd /path/to/install/location
+    git clone [email protected]:getjsdojo/vuejs-poster-shop.git
+    ```
+
+2. Install dependencies
+
+    ```
+    npm install
+    ```
+
+3. Create a `.env` file by copying the sample
+
+    ```
+    cp .env_sample .env
+    ```
+    
+    Now edit the .env file and replace the `IMGUR_CLIENT_ID` with the client ID provided in the pre-installation
+    
+4. Start project
+
+    ```
+    npm run start
+    ```
+
+5. Your site will be available at *localhost:[PORT]* where `PORT` is whatever value is set in your `.env` file.
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Vue.js Poster Shop</title>
+    <link rel="icon" href="public/favicon.ico" type="image/x-icon">
+
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
+
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="public/style.css">
+</head>
+<body>
+<div id="app">
+    <div class="header">
+        <h1>Vue.js Poster Store</h1>
+    </div>
+    <div class="main">
+        <div class="products">
+            <p>Products go here.</p>
+        </div>
+        <div class="cart">
+            <h2>Shopping Cart</h2>
+            <div>
+                No items in the cart.
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Scripts -->
+<script src="/reload/reload.js"></script>
+<script type="text/javascript" src="public/script.js"></script>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,42 @@
+var express = require('express');
+var app = express();
+var path = require('path');
+var server = require('http').createServer(app);
+var reload = require('reload');
+var axios = require('axios');
+var querystring = require('querystring');
+
+require('dotenv').config();
+
+var bodyParser = require('body-parser');
+app.use( bodyParser.json() );
+
+app.get('/', function(req, res) {
+  res.sendFile(path.join(__dirname + '/index.html'));
+});
+
+var instance = axios.create({
+  baseURL: 'https://api.imgur.com/3/',
+  headers: { 'Authorization': 'Client-ID ' + process.env.IMGUR_CLIENT_ID }
+});
+
+app.get('/search/:query', function(req, res) {
+  const url = 'gallery/search/top/0/?' + querystring.stringify({ q: req.params.query });
+  instance.get(url)
+    .then(function (result) {
+      res.send(result.data.data.filter(item => !item.is_album && !item.nsfw && !item.animated));
+    })
+    .catch(function (error) {
+      console.log(error);
+    })
+  ;
+});
+
+app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));
+app.use('/public', express.static(path.join(__dirname, 'public')));
+
+reload(server, app);
+
+server.listen(process.env.PORT, function () {
+  console.log('Listening on port '.concat(process.env.PORT))
+});