Full Stack Web Development Bootcamp

September2017 - SkylabCoders Academy

by JuanMa Garrido

Full Stack Web Development Bootcamp

September2017

Teacher: JuanMa Garrido

Contents

git logo github logo sublime logo chrome logo

Web Development Bootcamp

Basic Tools

Sublime Text

Command Line

Markdown

Developer Tools

Markdow practice

Do the following exercises to practice the markdown syntax http://markdowntutorial.com/lesson/1/

Git

Setting up our Git environment

Colors in the git commands

  git config --global color.ui true

Only for Mac

Git

staging-area-file-status

Git

basic-remote-workflow
basic-remote-workflow
basic-remote-workflow

Git practice

Complete the following step-by-step exercise to practice the git commands and workflow https://try.github.io/levels/1/challenges/1

Git

GitHub

Find interesting projects on GitHub to clone and fork

Git practice

Create a folder called notes-bootcamp and inside of it create a file named README.md containing 3 interesting ideas you have learned today and then:

Git practice

Basic Tools cheatsheets

Git Cheat Sheet | GitHub
Emmet

More resources for this Unit

Free Books for this Unit

Javascript Logo

Web Development Bootcamp

Javascript

Javascript Basics

Javascript Functions

Javascript Objects

var mathy = function(x) {
    return function (y) {
        return function (z) {
            return (x / y) - z;
        }
    }
}

¿Cómo hariamos la operación (4 / 3) - 2 con este código en una linea?

var superGreeter = function(greeting) {
    return function(place) {
        return function(nickname) {
            return function(name) {
                return greeting + ', ' + name + '! Welcome to ' + place + ', ' + nickname + '.';
            }
        }
    }
};
­
superGreeter('Hey')('Berlin')('old pal')('Hans')
//'Hey, Hans! Welcome to Berlin, old pal.'
­
hiParisBuddyGreeter = superGreeter('Hi')('Paris')('buddy');
helloTokyoGreeter = superGreeter('Hello')('Tokyo');
­
hiParisBuddyGreeter('Franz')
//'Hi, Franz! Welcome to Paris, buddy.'
helloTokyoGreeter('friend')
//[Function]
helloTokyoGreeter('friend')('Yuki')
//'Hello, Yuki! Welcome to Tokyo, friend.'

Closures practice

Do the following exercises to practice closures http://nathansjslessons.appspot.com/lesson?id=1000

Working w/ Primitives vs Objects

Reference vs Value
>>> var data = {
  name: "juanma",
  location: "barcelona"
}
­
>>> var age = 35;
­
>>> function setData( oData, nAge ) {
  oData.location = "dublin";
  nAge = 40;
  return oData.location + " - " + nAge;
}
­
>>> setData(data, age)
"dublin - 40"
>> data
Object {name: "juanma", location: "dublin"}
>> age
35
>>> var number = 10;
>>> var newNumber = number;
>>> newNumber = newNumber + 1000;
>>> number
10
­
>>> var arrayNumbers = [1,2,3,4]
>>> var newArrayNumbers = arrayNumbers
>>> newArrayNumbers.push(10)
>>> arrayNumbers
[1, 2, 3, 4, 10]
­
>>> var book = { title: "1984", author: "Orwell" }
>>> var newBook = book
>>> newBook.title = "Old Man and the Sea"
>>> book.title
"Old Man and the Sea"
>>> var book = { title: "1984", author: "Orwell" }
>>> var newBook = book
>>> newBook.title = "Old Man and the Sea"
>>> book.title
"Old Man and the Sea"

Practice Javascript

Choose a partner and do the following exercises online (in pairs) to practice Javascript

var a; typeof a;
var s = '1s'; s++;
!!"false"
!!undefined
undefined == null
false == ""
false === ""
typeof "2E+2"
a = 3e+3; a++;

What will be the result of executing these lines in the console? Why?

var v = v || 10;
var v = 100;
var v = v || 10;
var v = 0;
var v = v || 10;
var v = null;
var v = v || 10;

What is the value of v after this?

var x = 'Hello World';
function foo(){
    var x;
    alert( x );
    x = 'New Value';
    alert( x );
}
foo();

What will return the alerts? Why?

function test() {
    foo();
    bar();
    var foo = function () {
        alert("this won't run!");
    }
    function bar() {
        alert("this will run!");
    }
}
test();

