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

Overview

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

You might also like...
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

A CRM build with react-admin, used as a demo for the capabilities of the framework

A CRM build with react-admin, used as a demo for the capabilities of the framework

Responsive React 'The Movie Database' (TMDb) App
Responsive React 'The Movie Database' (TMDb) App

TMDb Movie Search TMDb Movie Search is a responsive React app that utilises Twitter's typeahead.js and Bloodhound suggestion engine, loading data via

An app built with react and firebase and few other modules. It is tiktok but for movie trailers. that is why I called it tiktrailer

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

A Nice Movie App Built Using TypeScript And React

Downloaded app https://competent-fermi-0457c4.netlify.app/ Getting Started with Create React App This project was bootstrapped with Create React App.

A movie ticket reservation platform - React-FastAPI Stack Web-App
A movie ticket reservation platform - React-FastAPI Stack Web-App

Movie Ticket Reservation Deployment Docker-Compose Added Intro A movie ticket reservation platform. Functionalities Signup. Login Reserve currently pl

Responsive Movie App by React.js
Responsive Movie App by React.js

Responsive Movie App by React.js

CABINDOGS - Discover cabins for rent all over the world. For you and your furry friend.
CABINDOGS - Discover cabins for rent all over the world. For you and your furry friend.

CABINDOGS Cabin Rentals for you and your furry friends too What is a getaway from home when your best friend can't come and is left all alone? SAD! CA

My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.
My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.

Roseflix: A Netflix Clone My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube. View Demo » Report B

Owner
Markus Möller
Microsoft MVP | SharePoint architect and technical expert for Microsoft 365 Development. Working at Avanade in Germany.
Markus Möller
Movie Search Engine an app that you can Filter and Favorite any movie

Movie Search Engine - ReactJS Movie Search Engine an app that you can Filter and Favorite any movie! View Demo · Report Bug Table of Contents About Th

Glauco Lustosa 1 Jul 9, 2022
To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

Jay 4 Apr 3, 2022
Use patches to keep the UI in sync between client and server, multiple clients, or multiple windows

The core idea is to use patches to keep the UI in sync between client and server, multiple clients, or multiple windows. It uses Immer as an interface

Webstudio 27 Sep 15, 2022
Movie search engine - Clone and use as your own movie search engine

Getting Started with movie_search_engine Step 1 Clone movie_search_engine this r

Muhid Hossain 2 Feb 28, 2022
Movie Ticket Reservation - A movie ticket reservation platform

Movie Ticket Reservation - A movie ticket reservation platform

Mingkai Zheng 1 Aug 3, 2022
A web application that allows the user to graphically build quantum circuits and view the results on a dashboard ⚛️

A web application that allows the user to graphically build quantum circuits and view the results on a dashboard. This project combines React, TypeScript frontend with a Flask, Python backend using Qiskit library to perform quantum operations.

Sandra 31 Jul 2, 2022
org-mode on the web, built with React, optimized for mobile, synced with Dropbox and Google Drive

org-mode on the web, built with React, optimized for mobile, synced with Dropbox and Google Drive

Daniel de Haas 1.3k Sep 16, 2022
A backstage plugin support gRPC playground for API entities and can be run as standalone app

backstage-grpc-playground is a backstage plugin ported from BloomRPC which is an Electron application. We modified some of the original code to make this compatible with Backstage entity. See Compare to BloomRPC

ZaloPay Open Source 15 Sep 14, 2022
Small React app that filter through 100k records users on memory

In-Memory filter pagination + React Small React app that calls an external API with 100k user records, stores all the records on memory and filter and

null 4 Nov 29, 2021
Web application that allows users to buy and sell various things of different categories

This simple and functional application allows users to sell and buy their products. It's open for anybody around the world, in this way the users can deal with all currencies as well as crypto currencies to close their business.

Edilson Pateguana 3 Jul 26, 2022