Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ably-labs/agile-flush-vue-app

Use this app to collaboratively estimate the stories for the next sprint.
https://github.com/ably-labs/agile-flush-vue-app

ably azure azure-functions nodejs serverless static-web-apps vue vuejs

Last synced: about 1 month ago
JSON representation

Use this app to collaboratively estimate the stories for the next sprint.

Host: GitHub
URL: https://github.com/ably-labs/agile-flush-vue-app
Owner: ably-labs
License: apache-2.0
Created: 2021-11-25T09:31:04.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2023-07-19T05:52:32.000Z (over 1 year ago)
Last Synced: 2024-04-17T15:32:35.512Z (8 months ago)
Topics: ably, azure, azure-functions, nodejs, serverless, static-web-apps, vue, vuejs
Language: JavaScript
Homepage: https://agileflush.ably.dev/
Size: 2.16 MB
Stars: 12
Watchers: 5
Forks: 4
Open Issues: 8
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

        # ♥♣🚽 Agile Flush 🚽♠♦

The No. 1 and No. 2 place for online planning poker! Watch [this video](https://youtu.be/59BZCQuRRkM) for more details.

[![AgileFlush Screenshot](agileflush_screenshot.png)](https://agileflush.ably.dev/)

This project is an example of how an online collaboration tool can be built that depends on realtime data synchronization between clients.

This is the flow diagram how users can interact with the application.

![Functionality diagram](/diagrams/agile-flush-functionality.png)

Once a planning session has started, all user actions are synchronized across all team members to maintain a consistent state. So *Show/hide votes* and *Reset votes* are triggered for all connected users once these buttons are clicked.

The live version can be used here: [Agile Flush on Azure](https://agileflush.ably.dev/).

## The tech stack

![Component diagram](/diagrams/aglile-flush-main-technical-components.png)

The project uses the following components:

- [Vue 3](https://v3.vuejs.org/) as the front-end framework.

- [NodeJS Azure Function](https://docs.microsoft.com/azure/developer/javascript/how-to/develop-serverless-apps) to do the authentication with Ably.

- [Ably](https://ably.com?utm_campaign=GLB-2201-agile-flush&utm_content=repo-agile-flush&utm_source=github&utm_medium=repo&src=GLB-2201-agile-flush-github) as the realtime communications platform.

- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) to host the Vue application and NodeJS function.

## Building & running the app yourself

There are two options:

1. [Install & run locally](#1-install--run-locally)

1. [Run using GitHub Codespaces](#2-run-using-github-codespaces)

### 1. Install & run locally

#### Prerequisites

Ensure you have the following dependencies installed:

- [Node 16](https://nodejs.org/en/download/)

- [Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli)

- [Azure Functions Core Tools v4](https://docs.microsoft.com/azure/azure-functions/functions-run-local?tabs=v4)

For more info developing Static Web Apps locally see the [official Azure docs](https://docs.microsoft.com/azure/static-web-apps/local-development).

#### Installation steps

1. Clone this repository to your local machine.

    📝 **Tip** - If you intend you deploy your own version of the app, you're better off forking this repo.

1. To install the dependencies for this application, run this in the root of the repository:

    ```cmd

    npm run init

    ```

1. Now continue with [Running the application](#running-the-application).

### 2. Run using GitHub Codespaces

1. If you're new to Codespaces, please have a look at the [quickstart in the GitHub docs](https://docs.github.com/en/codespaces/getting-started/quickstart).

1. Create a new Codespace via the *<> Code* dropdown button and select the tab *Codespaces -> New codespace*.

1. Now continue with [Running the application](#running-the-application).

### Running the application

1. [Sign up](https://ably.com/signup?utm_campaign=GLB-2201-agile-flush&utm_content=repo-agile-flush&utm_source=github&utm_medium=repo&src=GLB-2201-agile-flush-github) or [log in](https://ably.com/login?utm_campaign=GLB-2201-agile-flush&utm_content=repo-agile-flush&utm_source=github&utm_medium=repo&src=GLB-2201-agile-flush-github) to ably.com, and [create a new app and copy the API key](https://faqs.ably.com/setting-up-and-managing-api-keys?utm_campaign=GLB-2201-agile-flush&utm_content=repo-agile-flush&utm_source=github&utm_medium=repo&src=GLB-2201-agile-flush-github).

1. Add a file named `local.settings.json` to the `api` folder and add the following content:

    ```json

    {

        "IsEncrypted": false,

        "Values": {

            "AzureWebJobsStorage": "",

            "FUNCTIONS_WORKER_RUNTIME": "node",

            "ABLY_API_KEY": ""

        }

    }

    ```

    - Replace `` with the key you copied in the previous step.

1. To run everything (Vue application, Azure Function, and Static Web Apps emulator), run this in the root of the repository:

    ```cmd

    swa start

    ```

    Navigate to `http://localhost:4280` to run the application locally.

    

    If these ports are already in use, please change them in the `package.json` file or start the apps individually.  

    A. To run the Vue application, run this in the root of the repository:

    ```cmd

    npm run dev

    ```

    The Vue app will be available at `http://localhost:5173`.

    B. To start the Azure Functions runtime, run this in the `api` folder of the repository:

    ```cmd

    func start

    ```

    The Azure Functions app will be available at `http://localhost:7071`.

    C. To start the Static Web App emulator, run this in the root of the repository:

    ```cmd

    swa start http://localhost:5173 --api-location http://localhost:7071

    ```

    

1. Now you can use the application using the endpoint provided by the Static Web Apps emulator: `http://localhost:4280`.

## Deploying the app to Azure

Once you forked this repository, you can deploy it to Azure via:

- [the Azure Portal](https://docs.microsoft.com/azure/static-web-apps/get-started-portal?tabs=vue) or

- [the Azure CLI](https://docs.microsoft.com/azure/static-web-apps/get-started-cli?tabs=vue)

In both cases you can skip the repository creation step since you can use your fork of this repository.

## Code Tours

This repository has code tours that guide you through the files and folders in this repository. You can either start the tours in VSCode (enabled by the [CodeTour extension](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour)) or you start them by visiting the [github.dev](https://github.dev/ably-labs/agile-flush-vue-app) version of this repository.

## More info

Want more information about this sample or using Ably in general? Feel free to contact me on [Discord](http://go.ably.com/discord).

- [Join our Discord server](http://go.ably.com/discord)

- [Follow us on Twitter](https://twitter.com/ablyrealtime)

- [Visit our website](https://ably.com?utm_campaign=GLB-2201-agile-flush&utm_content=repo-agile-flush&utm_source=github&utm_medium=repo&src=GLB-2201-agile-flush-github)

---

[![Ably logo](https://static.ably.dev/badge-black.svg?agile-flush-vue-app)](https://ably.com?utm_campaign=GLB-2201-agile-flush&utm_content=repo-agile-flush&utm_source=github&utm_medium=repo&src=GLB-2201-agile-flush-github)