What will return the execution of test()? Why?

var a = 1;
function f() {
    var a = 2;
    function n() {
        alert(a);
    }
    n();
}
f();

What will show this code in the alert()? Why?

Javascript Challenge 1

Javascript Challenge 1** Extra

Javascript Challenge 2

Javascript Challenge 3

Javascript Challenge Functions

Javascript Arrays

Javascript Challenge Strings

Javascript Challenge Strings** Extra

Javascript Challenge Arrays

Javascript Challenge Math

Javascript Challenge Date

Functional programming workflow

Follow the steps on this repository to see the workflow of some functional programming code

Functional programming exercises

Do the exercises 1-27 to practice functional programming

Javascript Extra

Javascript The First Parts

Group yourself in pairs and solve the challenges proposed at: http://mosaic.academy/

TDD

Jasmine

Jasmine Advanced

Javascript Koan

Javascript Kata: Drink About

Javascript Kata: Grade Boook

Javascript Kata: Fizz Buzz

Javascript Kata: Rock Paper Scissors

Javascript Kata: Password Validation

KOAN Javascript-Jasmine

Do the following KOAN to practice javascript concepts

More resources for this Unit

Katas

HTML5 Logo

Web Development Bootcamp

HTML5

Clear Ideas

Semantic Web

Semantic Web

Semantic Markup challenge

Semantic Forms

Media

Layout Challenges

Form Challenges

HTML5 tags cheatsheets

HTML5 tags
HTML semantics
HTML semantics checklist

More resources for this Unit

CSS3 Logo

Web Development Bootcamp

CSS3

CSS3 Basics & Selectors

CSS3 Properties & Values

CSS3 Selectors

Choose a partner and do the following exercise online (in pairs) to practice Selectors: http://flukeout.github.io/

CSS3 Positioning

CSS3

See boxes w/ your own eyes

* {
   border: 1px solid red !important;
}

CSS3 MediaQuery & Flexbox

Flexbox


The main idea behind the flex layout is to give the container the ability to alter its items (width, height and order) to best fill the available space

A flex container expands items to fill available free space, or shrinks them to prevent overflow.

flexbox

Practice Flexbox

Choose a partner and do the following exercise online (in pairs) to practice Flexbox: http://flexboxfroggy.com/

CSS3 Effects & Animation

CSS3 cheatsheets

CSS Reference
CSS3 CheatSheet
CSS selectors & units
Positioning CheatSheet
Flexbox CheatSheet
CSS Layout

More resources for this Unit

HTML5 CSS3 fundamentals 7h

Recommended Sublime Packages

HTML5+CSS3 Challenges

CSS3 Challenges

bootstrap logo

Web Development Bootcamp

Bootstrap

Contents

Contents

Contents

To take into account

Practice Bootstrap

Choose a partner and do the following exercises online (in pairs) to practice Bootstrap: Responsive Design with Bootstrap

Bootstrap Site Exercise

Bootstrap Site Exercise

Extra Bootstrap Challenges *

Bootstrap Resources

Useful resources for working on responsive design & bootstrap projects

sass logo

Web Development Bootcamp

Sass

Sass

Contents

SASS Exercises

SASS NodeSchool Kata

Resources for this unit

jQuery Logo

Web Development Bootcamp

jQuery

The Browser Environment (BOM y DOM)

jQuery

jQuery

jQuery Practice

Group yourself in pairs an do the exercises suggested at Levels 1 & 2 in: http://try.jquery.com/

jQuery Practice FreeCodeCamp

Group yourself in pairs an do the following exercises:

jQuery Practice Events

Group yourself in pairs an do the exercises suggested at Levels 3 & 4 in: http://try.jquery.com/

jQuery Percentage Calculator

Do the following exercise: https://github.com/juanmaguitar/exercises-javascript/tree/master/19-percentage-calculator

KOAN jQuery

JSON & AJAX

Local Web Server

Challenge: jQuery JSON

Challenge: Spotify API

Challenge: Beers App

Challenge: Random User Cards

Challenge: Clock

Practice

HTTP Response Codes

More resources for this Unit

Public API's

What is an API? In English, please.

Public API's

es2015 Logo

Web Development Bootcamp

ES2015

ES2015 Overview

Arrow Functions

Arrow Functions

Arrow Functions

