How to Build a Movie Recommendation App Using Node.js

JavaScript
Written by Rick Bowen (JavaScript)

As a budding developer, I’m excited to share my experience of building a movie recommendation app using Node.js. This project has been a significant milestone in my learning journey, and while I know there’s still much to explore, I’m proud of the progress I’ve made.

This will walk you through the purpose of my app, the features it offers, the technologies I used, and what I learned along the way. I’ll also share insights into what makes this app functional and the steps I took to build it.

Write the Node.js Code (server.js)

The following code uses the express framework to serve the static files (index.html, styles.css, and script.js).

codeconst express = require('express');
const path = require('path');
const app = express();

// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));

// Route for the homepage
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Save the Frontend Files

  • Create a folder called public in the same directory as server.js.
  • Inside the public folder, save the following files:

HTML (public/index.html)

code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Modal Window</title>
</head>
<body>
    <button class="show-modal" data-modal="1">Show modal 1</button>
    <button class="show-modal" data-modal="2">Show modal 2</button>
    <button class="show-modal" data-modal="3">Show modal 3</button>

    <!-- Modals -->
    <div class="modal hidden" id="modal-1">
        <button class="close-modal">&times;</button>
        <h1>I'm modal window 1 😊</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="modal hidden" id="modal-2">
        <button class="close-modal">&times;</button>
        <h1>I'm modal window 2 😊</h1>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
    <div class="modal hidden" id="modal-3">
        <button class="close-modal">&times;</button>
        <h1>I'm modal window 3 😊</h1>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    </div>

    <!-- Overlay -->
    <div class="overlay hidden"></div>

    <script src="script.js"></script>
</body>
</html>

CSS (public/styles.css)

codebody {
    font-family: Arial, sans-serif;
    background: #ff69b4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

button {
    border: none;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 25px;
    background-color: white;
    cursor: pointer;
    font-size: 16px;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
    z-index: 1000;
}

.hidden {
    display: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

JavaScript (public/script.js)

codeconst showModalButtons = document.querySelectorAll('.show-modal');
const modals = document.querySelectorAll('.modal');
const overlay = document.querySelector('.overlay');
const closeModalButtons = document.querySelectorAll('.close-modal');

// Function to open a modal
const openModal = (modalId) => {
    const modal = document.querySelector(`#modal-${modalId}`);
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
};

// Function to close all modals
const closeModal = () => {
    modals.forEach(modal => modal.classList.add('hidden'));
    overlay.classList.add('hidden');
};

// Attach event listeners to "Show Modal" buttons
showModalButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modalId = button.dataset.modal;
        openModal(modalId);
    });
});

// Attach event listeners to "Close" buttons
closeModalButtons.forEach(button => {
    button.addEventListener('click', closeModal);
});

// Close modal when clicking on overlay
overlay.addEventListener('click', closeModal);

// Close modal with ESC key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !overlay.classList.contains('hidden')) {
        closeModal();
    }
});

Run the Server

Install the required dependencies:

    codenpm install express

    Start the server:

    node server.js

    Open your browser and go to:

      http://localhost:3000

      Result

      When you visit the app in your browser, you’ll see the three buttons (Show modal 1, Show modal 2, Show modal 3). Clicking each button will open the respective modal, and you can close the modal by:

      • Clicking the close button (×).
      • Clicking on the overlay (the darkened background).
      • Pressing the “Escape” key.

      This approach combines frontend interactivity with a backend server using Node.js to deliver the files dynamically.

      Related blog posts

      Load more
      Know More About FSIBLOG
      Useful Pages

      2024 © FSIBLOG. All Rights Reserved.