Build an Online Polling System Using NextJS

An Online Polling System allows users to create, vote, and track poll results efficiently. we'll build a simple polling app using NextJS, managing poll data with localStorage for persistent voting, and providing real-time vote updates. We'll also implement a clean UI with Bootstrap for an enhanced user experience.

Output Preview

Prerequisites

• Next.js
• NodeJS
• Bootstrap

Approach

• Set up a new Nextjs project with create-next-app.
• Install necessary libraries (e.g., Bootstrap for styling).
• Create Navbar component for navigation.
• Create a page createpoll which have form to input poll questions and add the options.
• Create a page addpoll which will display question and poll options with voting percentages.
• We will save poll data in local storage.
• We will use Bootstrap to style components for a user-friendly interface.

Steps to Build an online polling system using Next.js

Step 1: Initialized the Nextjs app and installing the required packages

npx create-next-app@latest polling-system

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No 
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: Install the necessary package for your project using the following command.

npm i bootstrap

Project Structure:

Updated Dependencies:

"dependencies": {
 "bootstrap": "^5.3.3",
 "next": "14.2.5",
 "react": "^18",
 "react-dom": "^18"
 }

Example: Create the required files and write the following code.

Start your application using the following command.

npm run dev

Output: