Pre-requisites & Tech Stack Used to Build Our Poll App

Before we dive into building the Poll App, let’s make sure your system and knowledge are ready. This module will also introduce the tools and technologies we’ll be using so you understand the “why” behind each choice.

Lesson 1: Basic Requirements

To follow along with this build, ensure you have the following:

1. Node.js and npm

   • Install Node.js (v16 or newer).
   • npm (Node Package Manager) comes bundled with Node.js.
   • Node powers the local development server, while npm installs project dependencies like React, React DOM, and Vite.

2. Code Editor

   • Use Visual Studio Code.
   • It comes with an integrated terminal, React extensions, and smart suggestions (IntelliSense) that make coding easier.

3. Web Browser

   • Use a modern browser like Chrome, Edge, or Firefox to run and test your app.
   • Developer tools (right-click → Inspect) will help you debug UI and console issues.

4. Git (Optional)

   • If you want to back up your code or share it online, install Git.
   • Not mandatory for following this build, but recommended for deployment and version control.

5. Basic Knowledge

   • HTML, CSS, and modern JavaScript (ES6 features like arrow functions, map, and destructuring).
   • Core React concepts: JSX and useState. We’ll also introduce useEffect as we go along.

Lesson 2: Tech Stack Used

Here’s the stack powering our Poll App:

• React with Vite: React is the library we’re using to build the user interface. Vite sets up our project. It’s faster than Create React App, has instant Hot Module Reload (HMR), and creates optimized builds.

• JavaScript (ES6+): We’ll use modern JS features for clean and readable code — especially for rendering polls dynamically and updating state.

• HTML & CSS:

  • JSX (JavaScript XML) will define our UI structure.
  • App.css will hold custom styling for polls, voting buttons, and results.
  • index.css will define global styles.

• Node.js + npm: Required to run the Vite dev server and install dependencies.

• Local State Management (React Hooks): Instead of external APIs, our app will use React hooks (useState, useEffect) to store poll questions, voting counts, and results.

• Netlify (Deployment): At the end, we’ll deploy the Poll App to Netlify for free hosting and a shareable live link.

Lesson 3: Input

Our Poll App takes direct user interaction as input:

• Poll Question & Options: The app displays a poll with multiple choices. Users can click on any option to cast a vote.

• Vote Handling: When a user clicks an option, React updates the vote count in state.
  Example: If the poll has options “React” and “Vue”, clicking on “React” increments its vote count instantly.

• Controlled State: Each vote is tied to state, so the UI always reflects the latest results.

Lesson 4: Output

The app dynamically displays poll results in real time:

1. Poll List: Users see the list of polls (e.g., “Which frontend framework do you prefer?” with multiple options).

2. Vote Counts: As soon as an option is clicked, the vote count updates instantly without refreshing the page.

3. Visual Feedback: Results are shown clearly — either as numbers (e.g., “React: 10 votes”) or styled bars to represent percentages.

4. Error Handling (Optional): If no polls are available, the app displays a friendly message like “No polls available”.

Thanks to React’s re-rendering, results are updated immediately, giving users a smooth, interactive experience.