This doesnt work

I followed chalkers directions, I even copied the code from the project files into visual code, and it hangs when trying to load cards. please help:

Here's my App.js:

const express = require('express'); const bodyParser = require('body-parser'); const cookieParser = require('cookie-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false})); app.use(cookieParser());

app.set('view engine', 'pug');

const mainRoutes = require('./routes'); const cardRoutes = require('./routes/cards');

app.use(mainRoutes); app.use('/cards', cardRoutes);

app.use((req, res, next) => { const err = new Error('Not Found'); err.status = 404; next(err); });

app.use((err, req, res, next) => { res.locals.error = err; res.status(err.status); res.render('error'); });

app.listen(3000, () => { console.log('The application is running on localhost:3000!') });

and Cards.js:

const express = require('express'); const router = express.Router(); const { data } = require('../data/flashcardData.json'); const { cards } = data;

router.get( '/', ( req, res ) => { const numberOfCards = cards.length; const flashcardId = Math.floor( Math.random() * numberOfCards ); res.redirect( /cards/${flashcardId}?side=question ) });

router.get('/:id', (req, res) => { const { side } = req.query; const { id } = req.params; const text = cards[id][side]; const { hint } = cards[id];

const templateData = { id, text };

if ( side === 'question' ) {
  templateData.hint = hint;
  templateData.sideToShow = 'answer';
  templateData.sideToShowDisplay = 'Answer';
} else if ( side === 'answer' ) {
  templateData.sideToShow = 'question';
  templateData.sideToShowDisplay = 'Question';
}

res.render('card', templateData);

});

module.exports = router;

and Index.JS:

const express = require('express'); const router = express.Router();

router.get('/', (req, res) => { const name = req.cookies.username; if (name) { res.render('index', { name }); } else { res.redirect('/hello'); } });

router.get('/hello', (req, res) => { const name = req.cookies.username; if (name) { res.redirect('/'); } else { res.render('hello'); } });

router.post('/hello', (req, res) => { res.cookie('username', req.body.username); res.redirect('/'); });

router.post('/goodbye', (req, res) => { res.clearCookie('username'); res.redirect('/hello'); });

module.exports = router;

Here's my PUG Card:

extends layout.pug

block content section#content h2= text if hint p i Hint: #{hint} a(href=${id}?side=${sideToShow})= sideToShowDisplay

and before you ask, Yes the data file is in the correct place, and everything else was copied exactly.