Linear-like Issue Tracker

<p> <a href="https://liveblocks.io/examples/linear-like-issue-tracker/nextjs-linear-like-issue-tracker/preview"> <img src="https://img.shields.io/badge/live%20preview-message?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2Ljg0OSA0Ljc1SDBsNC44NDggNS4wNzV2Ny4wMDhsMTItMTIuMDgzWk03LjE1IDE5LjI1SDI0bC00Ljg0OS01LjA3NVY3LjE2N2wtMTIgMTIuMDgzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==&color=333" alt="Live Preview" /> </a> <a href="https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-linear-like-issue-tracker"> <img src="https://img.shields.io/badge/open%20in%20codesandbox-message?style=flat&logo=codesandbox&color=333&logoColor=fff" alt="Open in CodeSandbox" /> </a> <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" /> <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" /> </p>

This example shows how to build a Linear-inspired collaborative issue tracker using Liveblocks, and Next.js. Users can create issues with a rich-text editor, giving them priorities, progress state, and labels. Comments can be left on issues and users receive notifications if they've been mentioned.

<img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/examples/linear-like-issue-tracker.png" width="536" alt="Issue tracker" />

Getting started

Run the following command to try this example locally:

npx create-liveblocks-app@latest --example nextjs-linear-like-issue-tracker --api-key

This will download the example and ask permission to open your browser, enabling you to automatically get your API key from your liveblocks.io account.

Manual setup

<details><summary>Read more</summary> <p></p>

Alternatively, you can set up your project manually:

• Install all dependencies with npm install
• Create an account on liveblocks.io
• Copy your secret key from the dashboard
• Create an .env.local file and add your secret key as the LIVEBLOCKS_SECRET_KEY environment variable
• Run npm run dev and go to http://localhost:3000

</details>

Deploy on Vercel

<details><summary>Read more</summary> <p></p>

To both deploy on Vercel, and run the example locally, use the following command:

npx create-liveblocks-app@latest --example nextjs-linear-like-issue-tracker --vercel

This will download the example and ask permission to open your browser, enabling you to deploy to Vercel.

</details>

Develop on CodeSandbox

<details><summary>Read more</summary> <p></p>

After forking this example on CodeSandbox, create the LIVEBLOCKS_SECRET_KEY environment variable as a secret.

</details>