/vollab-for-miro

Vollab is a web extension demo to help with taking notes from video websites directly to Miro.

Primary LanguageTypeScriptMIT LicenseMIT

🚀 Vollab for Miro

Use this web extension to share video documentation notes directly to Miro.

Vollab presentation picture

Features

  • The watched videos automatically stops when the extension is open for efficiency
  • The user can include the start time for a video section
  • The user can customize the color of the sticky note in the extension
  • The extension tabs closes automatically once a note is posted for efficiency
  • Collaborators can review existing notes and go directly to the video, at the specified timestamp

Technical specs

  • React, React Hooks, React Context
  • TypeScript
  • Mirotone UI library
  • Tailwind CSS & Headless UI
  • Webpack
  • Webextension polyfills

🚀 Quick Start

Ensure you have

  • Node.js 14 or later installed
  • NPM v6.14 or later installed

Create a .env file in the project root, with your Miro Developer OAuth token, like the following:

MIRO_API_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxx

Development

  • npm install to install dependencies.
  • npm run dev:chrome to watch file changes in development

Load extension in browser

  • Go to the browser address bar and type chrome://extensions
  • Check the Developer Mode button to enable it.
  • Click on the Load Unpacked Extension… button.
  • Select your extension’s extracted directory (project_root/extension/chrome).

Browser Support

Chrome Firefox Opera Edge Yandex Brave vivaldi
49 & later ✔ 52 & later ✔ 36 & later ✔ 79 & later ✔ Latest ✔ Latest ✔ Latest ✔

Credit

This is a project made for the Junction 2021 hackathon, in collaboration with the following team: @Poppy22, @predandrada and @MozartHetfield.

Using open-source packages and an extension boilerplate from Abhijith Vijayan.