Svelte & JavaScript - Polls Application

A dynamic and interactive polling application built with Svelte & JavaScript. This project allows users to create, view, vote on, and delete polls, with all changes reflected in real-time on the user interface.

Table of Contents

• About the Project
• Technologies Used
• Key Features
• Project GIF Demo <-- GIF video

About the Project

This application was developed as a hands-on project to demonstrate the power and simplicity of Svelte for building reactive user interfaces. The core of the app is centered around a robust state management system using Svelte Stores, which ensures that data is shared seamlessly and efficiently across all components.

The app provides a complete CRUD (Create, Read, Update, Delete) experience for polls. All poll data is persisted in the browser's Local Storage, allowing users to close their browser and return to their polls later. Reactive statements ($:) are used to automatically calculate derived data, such as total votes and percentages, ensuring the UI is always up-to-date with the latest state.

Technologies Used

This project leverages the classic Svelte ecosystem to create a fast, lightweight, and component-driven application.

• Svelte: A radical approach to building user interfaces. Used as the core compiler to create reactive, component-based UIs with minimal boilerplate.
• Svelte Stores (writable): Svelte's built-in solution for state management. Writable stores are used to manage the global list of polls, allowing any component to react to changes in the data.
• JavaScript: The core programming language used to build the application's logic. Svelte itself compiles components into highly efficient, imperative JavaScript code.
• Node.js: A JavaScript runtime environment that executes JavaScript code outside a web browser. It provides the foundation for the entire development workflow, from running the local development server to bundling the application for production.
• npm (Node Package Manager): The default package manager for Node.js. Used to install, manage, and update all the project's development dependencies, such as Svelte and Rollup.
• CSS: The language for styling the application. This project uses pure, component-scoped CSS to ensure that styles do not leak and affect other parts of the UI.

Key Features

• Create Polls: Users can add new polls with a question and two answer options.
• Interactive Voting: A simple click on an option registers a vote, and the UI updates instantly.
• Real-time Results: Vote counts and percentages are calculated reactively and displayed for each poll.
• Persistent State: Polls are automatically saved to Local Storage, so your data is not lost on page refresh.
• Delete Polls: Easily remove polls you no longer need.
• Component-Based Architecture: The application is broken down into logical, reusable components (PollList, PollDetails, CreatePollForm, etc.) for clean and maintainable code.
• Smooth Animations: Subtle fade and scale transitions are used to enhance the user experience when adding or removing polls.

Project GIF Demo

Here is a quick demonstration of the application's core features in action.

Note: If you do not see the animation, reload the page and return here immediately.