Lets Brainstorm

Brainstorm is an example of using the Fluid Framework to build a collaborative line of business application. In this example each user can create their own sticky notes that is managed on a board. Ideas that have been "liked" appear in a list and are sorted based upon the number likes.

Running the App Locally with Tinylicious as the Fluid Service

To run this follow the steps below:

1. Open a terminal window at the root of the project.
2. Run npm install from the root
3. Run npm start to start the client
4. Run npx tinylicious to start the "Tinylicious" test service locally (this is used for local development)
5. Navigate to http://localhost:3000 in a browser tab

This package is based on the Create React App, so much of the Create React App documentation applies.

Running the App Locally with Azure Relay Service as the Fluid Service

To run this follow the steps below:

1. Go to the Azure portal and search for Azure Fluid Relay.
2. Create a new Azure Fluid Relay resource and note the tenantId, token, and orderer and storage values.
3. Rename the .env-template file in the root of the project to .env.
4. Replace the values in the .env file with the appropriate values from the Azure portal.
5. Open a terminal window at the root of the project.
6. Run npm install from the root
7. Run export REACT_APP_FLUID_CLIENT=frs in the terminal to create an environment variable (if using PowerShell run $env:REACT_APP_FLUID_CLIENT='frs'). This will cause the app to use FRS instead of Tinylicious for the Fluid service. )
8. Run npm start to start the client
9. Navigate to http://localhost:3000 in a browser tab

Using the Brainstorm App

1. Navigate to http://localhost:3000

You'll be taken to a url similar to 'http://localhost:3000/#a9c16d13-43fa-413a-859c-514e5bcaba3c' the path #a9c16d13-43fa-413a-859c-514e5bcaba3c specifies one brainstorm document.

2. Create another chrome tab with http://localhost:3000/**#a9c16d13-43fa-413a-859c-514e5bcaba3c**

Now you can create notes, write text, change colors and more!