Fluid Framework – Vote Movie

Small demo standalone app letting users vote for a movie while results are synced over different clients with Microsoft’s fluid Framework.

In action while two browser clients syncing:

In action

For further details see the author’s blog post

Challenge also described with a Microsoft Teams app in a former blog post

Prerequisites

  • Node.js version 14.7.5 or higher

    # determine node version
node --version

Version history

Version Date Author Comments
1.0 Jun 01, 2022 Markus Moeller Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • Clone the repository

    git clone https://github.com/mmsharepoint/fluid-vote-movie.git

  • In TWO consoles, navigate to /fluid-vote-movie

    cd fluid-vote-movie

  • Install modules once

    npm install

  • In one console start TinyliciousClient

    npx tinylicious

  • In other console start app

    npm run start

  • Click the app’s Voe buttons

  • Copy url and open 2nd app instance in different browser (tab)

    • See votes synced

  • Open another app by removing the hash (#) from url

    • See votes re-initialized

Features

This is a standalone web app to show usage of Microsoft’s Fluid Framework

  • Render video files with React and HTML5
  • Instantiate a Fluid Framework container
  • Sync runtime values over different clients

Useful links

Microsoft’s Fluid Framework

GitHub

View Github