MEAN Stack I - Lyle, Hollis (final)

.gitignore

@@ -19,9 +19,12 @@ coverage
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
+# Compiled files
+public/js/main.js
+public/css/main.css
+public/views
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+.node-version

gulp/config.js

@@ -0,0 +1,18 @@
+var dest = "./public";
+var src = "./src";
+
+module.exports = {
+  javascript: {
+    entryPoint: src + "/app/entry.js",
+    src: src + "/app/**/*.js",
+    dest: dest + "/js/"
+  },
+  sass: {
+    src: src + "/sass/**/*.scss",
+    dest: dest + "/css/"
+  },
+  html: {
+    src: src + "/app/**/*.html",
+    dest: dest + "/views/",
+  },
+};

gulp/tasks/csslint.js

@@ -0,0 +1,9 @@
+var gulp = require("gulp");
+var config = require("../config").sass;
+var csslint = require("gulp-csslint");
+
+gulp.task("csslint", function () {
+  return gulp.src(config.dest + "**/*.css")
+    .pipe(csslint())
+    .pipe(csslint.reporter());
+});

gulp/tasks/default.js

@@ -0,0 +1,3 @@
+var gulp = require("gulp");
+
+gulp.task("default", ["sass", "html", "webpack", "watch", "jshint", "serve"]);

gulp/tasks/html.js

@@ -0,0 +1,7 @@
+var gulp = require("gulp");
+var config = require('../config').html;
+
+gulp.task('html', function() {
+  return gulp.src(config.src)
+  .pipe(gulp.dest(config.dest));
+});

gulp/tasks/jshint.js

@@ -0,0 +1,10 @@
+var gulp = require("gulp");
+var config = require("../config").javascript;
+var jshint = require("gulp-jshint");
+var stylish = require("jshint-stylish");
+
+gulp.task("jshint", function () {
+  return gulp.src(config.src)
+    .pipe(jshint())
+    .pipe(jshint.reporter(stylish));
+});

gulp/tasks/sass.js

@@ -0,0 +1,14 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var handleErrors = require('../util/handleErrors');
+var config = require('../config').sass;
+
+gulp.task('sass', function () {
+  return gulp.src(config.src)
+    .pipe(sourcemaps.init())
+    .pipe(sass())
+    .on('error', handleErrors)
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(config.dest));
+});

gulp/tasks/serve.js

@@ -0,0 +1,7 @@
+var gulp = require("gulp");
+var server = require("gulp-express");
+
+gulp.task("serve", function () {
+  server.run(["server.js"]);
+  gulp.watch(["server.js"], [server.run]);
+});

gulp/tasks/watch.js

@@ -0,0 +1,8 @@
+var gulp = require("gulp");
+var config = require("../config");
+
+gulp.task('watch', function() {
+  gulp.watch(config.html.src, ["html"]);
+  gulp.watch(config.javascript.src, ["webpack", "jshint"]);
+  gulp.watch(config.sass.src, ["sass"]);
+});

gulp/tasks/webpack.js

@@ -0,0 +1,13 @@
+var gulp = require("gulp");
+var config = require("../config").javascript;
+var webpack = require("webpack-stream");
+
+gulp.task("webpack", function (callback) {
+  return gulp.src(config.entryPoint)
+    .pipe(webpack({
+      output: {
+        filename: "main.js",
+      }
+    }))
+    .pipe(gulp.dest(config.dest));
+});

gulp/util/handleErrors.js

@@ -0,0 +1,15 @@
+var notify = require("gulp-notify");
+
+module.exports = function () {
+
+  var args = Array.prototype.slice.call(arguments);
+
+  // Send error to notification center with gulp-notify
+  notify.onError({
+    title: "Compile Error",
+    message: "<%= error %>"
+  }).apply(this, args);
+
+  // Keep gulp from hanging on this task
+  this.emit("end");
+};

gulpfile.js

