Skip to content

Handy information for using the Miro Developer Platform in hackathons

License

Notifications You must be signed in to change notification settings

miroapp/hackathon-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 

Repository files navigation

Miro Developer Platform

Hackathon starter kit

If you have attended hackathons in the past, you know how much time it takes to get a project started. From that first second when you get thinking on what to build, to picking a programming language, and then deciding what framework to use—it doesn't end there, and the list goes on! That's why this page is here! These resources help you get started with minimal time and effort.

Happy hacking!

Table of contents

Miro Developer Platform concepts

  • New to the Miro Developer Platform? Interested in learning more about platform concepts?
    Read our introduction page and familiarize yourself with the Miro Developer Platform capabilities in a few minutes.

  • Not sure about whether you should use the Miro Web SDK or the REST APIs?
    Here's a table that provides helpful guidelines on Miro Web SDK and REST API usage.

Miro Web SDK resources

Getting started with the Miro Web SDK

  • Quickstart (video): try the Web SDK in less than 1 minute.
  • Quickstart (article): get started, try the Web SDK in less than 1 minute, and use the Miro Web SDK in the developer console to get acquainted with its feature set.
  • Build your first Hello World app: bootstrap the Hello World app, create a Developer team in Miro, create and configure your app in Miro.

Miro Web SDK tutorials

Check out our how-tos and step-by-step tutorials to walk you through typical use cases when working with the Miro Web SDK.

Miro Web SDK reference guide

Look up methods, board item properties, and copy-paste code examples from the Miro Web SDK reference guide.

Miro REST API resources

Miro REST API client

The Miro Node.js client is a JavaScript library that enables Miro REST API functionality in Miro apps based on Node.js. You can use Node.js and JavaScript to send requests to and handle responses from the Miro REST API. Here are some resources that might come handy:

Getting started with the Miro REST API

Miro REST API tutorials

Check out our how-tos and step-by-step tutorials to walk you through typical use cases when working with the Miro REST API.

Postman collection

Run in Postman

Miro App Examples

Clone our Miro App Examples repository to get inspiration, customize, and explore apps built on top of Miro's Developer Platform 2.0.

Miro Web SDK

App Example Description
ai-image-generator Generator images using OpenAI and drag and drop those to a Miro board
breakout-rooms Leverage collaborative and real-time features, including sessions and real-time events and storage.
csv-to-mindmap Import data from CSV and create mind map on a Miro board
drag-and-drop This example shows you how to drag and drop images from your app onto the board.
asset-search This example shows you how to filter and search through assets by name and/or multiple tags.
digital-asset-manager This example shows you how to build a digital asset manager using Bynder's API.
connect-firebase This example shows you how to connect an SDK app to a Firebase backend.
stickynotes-to-shapes This example allows you to select several stickies, click the plugin button in the bottom bar, and replace any selected stickies with shapes.
template-builder This example shows how to create and position on the board multiple widgets of different types and render create custom interfaces in the library.
calendar This example shows you how to add a calendar made with shapes and text for a given month and year.
wordle This example shows you how to create a Wordle-like game using the Miro Web SDK.
blob-maker This example shows you how to create a drag and drop blobmaker using Miro's Web SDK.
youtube-room This example shows you how to sync a YouTube player across multiple users through Socket.IO.
custom-actions This example shows you how register custom actions in the item context menu.

 

REST APIs

App Example Description
node-oauth This Node.js sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro and make an API request to a Miro endpoint.
node-passport-oauth This Node.js sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro and make an API request to a Miro endpoint using Passport.js.
nextjs-oauth This app demonstrates how to implement the Oauth 2.0 authorization code flow from Miro into a client side application built with Next.js.
node-stickies-csv This Node.js sample app uses server side rendering (Handlebars.js) to provide a lightweight, CRUD-oriented REST example in the browser for Miro's sticky notes and tags APIs.
It demonstrates a structured > unstructured use case via CSV import, creating Miro sticky notes with tags based on CSV data.
python-flask-starter-with-oauth This Python/Flask boilerplate will allow to start using the Miro REST API in a few minutes.
This sample implements the full Miro authorization (OAuth 2.0 with refresh token) flow.
enterprise-team-management This Node.js sample demonstrates how to manage teams and organizations within Miro using Miro's REST API.
ℹ️ This example requires an Enterprise plan subscription and an Enterprise Team account.

 

Full-stack apps

App Example Description
monetization-with-stripe This full-stack example shows how use Stripe to add a paywall for certain features in your app.
html-preview Use the Miro API to generate HTML pages from Miro boards. Each frame on the board produces an HTML page.
github-appcards This full-stack example shows how to build an integration with GitHub that syncs data between GitHub issues and Miro app cards.
plant-uml This full-stack example shows how to import Plant UML diagrams into Miro as editable board items.
nextjs This full-stack example shows a Next.js application that uploads a camera image to the Miro board using Web SDK and REST API integration.
webhooks-manager This full-stack example demonstrates how to interact with the webhooks API, and how to handle the webhooks challenge.

 

Miro for Developers YouTube Channel

Miro for Developers features videos which can help you with building, designing, and deploying your Miro app. Check out the channel to find over 40 developer focused videos, including Question and Answer sessions with our engineers, webinars to help you build your Miro apps, and much more.

Miro CSS library

Mirotone is a CSS library that enables everyone to design and build their Miro apps. The goal of this design system is to enable makers to quickly jump into a simple, yet consistent and efficient user experience while creating their functional solutions. The framework aims to provide ready-to-use frontend components that you can incorporate into your app in Miro.

 

Support and community

  • Stuck somewhere? Encountered any blockers or errors? Need assistance? We're here to help you! Ask your question on our developer community forum.
  • Feel free to open an issue or a pull request to improve this guide.
  • Join our Developer community on Discord to exchange ideas and to chat with other Miro developers.

About

Handy information for using the Miro Developer Platform in hackathons

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published