Skip to content
Andy edited this page Mar 2, 2020 · 3 revisions

Job Story

Wanneer ik thuis op zoek ben naar een potentiële match, wil ik kunnen zoeken op favoriete games, zodat ik een passende match kan vinden.

Jobstory description

Wireframes

Frame 1

Wireframes

Frame 2

Wireframes

Frame 3

Wireframes

Frame 4

Wireframes

Frame 5

Wireframes

Frame 6

Wireframes

Frame 7

Wireframes

Frame 8

Wireframes

Error-state 'Game not found'

Error-state game not found

Engine template

For this weeks assignment I started by looking at different template engines. After the first week I was already checking some of them, because I had the static site done very quickly. I checked the engines that were described in the weekly assignments. These were PUG, Handlebars and EJS. The research I did was a bit short. This was because I decided to do some superficial research and just start working in the engine I choose. I tend to spend too much time reaserching and then getting stuck on the actual work. I choose EJS in the end because it's the engine I've seen been used the most online and at CMDA. I found Pug a bit hard to follow. The same with handlebars.

At first, handlebars looks very easy to use. Way easier than Pug or EJS. This tempted me at first to use this engine. But it was the installation that threw me off. Instead of using the engine in the server.js, you just link it in the HTML file. So I decided to skip this one. HANDLEBARS EXPRESSIONS HANDLEBARS EXPRESSIONS

Everything about Pug threw me off, so this was a rather quick decision. EJS is visually way more cluttered than Pug or Handlebars, but it also makes it easier to understand what elements you're using and what you're doing. So the choice for EJS was made. Pug USE

Dynamic site

So, after deciding to use EJS, I started coding away. This was an easy step to make, since the site I made already was using express.static(). The server.js needed some small changes, that are shown here:

const ejs = require('ejs');

// EJS TEMPLATE SERVER
app.set('view engine', 'ejs');
app.use(express.static('src'));

// INDEX PAGE
app.get('/', function(req, res) {
    // res.render('pages/index.ejs', games);
    res.render('pages/index.ejs', games);
})
// ABOUT PAGE
app.get('/about', function(req, res) {
    res.render('pages/about.ejs');
})

This is the structure of the project. I made the standard partials that are used with templates. Pug USE

Clone this wiki locally