@@ -0,0 +1,17 @@
+/*
+  gulpfile.js
+  ===========
+  Rather than manage one giant configuration file responsible
+  for creating multiple tasks, each task has been broken out into
+  its own file in gulp/tasks. Any files in that directory get
+  automatically required below.
+
+  To add a new task, simply add a new task file that directory.
+  gulp/tasks/default.js specifies the default set of tasks to run
+  when you run `gulp`.
+*/
+
+var requireDir = require('require-dir');
+
+// Require all tasks in gulp/tasks, including subfolders
+requireDir('./gulp/tasks', { recurse: true });

models/blog.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var mongoose = require("mongoose");
+
+var BlogSchema = new mongoose.Schema({
+  title: String,
+  content: String,
+  author: String,
+  date: String,
+});
+
+module.exports = mongoose.model("Blog", BlogSchema);

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "mean-stack-1",
+  "version": "1.0.0",
+  "description": "Intelly - a simple MEAN stack blog app",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hollislau/mean-stack-1.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/hollislau/mean-stack-1/issues"
+  },
+  "homepage": "https://github.com/hollislau/mean-stack-1",
+  "dependencies": {
+    "angular": "1.4.x",
+    "angular-route": "^1.4.7",
+    "body-parser": "^1.14.1",
+    "express": "^4.13.3",
+    "gulp": "^3.9.0",
+    "gulp-csslint": "^0.2.0",
+    "gulp-express": "^0.3.5",
+    "gulp-jshint": "^1.11.2",
+    "gulp-notify": "^2.2.0",
+    "gulp-sass": "^2.0.4",
+    "gulp-sourcemaps": "^1.6.0",
+    "jshint-stylish": "^2.0.1",
+    "mongoose": "^4.1.10",
+    "require-dir": "^0.3.0",
+    "webpack-stream": "^2.1.1"
+  },
+  "engines": {
+    "node": "0.12.x"
+  }
+}

readme.md

@@ -1,44 +1,27 @@
-# Week Six - MEAN Stack I
+# Intelly Blog
 
-Last week we focussed on JavaScript basics. This week we're going to build up a function web application. You'll be expected to build on knowledge you've already learned (semantic HTML, Sass instead of CSS, in addition to all of the Angular work we'll be doing) and produce a "production-ready" blog for your assignment this week.
+A responsive, single-page blog app was reconstructed from a provided design comp using JavaScript, HTML5, Sass, and MEAN stack components. This simple app supports basic CRUD functionality and allows a user to read, post, edit, and delete blog entries.
 
-We want this assignment to feel like a 'week on the job.' And by that we mean, we will provide a completed comp and an expected outcome specification. It is up to you to deliver on this project specification.
+![Intelly Header](/images/intelly_header.png "Intelly Header")
 
-## The Comp
+![Intelly Blog List](/images/intelly_blog_list.png "Intelly Blog List")
 
