Introduction to Our Poll App

React is a JavaScript library for creating user interfaces, and it is especially powerful when building apps where the UI needs to update based on user interaction. Instead of working directly with the DOM, React lets us describe our UI as components — small, reusable building blocks. These components work together, making apps easier to maintain, extend, and style.

In this project, we will build a Poll App with React and Vite. This app allows users to create new polls, add options, vote on them, and manage existing polls. The polls and their votes are stored in the browser’s localStorage, so the data remains available even after refreshing the page. Along the way, you will learn about state management, controlled components, event handling, and data persistence in React.

This build-along project is designed to give you a practical introduction to React fundamentals, while also letting you deploy a fully working application that people can interact with online.

1) What is the Poll App and its purpose?

A Poll App is an interactive tool where users can create questions, provide options, and let others vote. In our project, users will be able to:

• Create a poll with a custom question and multiple answer options.
• Vote for their preferred option.
• See votes displayed as numbers and percentages with progress bars.
• Reset votes for a single poll or for all polls.
• Delete specific polls or clear all polls at once.

The purpose of this app is twofold:

1. To demonstrate how React handles stateful, interactive UIs (where changes by the user immediately update what is displayed).
2. To introduce the idea of persisting data in localStorage, so that polls don’t disappear after a page refresh.

You’ll also learn the concept of controlled components in React, where form inputs are directly tied to React state. This means the app always knows the current values of user input.

2) Aim of the Project

By completing this project, you will gain hands-on experience in:

• Setting up a React app using Vite, which gives a fast development environment.
• Creating reusable components like PollList and NewPollForm.
• Managing state with React’s useState hook to keep track of polls and votes.
• Persisting data with localStorage so information stays available across sessions.
• Handling user input through forms and linking them to React state.
• Implementing UI updates such as vote counts and progress bars.
• Styling the app with CSS to create a responsive, modern design.
• Deploying the app online so others can use it.

The final outcome will be a polished Poll App that allows interactive voting and management, complete with a styled layout and persistent storage.

3) Project Workflow

Here’s the step-by-step workflow we’ll follow in this module and throughout the build:

1. Set up the environment using Vite and create the base React project.
2. Build the main structure of the app with a parent App component.
3. Create the form component (NewPollForm) to let users add new polls.
4. Display polls using the PollList component, with buttons to vote, reset, and delete.
5. Manage state with React hooks (useState, useEffect) to handle polls and persist them.
6. Add localStorage support so polls and votes are saved across sessions.
7. Style the app with CSS for a modern card-based layout and responsive design.
8. Test the functionality — create, vote, reset, and delete polls.
9. Deploy the app online using a free hosting service.

By following these steps, you’ll understand not just how the Poll App works but also the bigger picture of building, structuring, and deploying a complete React application from scratch.