Four versions:

    (arg1, arg2, ...) => expr
    (arg1, arg2, ...) => { stmt1; stmt2; ... }
    singleArg => expr
    singleArg => { stmt1; stmt2; ... }

Arrow Functions

BEFORE (ES5)

var self = this;
this.element.addEventListener('click', function(event) {
  self.registerClick(event.target.id);
});

Arrow Functions

AFTER (ES2015)

this.element.addEventListener('click', event => {
  this.registerClick(event.target.id);
});

Arrow Functions

BEFORE (ES5)

[1,3,4,5,6,7].filter(function(n) { return n % 2 } )
  .map(function(n, i) { return n + i } );
// [1, 4, 7, 10]

Arrow Functions

AFTER (ES2015)

[1,2,3,4,5,6,7].filter(n => n % 2).map((n, i) => n+i);

ES6 Katas: Arrow Functions

Do the following katas to assure the understanding of arrow functions

Block Scope

Block Scope

Block Scope

BEFORE (ES5)

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
  // i from 0 to 2
}
i; // 3
{
  var TEMPERATURE = 32;
  TEMPERATURE = 16;
  TEMPERATURE // 16
}
TEMPERATURE; // 16

Block Scope

AFTER (ES2015)

var arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  // i from 0 to 2
}
i; // ReferenceError: i is not defined!
{
  const TEMPERATURE = 32;
  TEMPERATURE = 16;
  TEMPERATURE; // 32
}
TEMPERATURE; // ReferenceError: TEMPERATURE is not defined!

ES6 Katas: Block Scope

Do the following katas to assure the understanding of Block Scope

Template Strings

`string text`
­
`string text line 1
 string text line 2`
­
`string text ${expression} string text`

Template Strings

BEFORE (ES5)

var name = "juanma";
var getSuitableDrink = function(who) {
  return who === 'juanma' ? 'beer' : 'cocktail'
};
­
console.log( 'Hello, '+name+'!\nFancy a '+getSuitableDrink()+'?' );
­
// Hello, juanma!
// Fancy a beer?

Template Strings

AFTER (ES2015)

var name = "juanma";
var getSuitableDrink = function(who) {
  return who === 'juanma' ? 'beer' : 'cocktail'
};
­
console.log( `Hello, ${ name }!
  Fancy a ${ getSuitableDrink() }?` );

Template Strings

ES6 Katas: Template Strings

Do the following katas to assure the understanding of template strings

Enhanced Object Literals

Enhanced Object Literals

var a = "foo",
    b = 42,
    c = {};
­
function myMethod() {
    console.log('ooOoh!');
}
­
// Shorthand property names
var o = { a, b, c };
­
// Shorthand method name and dynamic property name
var o2 = {
  myMethod,
  ['myPropertyNum'+b]: 'bar'
}

Enhanced Object Literals

var messages = {
  get latest () {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1]
  },
  set current (str) {
    this.log[this.log.length] = str;
  },
  log: []
}
­
messages.current = "hey!";
messages.latest // hey!

ES6 Katas: Enhanced Object Literals

Do the following katas to assure the understanding of Enhanced Object Literals

Default parameters

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
­
f(3) === 15;
f(3, undefined) === 15;

ES6 Katas: Default parameters

Do the following katas to assure the understanding of Default parameters

Destructuring Assignment [1]

Destructuring Assignment

var [first, second, third, , fifth = 5] = [1, 2];
first // 1
second // 2
third // undefined
fifth // 5
­
[second, first] = [first, second] // swap values
first // 2
second // 1

Destructuring Assignment

var customer = {
  name: 'John',
  surname: 'Doe',
  dateOfBirth: {
    year: 1988
  }
};
­
var {name, surname, dateOfBirth: {year}, children} = customer;
name // 'John'
surname // 'Doe'
year // 1988
children // undefined

ES6 Katas: Destructuring Assignment

Do the following katas to assure the understanding of Destructuring Assignment

Rest operator

function multiply(multiplier, ...numbers) {
  return numbers.map(n => multiplier * n);
}
­
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

ES6 Katas: Rest operator

Do the following katas to assure the understanding of Rest operator

Spread operator

function f(x, y, z) {
  return x + y + z;
}
­
var arr = [1, 2, 3];
f(...arr) === 6; // true
­
[0, ...arr, 4, 5, 6, 7]; // [0, 1, 2, 3, 4, 5, 6, 7]

ES6 Katas: Spread operator

