{"id":22436468,"url":"https://github.com/victoriayotka/poll","last_synced_at":"2025-03-27T08:42:49.708Z","repository":{"id":262794330,"uuid":"885391634","full_name":"VictoriaYotka/poll","owner":"VictoriaYotka","description":"simple polling application with Phoenix LiveView","archived":false,"fork":false,"pushed_at":"2024-12-15T09:30:47.000Z","size":312,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T13:41:42.054Z","etag":null,"topics":["chartjs","elixir","phoenix","phoenix-liveview","phx-hook","rwd"],"latest_commit_sha":null,"homepage":"https://poll-divine-violet-5969.fly.dev/","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VictoriaYotka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-08T13:52:32.000Z","updated_at":"2024-12-15T09:30:51.000Z","dependencies_parsed_at":"2024-12-05T13:29:20.433Z","dependency_job_id":"93b2c508-a8ae-4a3b-9e98-7031ee05e525","html_url":"https://github.com/VictoriaYotka/poll","commit_stats":null,"previous_names":["victoriayotka/poll"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictoriaYotka%2Fpoll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictoriaYotka%2Fpoll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictoriaYotka%2Fpoll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VictoriaYotka%2Fpoll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VictoriaYotka","download_url":"https://codeload.github.com/VictoriaYotka/poll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245813169,"owners_count":20676763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","elixir","phoenix","phoenix-liveview","phx-hook","rwd"],"created_at":"2024-12-06T00:07:28.798Z","updated_at":"2025-03-27T08:42:49.689Z","avatar_url":"https://github.com/VictoriaYotka.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elixir LiveView Poll Application\n\n## Overview\n\nThis is a simple polling application built with **Phoenix LiveView**. It allows users to create polls, vote on them, and see real-time updates on poll results. The app is mobile-friendly (designed with a mobile-first approach) and uses **Tailwind CSS** for styling and **Chart.js** for dynamic chart visualizations of poll results. \n\nThe solution includes a Dockerized PostgreSQL database for persistent storage of users, polls, and votes, and all functionality runs locally with `mix phx.server`.\n\n## Deployment\n\nThe application is deployed on [Fly.io](https://poll-divine-violet-5969.fly.dev/).  \nVisit the deployed page here:  \n👉 **[Fly.io](https://poll-divine-violet-5969.fly.dev/)**\n\n## Features\n\n- **User Registration**: Users can register by entering a username.\n- **Create Polls**: Registered users can create new polls.\n- **Vote in Polls**: Users can vote in any existing poll and see instant, real-time results.\n- **One Vote per Poll**: Each user can only vote once in each poll.\n- **Real-Time Updates**: LiveView provides real-time poll result updates without refreshing the page.\n- **Mobile-First, Responsive Design**: The UI adapts for both mobile and desktop, using Tailwind CSS.\n- **Data Visualization with Chart.js**: Poll results are visualized with responsive charts.\n- **JS Hooks**: JavaScript hooks are used for finer client-side interactivity.\n- **Phoenix PubSub for Broadcasts**: PubSub ensures that vote updates are broadcasted in real-time to all connected clients.\n- **Infinite Scroll**: The polling results and polls are dynamically loaded with infinite scroll. As the user scrolls, new poll items are fetched automatically, improving the user experience without page reloads.\n\n\n## Prerequisites\n\n- **Docker \u0026 Docker Compose**: Ensure Docker is installed to run the database container.\n- **Elixir and Phoenix**: The app was developed using Elixir and the Phoenix framework.\n\n## Setup Instructions\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/VictoriaYotka/poll.git\ncd poll\n```\n\n### 2. Database Setup with Docker\n\nThis project includes a docker-compose.yml file to simplify database setup.\n\nStart the Database:\n\n```bash\ndocker-compose up -d\n```\n\nRun Database Migrations and Seed Data:\n\n```bash\n    mix ecto.setup\n```\n\n### 3. Install Dependencies\n\nInstall Elixir and JavaScript dependencies:\n\n```bash\nmix deps.get\ncd assets \u0026\u0026 npm install\n```\n\n### 4. Run the Server\n\nStart the Phoenix server (from the root directory):\n\n```bash\nmix phx.server\n```\n\nThe application will be available at [http://localhost:4000](http://localhost:4000).\n\n## Application Usage\n\n1. **Register** by entering a username on the home page.\n2. **Create Polls** by navigating to the \"New Poll\" page.\n3. **Vote in Polls** by selecting an option in any poll.\n4. **View Real-Time Results** which are updated instantly using LiveView and Phoenix PubSub.\n5. **View Poll Results in Charts** rendered by Chart.js.\n\n## Key Design and Implementation Details\n\n### JavaScript Hooks\n- **Real-Time Chart Updates**: JS hooks work with LiveView to trigger Chart.js updates dynamically as poll results change.\n- **Custom Interactivity**: JavaScript hooks enhance interactivity, adding custom client-side behavior for animations and chart updates.\n\n### Responsive Design (Mobile-First)\n- **Tailwind CSS**: A mobile-first approach with Tailwind CSS ensures that the app is responsive and adapts well to different screen sizes.\n\n### Chart.js Integration\n- **Poll Result Visualization**: Chart.js visualizes poll results in dynamic, real-time bar charts, enhancing the user experience and making data interpretation easy.\n\n### Phoenix PubSub for Real-Time Updates\n- **Broadcasting Poll Updates**: Phoenix PubSub is used to broadcast new votes in real-time. When a user submits a vote, a message is sent to all connected clients, updating poll results instantly.\n- **Seamless Client Syncing**: Using PubSub with LiveView means clients see live updates as votes are cast, without requiring full-page reloads.\n\n### Dockerization\n- **Persistent Database Setup**: The PostgreSQL database runs in a Docker container, isolated from your local environment for ease of use.\n- **Automated Database Initialization**: `docker-compose` along with `mix ecto` commands handle migrations and seed data setup, streamlining project setup.\n\n## Project Structure\n\n- **Phoenix Contexts** organize the code for polls, users, and votes into manageable, modular components.\n- **Ecto Schemas** handle data persistence for users, polls, and votes with validations to enforce business rules.\n- **JS Hooks and LiveView Components** manage real-time updates and user interactions, optimizing the front-end experience.\n\n## Testing\n\nCore functionality, such as poll creation, voting, and result display, is covered by unit tests. To run tests:\n\n```bash\nmix test\n```\n\n## Design Decisions \u0026 Trade-Offs\n\n- **LiveView Over Traditional SPA**: LiveView was chosen for real-time updates without requiring a full SPA framework like React or Vue. This reduces complexity and keeps the application server-rendered.\n- **Chart.js for Visualization**: Chart.js was used for simplicity and responsive chart rendering, although other libraries could offer more customization.\n- **Single Vote Limit**: The application limits each user to a single vote per poll. This was enforced at the database level for consistency.\n- **Sorting and Filtering with Ecto**: Sorting and filtering are implemented using efficient **Ecto queries**, ensuring that the database does the heavy lifting and reduces the memory footprint on the server side. This makes fetching polls and results faster, even as the data grows.\n- **Shared Layout for All Pages**: The application uses a shared layout to ensure a consistent user interface across all pages. This layout includes common elements like header, minimizing redundancy and making it easier to maintain the application as it grows.\n\n\n## Dependencies\n\nThe project uses the following dependencies:\n\n- **Elixir**: \"~\u003e 1.16.0\"\n- **Phoenix**: \"~\u003e 1.7.12\"\n- **Phoenix Live View**: \"~\u003e 0.20.2\"\n- **Chart.js**: \"^4.4.6\" for rendering dynamic poll result charts\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictoriayotka%2Fpoll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictoriayotka%2Fpoll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictoriayotka%2Fpoll/lists"}