Build a Node.js Interactive Web-Based Simple Online Poll App

Written by

javascriptdebugged

in

In the digital age, gathering opinions and feedback is crucial. From understanding customer preferences to gauging public sentiment, online polls offer a quick and effective way to collect valuable data. This tutorial will guide you through building a simple, interactive online poll application using Node.js, Express, and a touch of HTML, CSS, and JavaScript. This project is ideal for beginners and intermediate developers looking to expand their skills in web development and backend programming. By the end, you’ll have a functional poll app that you can customize and deploy.

Why Build a Poll App?

Creating a poll app isn’t just a fun exercise; it provides practical experience with several key web development concepts:

  • Backend Development: You’ll learn how to handle server-side logic, manage routes, and interact with data.
  • Frontend Interaction: You’ll implement interactive elements, such as displaying poll questions, handling user input, and updating results dynamically.
  • Database Interaction (Optional): While this tutorial focuses on a simple, in-memory approach, you can easily extend it to use a database for persistent data storage.
  • Understanding of HTTP Requests: You’ll learn how to handle GET and POST requests, essential for any web application.

This project is also a great way to understand how user interactions can drive data collection and presentation, which is a fundamental aspect of modern web applications.

Prerequisites

Before you start, make sure you have the following installed on your system:

  • Node.js and npm (Node Package Manager): You can download these from the official Node.js website.
  • A Text Editor or IDE: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these languages will make the process smoother.

Setting Up the Project

Let’s begin by setting up the project directory and installing the necessary dependencies.

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project.
mkdir node-poll-app
cd node-poll-app
  1. Initialize npm: Initialize a new npm project in your directory. This will create a package.json file to manage your project’s dependencies. 
npm init -y
  1. Install Dependencies: Install the required packages. We’ll be using Express for our server and a templating engine (e.g., EJS, Pug, or Handlebars) to render HTML dynamically. For simplicity, we’ll use EJS. 
npm install express ejs

Building the Backend with Node.js and Express

Now, let’s create the core of our application, the backend server. Create a file named app.js (or server.js) in your project directory. This file will contain the server logic.

Here’s the basic structure:

// app.js
const express = require('express');
const app = express();
const port = 3000; // You can change this

// Middleware (to parse request bodies)
app.use(express.urlencoded({ extended: true }));

// Set the view engine to EJS
app.set('view engine', 'ejs');

// Define routes (we'll add these later)
app.get('/', (req, res) => {
  res.render('index', { /* data to pass to the view */ });
});

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

Let’s break down this code:

  • Import Express: We import the Express module to create our server.
  • Create an Express App: We initialize an Express application using express().
  • Define the Port: We set the port number the server will listen on.
  • Middleware: express.urlencoded({ extended: true }) is middleware that parses URL-encoded request bodies. This is essential for handling form submissions.
  • Set View Engine: app.set('view engine', 'ejs') sets EJS as our templating engine.
  • Define Routes: We define a route for the root URL (/). This route will handle requests to the home page.
  • Start the Server: We start the server and listen for incoming requests on the specified port.

Creating the Frontend with HTML, CSS, and JavaScript

Now, let’s create the views (HTML files) that our server will render. Create a directory named views in your project directory. Inside the views directory, create a file named index.ejs. This will be the main page of your poll app.

