nextjs-full-stack

Webcam Screenshot Next.js Full Stack App Example

This full-stack app shows how to build a Next.js application that uploads a camera image to a Miro board by using the Miro Web SDK and Miro REST API.

👨🏻‍💻 App Demo

webcam-screenshot-demo.mp4

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Associated Developer Tutorial
• Deploy the app on AWS Amplify
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro Node.js Client Library
  • miro.isAuthorized
  • miro.getAuthUrl
  • miro.exchangeCodeForAccessToken
  • api.getBoard
  • board.createImageItem
• Miro Web SDK
  • icon:click event
  • miro.board.getInfo()
  • miro.board.ui.openModal()
  • miro.board.ui.openPanel()

🛠️ Tools and Technologies

• React
• Next.js

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Create a new app in Miro
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.

☁️ Deploy the app on AWS Amplify

If you want to understand how to deploy the app to AWS Amplify, please watch the video below. Otherwise, skip to the next section to see how to run this locally.

🏃🏽‍♂️ Run the app locally

1. Run yarn install to install dependencies.

2. Rename the .sample.env file to .env and then add in your clientID, client Secret, and keep the redirect URL the same.

3. Open the app manifest editor by clicking Edit in Manifest.
   In the app manifest editor, copy and paste the following yaml code:

# See https://developers.miro.com/docs/app-manifest on how to use this
appName: Webcam Screenshot
sdkUri: "http://localhost:3000"
redirectUris:
  - http://localhost:3000/api/redirect/
scopes:
  - boards:read
  - boards:write
  - webcam:record

4. Go back to your app home page, and under the Permissions section, you will see a blue button that says Install app and get OAuth token. Click that button. Then click on Add as shown in the video below. In the video we install a different app, but the process is the same regardless of the app.

⚠️ We recommend to install your app on a developer team while you are developing or testing apps.⚠️

install-app.mov

5. Run yarn dev.

6. Go to your developer team, and open your boards.

7. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say More apps.

8. Search for your app Webcam Screenshot or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app.

search-for-app.mov

⚠️ In case of error 401 returned by a REST API request, remove the miro_tokens cookie for the localhost domain in the browser:

In the example, the access token refresh functionality has not been implemented to keep the implementation simple and focused on the topic.

🗂️ Folder structure

.
├── package.json <-- The dependencies for the app.
└── .env <-- A file you create, where you store sensitive credentials (client ID, client secret).
└── index.js <-- Main index.js file for basic UI functions.
└── initMiro.js <-- Module where we configure the Miro authorization helper.
└── pages
        └── api
            └── upload.js <-- API endpoint to upload the image to the Miro API.
            └── redirect.js <-- Handles redirect after successful authorization to get access token.
    └── _app.js <-- Main _app.js file for Next.js app.
    └── _document.js <-- Next.js import file.
    └── index.js <-- UI for the video preview and popup window.
    └── trigger.js <-- Page that we use as the app entry point.
└── public
└── styles
└── node_modules <-- Node.js modules that are installed based on dependencies.

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.