andy-huang / agile-flush-vue-app

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

♥♣🚽 Agile Flush 🚽♠♦

The No. 1 and No. 2 place for online planning poker! Watch this video for more details.

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.

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.

The tech stack

The project uses the following components:

• Vue 3 as the front-end framework.
• NodeJS Azure Function to do the authentication with Ably.
• Ably as the realtime communications platform.
• Azure Static Web Apps to host the Vue application and NodeJS function.

Building & running the app yourself

There are two options:

1. Install & run locally
2. Run using GitHub Codespaces

1. Install & run locally

Prerequisites

Ensure you have the following dependencies installed:

• Node 16
• Azure Static Web Apps CLI
• Azure Functions Core Tools v4

For more info developing Static Web Apps locally see the official Azure docs.

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.

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

   npm run init

3. Now continue with 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.

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

3. Now continue with Running the application.

Running the application

1. Sign up or log in to ably.com, and create a new app and copy the API key.

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

   {
       "IsEncrypted": false,
       "Values": {
           "AzureWebJobsStorage": "",
           "FUNCTIONS_WORKER_RUNTIME": "node",
           "ABLY_API_KEY": "<YOUR_ABLY_APP_KEY>"
       }
   }

   • Replace <YOUR_ABLY_APP_KEY> with the key you copied in the previous step.

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

   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:

   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:

   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:

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

4. 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 or
• the Azure CLI

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) or you start them by visiting the github.dev version of this repository.

More info

Want more information about this sample or using Ably in general? Feel free to contact me on Discord.

• Join our Discord server
• Follow us on Twitter
• Visit our website

---