1Ring2Find LOTR Search

Cover Image for 1Ring2Find LOTR Search
Languages used
  • JavaScript
  • HTML
  • CSS
Tools used
  • Express.js
  • Node.js
  • The One API
  • Bootstrap
View Live DemoGithub Repository

An app that pulls information on the Lord of the Rings series. The Random LOTR Movie Quote NPM Package generates a random quote and The One API provides data on the movies, books, and characters.


The goal of this project was to create a website using Express.js that fetches information from a Node Package and from a Web API.

  • Step 1: Marathon all Lord of the Rings movies.
  • Step 2: Find data source (API and Node package)
  • Step 3: Use EJS for page templating in Express.js.
  • Step 4: Write fetch requests, add images, create layout with Bootstrap.

In the snippet below, I create a /quote endpoint for fetching a random quote from an existing npm package. Then I render a quote view using the response data and corresponding character image.

// https://www.npmjs.com/package/random-lotr-movie-quote
import randomQuote from 'random-lotr-movie-quote';

// Random Quote
app.get('/quote', async (req, res) => {
  let quote = randomQuote();
  let image = 'images/ring.jpg'
  // If quoted character is in the list of char pictures, add picture
  if (charSet.has(quote.char.toLowerCase())) {
    image = `../images/char/${quote.char.toLowerCase()}-small.jpg`;
  res.render('quote', {
    'dialog': quote.dialog,
    'char': quote.char,
    'movie': quote.movie,
    'image': image

Here is the quote.ejs view file being rendered, which uses externally defined partial views header, footer, and nav.

<%- include('partials/header.ejs') %>
<%- include('partials/nav.ejs', { active: 'Random Quote'}) %> 
   <div class="container text-center">
    <h1>Random Quote</h1>
      <h5>A random quote from Lord of the Rings.</h3>
      <img src="<%= image %>" class="img-thumbnail">
      <figure class="text-center">
        <blockquote class="blockquote">
          <p><%= dialog %></p>
        <figcaption class="blockquote-footer">
          <%= char %> in <cite title="Source Title"><%= movie %></cite>
<%- include('partials/footer.ejs') %>

This web app is currently deployed on Heroku here.