-You can download the view that you are to complete [here](https://github.com/SEA-Design-Dev/mean-stack-1/tree/master/comps). It is provided as a Photoshop format, if you do not have access to Photoshop, other applications like Pixelmator are able to open these layered files as well.
+![Intelly Footer](/images/intelly_footer.png "Intelly Footer")
 
+![Intelly Blog Detail](/images/intelly_blog.png "Intelly Blog Detail")
 
-## The spec
+![Intelly Blog Form](/images/intelly_blog_form.png "Intelly Blog Form")
 
-As a product owner, I need a functional prototype of the application. The final prototype must be visible in a desktop browser. 
+## Instructions To Use The App:
 
-Prototype is to use best practices in coding HTML/CSS as there is the potential that some or all of the code will made it into production. 
+*You must have Node.js, npm, and MongoDB installed locally.*
 
-Aside from images as content, all visual assets should be produced via CSS or typography. The only background image asset allowed will be the main page header. 
+In the terminal:
 
-The user should be able to create, read, update, and delete blog posts from the application. There should be at least two different views - one a list of available blog posts, the other a detail view of the blog post. You do not need to worry about authentication or user management for this assignment.
+1. Clone this repository
+2. Navigate to the root directory of the cloned repository
+3. Run `npm install`
+4. Start MongoDB
+5. Run either `gulp` or `node server`
 
-### Requirements 
-
-1. Semantically correct HTML is required as this will be the model for prod app integration
-1. Think in terms of '*components*'; if all parts of the UI were lego blocks, who would you code that?
-1. Images are to be cropped correctly and compression is to take performance into account
-1. All CSS measurements should use elastic units unless a pixel specific unit is required for both mobile and desktop
-1. JavaScript code is expected to be written cleanly and maintainably using the best practices covered during lectures
-1. After checking out the repository, I must be able to run `npm install` and `gulp serve` in order to access the application locally
-1. Write up a description for every plugin used (no limit, but you must justify them)
-  1. jQuery is not allowed. Angular's built-in DOM manipulation can manage most of what you'd need jQuery for.
-
-### Constraints 
-
-1. Must work in all major browsers of latest versions;
-	* Desktop (IE Edge, Safari, Chrome and Firefox)
-1. All interactions must be clearly functional
-1. All code must pass HTML Tidy, CSS Lint, and JSHint.
-
-__DO NOT__ fence yourself in with invisible constraints. Unless it is specifically listed and/or we discussed it in lecture, there is not an expectation to meet an objective that has not been set. 
-
-## The expectation 
-
-In this assignment, you should be able to demonstrate mastery over the basics of Angular as well as creating a simple CRUD application. We're looking for you to build on best practices that you've already learned (proper HTML and CSS) as well as incorporate the new practices discussed during the course of the week.
+Open a web browser and view the app at **http://localhost:5000**.

server.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var express = require("express");
+var mongoose = require("mongoose");
+var bodyParser = require("body-parser");
+var app = express();
+var router = express.Router();
+var Blog = require("./models/blog");
+
+mongoose.connect("mongodb://localhost/intelly");
+
+app.set("port", (process.env.PORT || 5000));
+app.use(bodyParser.json());
+
+router.get("/", function (req, res) {
+  res.sendFile(__dirname + "/public/views/index.html");
+});
+
+app.use(express.static(__dirname + "/public"));
+app.use("/", router);
+
+// CREATE
+
+var blogsRoute = router.route("/api/blogs");
+
+blogsRoute.post(function (req, res) {
+  var blog = new Blog();
+
+  blog.title = req.body.title;
+  blog.content = req.body.content;
+  blog.author = req.body.author;
+  blog.date = req.body.date;
+
+  blog.save(function (err) {
+    if (err) {
+      res.send(err);
+    }
+
+    res.json(blog);
+  });
+});
+
+// READ
+
+blogsRoute.get(function (req, res) {
+  Blog.find(function (err, blogs) {
+    if (err) {
+      res.send(err);
+    }
+
+    res.json(blogs);
+  });
+});
+
+var blogRoute = router.route("/api/blogs/:blog_id");
+
+blogRoute.get(function (req, res) {
+  Blog.findById(req.params.blog_id, function (err, blog) {
+    if (err) {
+      res.send(err);
+    }
+
+    res.json(blog);
+  });
+});
+
+// UPDATE
+
+blogRoute.put(function (req, res) {
+  Blog.findById(req.params.blog_id, function (err, blog) {
+    if (err) {
+      res.send(blog);
+    }
+
+    blog.title = req.body.title;
+    blog.content = req.body.content;
+    blog.author = req.body.author;
+    blog.date = req.body.date;
+
+    blog.save(function (err) {
+      if (err) {
+        res.send(err);
+      }
+
+      res.json(blog);
+    });
+  });
+});
+
+// DELETE
+
+blogRoute.delete(function (req, res) {
+  Blog.findByIdAndRemove(req.params.blog_id, function(err) {
+    if (err) {
+      res.send(err);
+    }
+
+    res.json({ message: "Successfully removed blog." });
+  });
+});
+
+app.listen(app.get("port"), function() {
+  console.log("Express server is running on port", app.get("port"));
+});