Week 3 - GiovanniDw/party-finder GitHub Wiki

Start Building your feature

Routes to implement

  • /login

  • /register

  • /logout

  • /onboarding

  • /profile

  • /profile/edit

  • /

  • /users/like/:id

  • /users/dislike/:id

  • /games

  • /games/search/

  • /games/add/:id

  • /games/remove/:id

Templates

Technical Research

Templating engines

  • CoffeeKup- Markup as CoffeeScript.
  • EJS- Embedded JavaScript templates
  • Haml-js- Haml ported to server-side Javascript. This is a traditional server-side templating language.
  • Haml.js- Faster / Express compliant Haml implementation
  • Jade- Robust, elegant, feature rich template engine for Node.js.
  • JQTpl- Port of jQuery's Template Engine to Node.js.
  • Mu2- A Mustache template engine for Node.js.
  • Swig- Swig is a template engine inspired by the Django syntax.
  • Templ8- JavaScript client/server template engine.
  • Whiskers- A mustachioed templating library.
(click to toggle) CoffeeKup EJS Haml-js Haml.js Jade JQTpl Mu2 Swig Templ8 Whiskers
Express Support
Browser Support
Available via npm
Variable Filters
Shorthand HTML Syntax
Extends / Block Template Inheritance
Escapes Output
Iteration
if/elseConditionals
else ifConditionals
Extendable Tags, Logic, and/or Filters
Partials / Includes

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.

Install

Easy to instal with NPM

$ npm install ejs

Features

  • Complies with the Express view system
  • Static caching of intermediate JavaScript
  • Unbuffered code for conditionals etc <% code %>
  • Escapes html by default with <%= code %>
  • Unescaped buffering with <%- code %>
  • Supports tag customization
  • Filter support for designer-friendly templates
  • Includes
  • Client-side support
  • Newline slurping with <% code -%> or <% -%> or <%= code -%> or <%- code -%>

Example:

<% if (user) { %>
    <h2><%= user.name %></h2>
<% } %>

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Install

$ npm install pug-cli -g

Syntax

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

npm Packages

Dependencies

  • expressjs - Fast, unopinionated, minimalist web framework for node.
    • express-session
    • multer - Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.
    • body-parser - Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
    • cookie-parser - Parse Cookie header and populate req.cookies with an object keyed by the cookie names.
  • ejs - Embedded JavaScript templates.
  • dotenv - Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
  • mongoose - Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.
  • passport - Passport is Express-compatible authentication middleware for Node.js.
    • passport-local - The local authentication strategy authenticates users using a username and password.
    • connect-flash - show any authentication error messages in our login form.
    • bcrypt - bcrypt is the hashing algorithm to protect stored credentials.
  • apicalypse - A simple client for creating Apicalypse queries.

devDependencies

  • nodemon - nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
  • node-sass - node-sass allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
  • ejs-lint - Linter/Syntax Checker for EJS Templates.

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

Connect to DB

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  // we're connected!
});

PassportJS is a Node package intended to be used with the ExpressJS web applications. It can be dropped into your application to add authentication support. Your application will instruct PassportJS to use one or more Strategies.

Strategies

A Strategy is like middleware for PassportJS that attempts to authenticate a user based on a request. How the Strategy authenticates a user is dependent on the Strategy implementation you decide to use.

Sign in using username and password

Use the passport-local package for the LocalStrategy. Users will simply authenticate using a username and password, and you'll configure the strategy on how to find the user in your database and then check the provided password is correct.


I will use apicalypse to show games the user can add to their profile. The user can also search for games.

Example:

const requestOptions = {
    queryMethod: 'url',
    method: 'post', // The default is `get`
    baseURL: 'https://myapi.com',
    headers: {
        'Accept': 'application/json'
    },
    responseType: 'json',
    timeout: 1000, // 1 second timeout
    auth: { // Basic auth
        username: 'janedoe',
        password: 's00pers3cret'
    }
};

const response = await apicalypse(requestOptions)
    .fields('name,movies,age')
    .limit(50)    
    .query('age > 50 & movies != n')
    // After setting the baseURL in the requestOptions,
    // you can just use an endpoint in the request
    .request('/actors'); 

console.log(response.data);
⚠️ **GitHub.com Fallback** ⚠️