Do the following katas to assure the understanding of Spread operator

Set

var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
s.delete("hello");
s.has("hello") === false;

ES6 Katas: Set

Do the following katas to assure the understanding of Set

Map

Map

var m = new Map();
m.set("hello", 42);
m.get("hello") === 42;
­
var s = { n:4 };
m.set(s, 34);
m.get(s) === 34;

Map

var myMap = new Map();
­
var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};
­
// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");
­
myMap.size; // 3
­
// getting the values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"
­
myMap.get("a string");   // "value associated with 'a string'"
                         // because keyString === 'a string'
myMap.get({});           // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}

ES6 Katas: Map

Do the following katas to assure the understanding of Map

Clases

Classes

BEFORE

var Shape = function( id, x, y ) {
  this.id = id;
  this.x = x;
  this.y = y;
};
Shape.prototype.toString = function( x, y ) {
  return "Shape(" + this.id + ")"
};
­
var Rectangle = function( id, x, y, width, height ) {
  Shape.call( this, id, x, y );
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.toString = function() {
  return "Rectangle > " + Shape.prototype.toString.call( this );
};

Classes

AFTER

class Shape {
  constructor (id, x, y) {
    this.id = id;
    this.x = x;
    this.y = y;
    // or Object.assign(this, {id, x, y});
  }
  toString () {
    return `Shape(${this.id})`
  }
}
­
class Rectangle extends Shape {
  constructor (id, x, y, width, height) {
    super(id, x, y)
  }
  toString () {
    return "Rectangle > " + super.toString()
  }
}

Classes

ES6 Katas: Classes

Do the following katas to assure the understanding of Classes

Modules

Modules

// -------- jquery.js --------
export default function jQuery() {
  /* code */
}
­
// -------- code.js --------
import $ from 'jquery';
$('body').addClass('yay');

Modules

// --------- http.js --------
export function get(url) {
  /* code */
}
­
export function post(url, body) {
  /* code */
}
­
// -------- code.js --------
import { get, post } from 'http';
import { TIMEOUT as HTTP_TIMEOUT } from 'http';
import * as http from 'http';
­
get('/my/url').then(function(result) {
  /* code */
});
­
HTTP_TIMEOUT; // 1000;
http.post('/my/url', 'body');

ES6 Katas: Modules

Do the following katas to assure the understanding of Modules

Array

Array object extended with:

Array

Array.from(arguments) // [].slice.call(arguments);
Array.from({0: 'hello', 1: world, length: 2}); // ['hello', 'world']
Array.of(1, 2, 3) // [1, 2, 3]
­
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]
[1, 2, 3].fill(4) // [4, 4, 4]
[4, 5, 8, 12].find(isPrime) // 5
[4, 5, 8, 12].findIndex(isPrime) // 2
[4, 5, 8, 12].keys() // iterator from 0 to 3
[4, 5, 8, 12].values() // iterator from 4 to 12

ES6 Katas: Array

Do the following katas to assure the understanding of Array

String

String object extended with:

String

String.raw`Line 1\nLine 2\nLine 3` // 'Line 1\\nLine 2\\nLine 3'
'Hello world'.startsWith('Hello') // true
'Hello world'.endsWith('world') // true
'Hello world'.includes('orl') // true
'Hello world'.repeat(2) // 'Hello worldHello world'

ES6 Katas: String

Do the following katas to assure the understanding of String

Promise

Promise

var promise = new Promise(function(resolve, reject) {
  // Do something asynchronous and call resolve with the
  // result or reject with the error
});
­
promise.then(function(result) {
  // Use the result of the async call
}, function(error) {
  // Process the error
});

Promise

var allPromise = Promise.all([getLocation, getTemperature]);
allPromise.then(function([location, temperature]) {
  console.log('The location is ', location,
        'and the temperature is', temperature);
}, function(error) {
  // Process the error
});
­
var racePromise = Promise.race([getGoogleAds, getYahooAds, getBindAds]);
racePromise.then(function(ads) {
  page.addAds(ads);
});

ES6 Katas: Promise

Do the following katas to assure the understanding of Promise

Resources for this Unit

Starter projects

React Logo

Web Development Bootcamp

React

Contents

jsx
jsx

Contents

Contents

Contents

Contents

Contents

React Bootstrap Components

Create the project described at https://github.com/juanmaguitar/exercises-react/tree/master/01-bootstrap-layout-components following the suggested steps

