Week Six - MEAN Stack I

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.

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.

The Comp

You can download the view that you are to complete here. 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.

Note: There are pagination elements ([Prev] [1][2][3] [Next]) at the bottom of the comp that shows the list of blog posts. You do not need to worry about building these elements. We'll cover those in lecture if time permits (but that will likely be covered next week).

The spec

As a product owner, I need a functional prototype of the application. The final prototype must be visible in a desktop browser.

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.

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.

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.

Requirements

1. Semantically correct HTML is required as this will be the model for prod app integration
2. Think in terms of 'components'; if all parts of the UI were lego blocks, who would you code that?
3. Images are to be cropped correctly and compression is to take performance into account
4. All CSS measurements should use elastic units unless a pixel specific unit is required for both mobile and desktop
5. JavaScript code is expected to be written cleanly and maintainably using the best practices covered during lectures
6. After checking out the repository, I must be able to run npm install and gulp serve in order to access the application locally
7. gulp serve does not need to start the mongo database; you can assume that an instance of mongo is already running.
8. Write up a description for every plugin used (no limit, but you must justify them)
9. 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)
2. All interactions must be clearly functional
3. 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.