Here’s the basic structure for index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Poll App</title>
  <style>
    /* Add your CSS styles here */
    body {
      font-family: sans-serif;
    }
    .poll-container {
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .poll-question {
      font-size: 1.2em;
      margin-bottom: 10px;
    }
    .poll-options {
      margin-bottom: 15px;
    }
    .poll-options label {
      display: block;
      margin-bottom: 5px;
    }
    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="poll-container">
    <h2>Poll Question</h2>
    <p class="poll-question">What is your favorite color?</p>
    <form action="/vote" method="POST">
      <div class="poll-options">
        <label><input type="radio" name="answer" value="red"> Red</label>
        <label><input type="radio" name="answer" value="blue"> Blue</label>
        <label><input type="radio" name="answer" value="green"> Green</label>
      </div>
      <button type="submit">Vote</button>
    </form>
    <!-- Results will be displayed here -->
  </div>
</body>
</html>

Key points about the HTML:

  • Basic Structure: The HTML provides the structure of the poll.
  • CSS Styling: Basic CSS is included within the <style> tags for visual appeal. You can customize this as needed.
  • Poll Question and Options: This section displays the poll question and options. You’ll dynamically populate these with the actual poll data later.
  • Form: The form allows users to submit their vote. The action="/vote" attribute specifies where the form data will be sent (we’ll create this route later), and method="POST" indicates that the data will be sent via a POST request.
  • Radio Buttons: Radio buttons allow users to select a single answer. Each radio button has a name="answer", which is the name of the form field, and a value attribute that corresponds to the answer.
  • Submit Button: The submit button allows users to submit their vote.

Let’s enhance the backend to serve this HTML and handle votes. Update your app.js file to include the following:

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// Sample poll data (in-memory)
let pollData = {
  question: "What is your favorite color?",
  options: {
    red: 0,
    blue: 0,
    green: 0
  }
};

app.get('/', (req, res) => {
  res.render('index', { pollData: pollData });
});

app.post('/vote', (req, res) => {
  const answer = req.body.answer;
  if (pollData.options.hasOwnProperty(answer)) {
    pollData.options[answer]++;
  }
  res.redirect('/'); // Redirect back to the poll page
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

In this updated code:

  • Sample Poll Data: We’ve added a pollData object to store the poll question and the vote counts for each option. This is a simple in-memory approach; in a real-world scenario, you’d likely use a database.
  • Passing Data to the View: In the app.get('/') route, we pass the pollData to the index.ejs file.
  • Handling Votes (/vote route): We added a POST route at /vote to handle the form submission. This route receives the selected answer from the request body, increments the corresponding vote count in pollData, and redirects the user back to the poll page (/).

Now, let’s modify index.ejs to dynamically display the poll question, options, and results:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Poll App</title>
  <style>
    body {
      font-family: sans-serif;
    }
    .poll-container {
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .poll-question {
      font-size: 1.2em;
      margin-bottom: 10px;
    }
    .poll-options {
      margin-bottom: 15px;
    }
    .poll-options label {
      display: block;
      margin-bottom: 5px;
    }
    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    .results {
      margin-top: 20px;
    }
    .result-item {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="poll-container">
    <h2>Poll Question</h2>
    <p class="poll-question"><%= pollData.question %></p>
    <form action="/vote" method="POST">
      <div class="poll-options">
        <% Object.keys(pollData.options).forEach(option => { %>
          <label>
            <input type="radio" name="answer" value="<%= option %>"> <%= option.charAt(0).toUpperCase() + option.slice(1) %>
          </label>
        <% }); %>
      </div>
      <button type="submit">Vote</button>
    </form>
    <div class="results">
      <h3>Results</h3>
      <% Object.keys(pollData.options).forEach(option => { %>
        <div class="result-item">
          <%= option.charAt(0).toUpperCase() + option.slice(1) %>: <%= pollData.options[option] %>
        </div>
      <% }); %>
    </div>
  </div>
</body>
</html>

Key changes in index.ejs:

  • Dynamic Content: We use EJS template syntax (<%= ... %>) to insert the poll question and options.
  • Looping Through Options: We use an EJS loop (<% Object.keys(pollData.options).forEach(option => { %> ... <% }); %>) to generate the radio buttons dynamically based on the options in pollData.
  • Displaying Results: We use another EJS loop to display the results after the user votes.

Running the Application

To run your application, open your terminal, navigate to your project directory (node-poll-app), and execute the following command:

node app.js

This will start the server. Open your web browser and go to http://localhost:3000. You should see your poll app, ready to receive votes!

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Dependencies: Ensure you have installed all the necessary dependencies (Express and EJS). Double-check your package.json file to confirm the correct versions. If you encounter an error related to missing modules, run npm install in your project directory.
  • Route Errors: Make sure your routes are defined correctly in app.js and that the paths in your HTML forms (e.g., action="/vote") match the defined routes. Use console.log() statements within your route handlers to check if they’re being executed.
  • Template Engine Errors: When using EJS, ensure you are using the correct syntax (<%= ... %> for output, <% ... %> for logic). Also, make sure your template files (e.g., index.ejs) are in the correct directory (views).
  • Form Data Not Being Received: If you’re not receiving form data in your /vote route, ensure you’ve included the middleware app.use(express.urlencoded({ extended: true })) in your app.js file. This middleware parses the request body.
  • Server Not Starting: If your server isn’t starting, check for any syntax errors in your app.js file. Also, verify that the port you’ve specified (e.g., 3000) is not already in use by another application. You can change the port number in your code.

Enhancements and Next Steps

This is a basic poll app. You can extend it in many ways:

  • Add More Polls: Implement a way to create and manage multiple polls.
  • Database Integration: Store poll data in a database (e.g., MongoDB, PostgreSQL, or MySQL) to persist the data. This would involve installing a database driver (e.g., mongoose for MongoDB) and modifying your routes to interact with the database.
  • User Authentication: Add user accounts to allow users to create and manage their own polls.
  • More Advanced UI: Improve the user interface with CSS frameworks (e.g., Bootstrap, Tailwind CSS) or by writing more custom CSS. You could also use JavaScript to add features like real-time updates of poll results.
  • Error Handling: Implement more robust error handling and validation.
  • Input Validation: Add client-side and server-side validation to ensure users enter valid data.
  • Deployment: Deploy your app to a hosting platform like Heroku, Netlify, or AWS.

Key Takeaways

This tutorial has provided a practical introduction to building a simple, interactive online poll application using Node.js, Express, and EJS. You’ve learned how to set up a Node.js project, create server-side routes, handle form submissions, and dynamically render HTML content. You’ve also gained hands-on experience with fundamental web development concepts, such as backend development, frontend interaction, and understanding HTTP requests. Furthermore, you’ve seen how to use a templating engine to make your application more dynamic. By building this app, you’ve taken a significant step toward becoming a proficient web developer. The principles and practices you’ve learned here can be applied to a wide range of web projects.

More posts