TODO List

Create with REACT the project described at https://github.com/juanmaguitar/exercises-react/tree/master/02-todo-list

Movies App w/ Router

Create with REACT the project suggested at https://github.com/juanmaguitar/exercises-react/tree/master/03-movies

Resources

Node Logo

Web Development Bootcamp

Node.js

Contents

NPM

{
  "name": "my-super-project",
  "version": "1.0.0",
  "description": "This is the best project in town",
  "main": "index.js",
  "scripts": {
    "start": "node index"
  },
  "dependencies": {
    "grunt": "~0.4.5"
  },
  "devDependencies": {
    "grunt-available-tasks": "^0.5.6"
  },
  "keywords": [],
  "author": "JuanMa Garrido <JuanMa.Garrido@gmail.com>",
  "license": "ISC"
}

Contents

EventEmitters, Streams and Buffers

[Event Emitter]

Streams

Streams [1 2 3 4] [1]
Understanding Streams
Node Streams [1] [2] [3]

Node exercises

Do the exercises suggested at: https://github.com/juanmaguitar/js-server-exercises/tree/master/node-exercises

Contents

Postman

Postman

POST /users HTTP/1.1
Host: localhost:3000
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache
Postman-Token: 9b1e66e2-0e5d-ed60-1a5f-9d9d936e9f4e
­
username=juanma

Debugging w/ Node

Resources for this Unit

Node JS Tutorials for Beginners

Express Logo

Web Development Bootcamp

Express.js

First Steps

Contents

Middlewares

Application

Request

Response

Jade

Sessions & Cookies w/ Express

REST

REST is an architectural style that helps create and organize a distributed system. It describes the web as a distributed hypermedia application whose linked resources communicate by exchanging representations of resource state.

HTTP & REST

REST API Auth: Basic Auth

Header → Authorization: Basic {base64_encode(username:password)}
> echo "QWxhZGRpbjpPcGVuU2VzYW1l" | base64 --decode
Aladdin:OpenSesame
> echo -n "Aladdin:OpenSesame" | base64
QWxhZGRpbjpPcGVuU2VzYW1l
curl -D- \
  -X GET https://api.cooldata.net/api/1/things \
  -u Aladdin:OpenSesame \
  -H "Content-Type: application/json"
­
curl -D- \
  -X GET https://api.cooldata.net/api/1/things \
  -H "Authorization: Basic QWxhZGRpbjpPcGVuU2VzYW1l" \
  -H "Content-Type: application/json"
­
http -a username:password example.org
$.ajax({
    url: 'https://api.cooldata.net/api/1/things',
    method: 'GET',
    crossDomain: true,
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader(
          'Authorization',
          'Basic ' + Base64.encode( 'Aladdin:OpenSesame' )
        );
    },
    success: function( data, txtStatus, xhr ) {
        console.log( data );
        console.log( xhr.status );
    }
});

OAuth

OAuth is an open authorization standard used to provide secure client application access to server resources.

OAuth enables server owners to authorize access to the server resources without sharing credentials.

REST API Auth: OAuth

REST API Auth: Cookie

Contents

Authentication

Authentication

API Test

Simple Site w/ Express

Create the site w/ Express explained at: http://www.clock.co.uk/blog/a-simple-website-in-nodejs-with-express-jade-and-stylus

Simple Site w/ Express

Create the site w/ Express explained at: http://code.tutsplus.com/tutorials/introduction-to-express--net-33367

Todo APP

Create the site w/ Express explained at: https://github.com/juanmaguitar/node-exercises/tree/master/01-todo-app

Express NodeSchool Kata

More resources for this unit

Starter projects

Mongo Logo

Web Development Bootcamp

Mongo DB

MongoDB is an open-source document database that provides high performance, high availability, and automatic scaling.

Mongo concepts

A record in MongoDB is a document, which is a data structure composed of field and value pairs. MongoDB documents are similar to JSON objects. The values of fields may include other documents, arrays, and arrays of documents.

Mongo document

MongoDB stores BSON documents, i.e. data records, in collections; the collections in databases.

Mongo collection

Create a Database and a Collection

use myNewDB
db.myNewCollection1.insert( { x: 1 } )

Document example

