{"id":20058853,"url":"https://github.com/ably-labs/realtime-voting-angular","last_synced_at":"2025-07-10T18:40:14.159Z","repository":{"id":38467372,"uuid":"120600338","full_name":"ably-labs/realtime-voting-angular","owner":"ably-labs","description":"Realtime voting app template Ably, Chart.js, Angular 10","archived":false,"fork":false,"pushed_at":"2023-04-20T13:00:44.000Z","size":765,"stargazers_count":13,"open_issues_count":9,"forks_count":12,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-17T15:32:37.256Z","etag":null,"topics":["ably","angular","chartjs","realtime","voting"],"latest_commit_sha":null,"homepage":"https://ably-voting-app.herokuapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ably-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-07T10:28:45.000Z","updated_at":"2023-10-26T19:37:09.000Z","dependencies_parsed_at":"2022-08-19T09:12:29.330Z","dependency_job_id":null,"html_url":"https://github.com/ably-labs/realtime-voting-angular","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Frealtime-voting-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Frealtime-voting-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Frealtime-voting-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Frealtime-voting-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ably-labs","download_url":"https://codeload.github.com/ably-labs/realtime-voting-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224452840,"owners_count":17313668,"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":["ably","angular","chartjs","realtime","voting"],"created_at":"2024-11-13T13:04:36.770Z","updated_at":"2024-11-13T13:04:37.302Z","avatar_url":"https://github.com/ably-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Realtime Voting Application in Angular\n\nThis repository contains a complete realtime voting application. Check out the source code, customise it and make it your own!\n\nThe realtime messaging leverages [Ably's realtime infrastructure](https://www.ably.io/documentation/realtime/) and also uses [Ably's History API](https://www.ably.io/documentation/realtime/history) to manage votes' history across multiple connected clients.\n\nCheck out the [functional demo](https://ably-voting-app.herokuapp.com) to try out the realtime voting app yourself.\n\n\u003cimg width=\"1426\" alt=\"Screenshot 2020-11-10 at 17 22 50\" src=\"https://user-images.githubusercontent.com/5900152/98709930-eaf77400-237a-11eb-9d4e-395e1b3c3628.png\"\u003e\n\n\n## Tech stack\n\n### Framework/Languages\n\n- [Angular](https://angular.io)\n- [Node.js](https://nodejs.org)\n\n### Libraries\n\n- [Ably Realtime](https://ably.io)\n- [Express](https://expressjs.com)\n- [ChartJS](https://chartjs.org)\n\n## How to run this project locally\n\n1. Clone this repository\n\n```shell\n  git clone https://github.com/Srushtika/realtime-voting.git\n```\n\n2. Change directory to project directory\n\n```shell\n  cd realtime-voting\n```\n\n3. Install dependencies\n\n```shell\n   npm i\n```\n\n4. Create a free account with [Ably Realtime](https://ably.io) to get your Ably API KEY. \n   Replace the placeholder with your API Key in your `environment.prod.ts` and `environment.ts`.\n\n5. Run the application:\n   1. Run `ng serve` to run using angular server or\n   2. Run `node server.js` to run using a custom nodejs server.\n\nOpen option `i` on [localhost:4200](http://localhost:4200) and option `ii` on [localhost://9000](http://localhost:9000)\n\n_Voila! your application is up and running!_\n\n\u003e Notice the `Ably connection status` at the top right corner? That shows if the application is connected successfully to Ably. Make sure it's green as per below:\n\n### Connection Color Code\n\n- **Yellow** - connecting\n- **Red** - disconnected (Ably could not connect or connected but lost connectivity) or failed (never connected)\n- **Green** - successfully connection\n\n---\n\n## Folder structure\n\n```\n  realtime-voting\n      |_src\n        |_assets\n        |_environments\n        |  |_environment.prod.ts\n        |  |_environment.ts\n        |_app\n          |_app.component.ts\n          |_app.module.ts\n          |_app.component.html\n          |_ ballot\n          |   |_ballot.component.ts\n          |   |_ballot.component.html\n          |_ util\n          |  |_ably.ts\n          |_ vote-chart\n            |_vote-chart.component.ts\n            |_vote-chart.component.html\n```\n\n### Understanding what's in which file\n\n#### Environment\n\n**`environment.ts` \u0026\u0026 `environment.prod.ts`**\nThis file stores environment variables. You'll have to add your `ABLY_API_KEY` in both files. Update the `.prod` file when you're ready to deploy to production.\n\n#### App component\n\n**`app.*.ts`**: This is the main entry point for your application. In the `app.module.ts` file, you load all application components i.e. the voting component and the ballot component. External libraries like `angular-material` also load its module importation in this file.\n\n**`app.component.ts`**: This is where we initialize the application. In this project, we initialize the `connection state` of Ably here in the `ngOnInit` function.\n\n**`app.component.html`**: This is the application's `HTML` semantics root file. As you get familiar with the project, you'll notice every other component's `.html` gets called in this file.\n\n#### **The ballot folder (component)**: \n\nThis is the ballot component that handles all the voting events i.e. the click events on `yes`, `no` or `maybe`. The ballot component also takes care of publishing votes to an [Ably channel](https://www.ably.io/documentation/core-features/channels) that later appears in the voting chart component.\n\n**`ballot.component.ts`**: You can consider this the ballot's component controller file. This component handles the interactive button clicks leading to publishing of the votes to an Ably channel.\n\n**`ballot.component.html`**: This is the presentation layer of the ballot component. The HTML semantics and connecting controller events get handled here.\n\n#### **The vote-chart folder (component)**: \n\nThe `vote-chart` component handles the graphical representation of the on-going votes. The `vote-chart` component also subscribes to the Ably channel publishing the votes, as mentioned in ballot component above.\n\n**`vote-chart.component.ts`**: Generally, most Angular developers consider the `*.component.ts` as the 'Controller' file (if you're thinking from an MVC - model view controller point of view) and the `*.component.html` as the 'View' file. The `vote-chart.component.ts` file handles subscribing to the voting channel and continuously listen for when there's a new vote and adjust the graph accordingly.\n\n**`vote-chart.component.html`**: This the presentation layer of the chart component. You can read up on [Chart.js](http://chartjs.org) to understand the graph implementation in this file.\n\n#### Finally, `ably.ts` in the **util** folder: \nThe `util` folder holds the `ably.ts` file which contains essential assets. The `ably.ts` file contains some Ably abstraction to ease the implementation across other components.\n\n---\n\n## Load tests and limits\n\n- All of Ably's messaging limits, broken down by package can be found in a [support article](https://support.ably.com/support/solutions/articles/3000053845-do-you-have-any-connection-message-rate-or-other-limits-on-accounts-).\n\n- We are currently performing load and performance tests on this framework and will update this guide with that info when it's available. If this is important to you, please reach out to Ably's support at [support@ably.com](mailto:support@ably.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Frealtime-voting-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fably-labs%2Frealtime-voting-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Frealtime-voting-angular/lists"}