Single-page app built with AngularJS, Express, Mongoose, and Node.js using the Yeoman Angular scaffolding.

Users can create an account in which they add tasks and delete them when completed. The tasks will self-destruct after 7 days if not completed.

Here's the [demo] (https://blocitoff-cvk.herokuapp.com/#/).

Configuring this project should be consistent across Mac (local) and Vagrant. You should already have Node.js and MongoDB installed before cloning.

Start by cloning the repository

$ git clone https://github.com/carmenvkrol/blocitoff.git

This app uses Grunt to run tasks. Install the Grunt Command Line Interface (grunt-cli) locally on your machine.

$ npm install -g grunt-cli

Once that's complete, install the remaining dependencies, except Bower, by running

$ npm install

Then install the package manager Bower by running:

$ bower install

Three tabs must be open in the terminal in order to run this application.

In the first tab, run

$ mongod

In the second tab, run

$ npm start

In the last tab, run

$ grunt serve

The application runs on port 1337 (configured in Gruntfile.js). To change the port, modify the number highlighted below

...
 connect: {
      options: {
        port: 1337, // change this value to the desired port number
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
...

blocitoff/
 |__.tmp/
 |__app/ #client-side development and server-side files
 |__bower_components/
 |__dist/ #client-side production files
 |__node_modules/
 |__test/
 Gruntfile.js
 index.js/ #core server-side file

Grunt looks for files using a defined pattern so that it knows what to compile and copy and where to put it. To edit the files that Grunt watches, look at the array of files in the watch task in Gruntfile.js. The default watched files are:

watch: {
  bower: {
    files: ['bower.json'],
    tasks: ['wiredep']
  },
  js: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.js', '!<%= yeoman.app %>/scripts/expresscontrollers/*.js', '!<%= yeoman.app %>/scripts/models/*.js', '!<%= yeoman.app %>/scripts/passport.js'],
    tasks: ['newer:jshint:all'],
    options: {
      livereload: true //'<%= connect.options.livereload %>'
    }
  },
  jsTest: {
    files: ['test/spec/{,*/}*.js'],
    tasks: ['newer:jshint:test', 'karma']
  },
  styles: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
    tasks: ['newer:less', 'autoprefixer']
  },
  gruntfile: {
    files: ['Gruntfile.js']
  },
  recess: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.less'],
    tasks: ['recess:dist']
  },

This app uses the CSS pre-processor LESS in order to facilitate styling with Bootstrap, which is included. LESS files can be found in the styles folder under the app directory. (See Directory Structure section above to locate these). In order for these files to be converted into CSS, and modify styling in the views, save LESS files within the styles folder.

The client-side files for user authentication, which are used in the [/] (https://github.com/carmenvkrol/blocitoff/blob/master/app/views/AuthView.html) view, are in the app directory within the public directory. The server-side functionality is also in the app directory within the expresscontrollers folder. (See Directory Structure section above to locate these).

The client-side functionality for tasks, which are used in the /tasks view, can be found in the app directory . The server-side functionality is also in the app directory within the expresscontrollers folder. (See Directory Structure section above to locate these).

A list of the plugins used by Grunt and what they're used for:

Grunt - installs grunt, which automates many JavaScript tasks

Grunt-Autoprefixer - parses CSS and adds vendor-prefixed CSS properties

Grunt-Concurrent - runs grunt tasks concurrently

Grunt-Contrib - collection of common grunt tasks

Grunt-Contrib-Clean - cleans files and folders

Grunt-Contrib-Concat - concatenates files for production mode

Grunt-Contrib-Connect - starts a static web server

Grunt-Contrib-Copy - copies files and folders for production mode

Grunt-Contrib-CSSmin - minifies CSS files for production

Grunt-Contrib-HTMLmin - minifies HTML files for production

Grunt-Contrib-Imagemin - minifies image files for production

Grunt-Contrib-JShint - detects potential errors and problems in the JavaScript code

Grunt-Contrib-Less - compiles LESS files into CSS. See LESS section below for more details about styles in this application.

Grunt-Contrib-Uglify - compresses and minifies JavaScript files

Grunt-Contrib-Watch - runs predefined tasks whenever watched files patterns are added, changed, or deleted

Grunt-Filerev - static asset revisioning through file content hash

Grunt-Google-CDN - replaces refs on the Google CDN

Grunt-Karma - for running Karma, a test runner for JavaScript.

Grunt-Newer - configures grunt tasks to run with newer files only

Grunt-Ngmin - pre-minifies Angular code

Grunt-Recess - lint and minify CSS and LESS using RECESS, which keeps style code clean and manageable

Grunt-SVGmin - minifies SVG files

Grunt-Usemin - replaces references to non-optimized scripts or stylesheets into a set of HTML files

Grunt-Wiredep - injects Bower packages into source code

Load-Grunt-Tasks - loads grunt tasks simulataneously instead of individually

Time-Grunt - displays elapsed execution time of grunt tasks

A list of other plugins used in this application and their purpose:

Express - web framework for Node.js

Express-Session - keeps track of users as they go through the app

Body-Parser - middleware that parses body data

Bower - package manager

Connect-Flash - stores messages during sessions. These messages are written to the flash and cleared after being displayed to the user.

Connect-Mongo - stores relevant user data from MongoDB during session

Cookie-Parser - parses cookie header and populates req.cookies with an object keyed by the cookie names

JSHint-Stylish - stylish reporter for JSHint

Karma - test runner for JavaScript

Karma-Jasmine - adapter for Jasmine testing framework to be used with Karma

Karma-PhantomJS-Launcher - launches JavaScript in PhantomJS, which is a headless WebKit scriptable with a JavaScript API

Mongoose - MongoDB object modeling for Node.js

Passport - authenticates users based on the credentials they provide

Passport-Local - username and password authentication

Passport-Local-Mongoose - Mongoose plugin the simplifies building username and password login with Passport

App built as part of the [Bloc] (http://www.bloc.io) Front-End Developer program.