var mydoc = {
   _id: ObjectId("5099803df3f4948bd2f98391"),
   name: { first: "Alan", last: "Turing" },
   birth: new Date('Jun 23, 1912'),
   death: new Date('Jun 07, 1954'),
   contribs: [ "Turing machine", "Turing test", "Turingery" ],
   views : NumberLong(1250000)
}

Documents

Thinking in documents

Installation and Use

  • Installation

Create or insert operations add new documents to a collection.

Mongo insert

Read operations retrieves documents from a collection; i.e. queries a collection for documents.

Mongo find

Update operations modify existing documents in a collection

Mongo update

Delete operations remove documents from a collection

Mongo remove

CRUD Operations

CRUD Operations

Mongo & Node

var MongoClient = require('mongodb').MongoClient;
­
// Connection URL
var url = 'mongodb://localhost:27017/myproject';
// Use connect method to connect to the Server
MongoClient.connect(url, function(err, db) {
  console.log("Connected correctly to server");
  db.close();
});

Mongo & Node

db.collection('restaurants')
  .find( )
  .forEach( (myDoc) => console.log (doc) );
db.collection('restaurants')
  .find( )
  .toArray( (err, docs) => console.log (docs) );
{
      "address" : {
         "street" : "2 Avenue",
         "zipcode" : "10075",
         "building" : "1480",
         "coord" : [ -73.9557413, 40.7720266 ]
      },
      "borough" : "Manhattan",
      "cuisine" : "Italian",
      "grades" : [
         {
            "date" : new Date("2014-10-01T00:00:00Z"),
            "grade" : "A",
            "score" : 11
         },
         {
            "date" : new Date("2014-01-16T00:00:00Z"),
            "grade" : "B",
            "score" : 17
         }
      ],
      "name" : "Vella",
      "restaurant_id" : "41704620"
   }

Queries

db.collection('restaurants')...
  .find( )
  .find( { "borough": "Manhattan" } )
  .find( { "address.zipcode": "10075" } )
  .find( { "grades.grade": "B" } )
  .find( { "grades.score": { $gt: 30 } } ) // greater than
  .find( { "grades.score": { $lt: 10 } } ) // greater than
  .find( { "cuisine": "Italian", "address.zipcode": "10075" }) // AND
  .find( { $or: [
    { "cuisine": "Italian" },
    { "address.zipcode": "10075" }
  ]}) // OR
  .find().sort( { "borough": 1, "address.zipcode": 1 } );
[...
{
   "_id" : 3,
   "name" : "ahn",
   "age" : 22,
   "type" : 2,
   "status" : "A",
   "favorites" : { "artist" : "Cassatt", "food" : "cake" },
   "finished" : [ 6 ],
   "badges" : [ "blue", "red" ],
   "points" : [ { "points" : 81, "bonus" : 8 }, { "points" : 55, "bonus" : 20 } ]
}
{
   "_id" : 6,
   "name" : "abc",
   "age" : 43,
   "type" : 1,
   "status" : "A",
   "favorites" : { "food" : "pizza", "artist" : "Picasso" },
   "finished" : [ 18, 12 ],
   "badges" : [ "black", "blue" ],
   "points" : [ { "points" : 78, "bonus" : 8 }, { "points" : 57, "bonus" : 7 } ]
}
...]

Projections

db.collection('users')...
  .find( { status: "A" } )
  .find( { status: "A" }, { name: 1, status: 1 } )
  .find( { status: "A" }, { name: 1, status: 1, _id: 0 } )
  .find( { status: "A" }, { favorites: 0, points: 0 } ) // all but excluded
  .find(
     { status: "A" },
     { name: 1, status: 1, "favorites.food": 1 }
  ) // Specific Fields in Embedded Documents

Mongo & Node

Mongo NodeSchool Kata

API w/ Mongo Exercises

Do the followig exercises: https://github.com/juanmaguitar/node-exercises/tree/master/03-mongo-exercises

Data Modeling

Data Modeling

Data Modeling

Aggregation

Mongoose is an object modeling package for Node that essentially works like an ORM

Mongoose

Cheatsheets & Quick Guides

More resources for this Unit

Mongo Express TO-DO App

  • Improve your to-do app by persiting data in a mongoDB
MEAN stack scheme
MEAN stack scheme
mySql vs MongoDB

MEAN Stack

Projects Logo

Web Development Bootcamp

Frontend Projects

scrum workflow

API's authentication

S.O.L.I.D.

General Resources