phongtrieungo/react-miro

A cloned version of Miro web application

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

react-miro's Issues

Implement room info UI

Implement pencil and drawing feature

Implement login and logout state

Implement Org Sidebar Detail

Overview

• Implement the Organization Detail
• The information will have

1. Switcher for account
2. 2 buttons for switching team board and favorite board

Insert layer

Implement board detail layout

Overview

• Board detail implementation

Implement Navbar

Overview

• Implement the search input on navbar

Required libraries

• query-string
• usehooks-ts

Select box

Implement dashboard layout

Overview

Implement the dashboard layout for the application

Installing some supported libraries

Overview

Installing some libraries to support the development

1. Shadcn: https://ui.shadcn.com/

Supabase

I think using supabase provide so much storage, instead of using convex ?

Implement board list UI

Overview

• Implement board list

Setup database

Overview

• Using convex: https://dashboard.convex.dev/t/phongtrieungo
• Install convex library for the project

Output

• npx convex dev: run backend
• npm run dev: run frontend

Implement selection net

Implement board card action

Overview

• Implement board card action

1. Copy board ID
2. Delete the board
3. Rename the board

Implementation

• Adding dropdown-menu, alert-dialog from shadcn-ui
• Installing zustand for state management

Resize layer

Description

• Enable resize feature for selected element

Translate layer

Description

• Allow to drag selected layer to a new location
• Deselect the selected layer when clicking outside the selected layer

Implement state for canvas

Overview

• Implement the canvas state when selecting toolbar

Detail

• Create canvas type and enum
• Based on the actions on toolbar, the canvas state will be updated to reflect it

Room authentication for meeting

Overview

• Authenticate each user wants to join the room

Process

• Follow the instructions from liveblocks for authentication designed for Nextjs
• The custom api route for liveblocks combining with Convex to process authentication

Setup Nextjs project

Overview

• Setup Nextjs repo for the application

Implement empty state of board content

Overview

• Create three empty pages

1. Empty search
2. Empty favorites
3. Empty Board

• Create BoardList component to display the board content

Setup Liveblock for real time interaction

Implement multiple selections

Color change and deletion

Description

• Allow to change layer color
• Allow to delete a selected layer

Implement sidebar detail

Overview

• Implement the sidebar component

AC

1. Implement a button to create a new organization from the Clerk
   + The creation form will be displayed as a modal
2. Implement an organization list which displays the created organization
3. Implement a Hint component to show the tooltip content
4. Update the nextjs config to show the image from host image.clerk.com

Deployment

Layer Depth

Create schema for board

Select layer

Description

• Allow user to select an element on the canvas
• It will highlight selected element from other

Handle room participants

Overview

• Show the participants
• Show the toolbar

Setup authentication

Overview

• Using clerk for authentication

Improving search query

Description

• Enable team and favorite tabs to show correct boards
• Remove a favorite board will also delete in favorite table

Implementing favorite functionaloty

Description

• Implement favorite feature
• Implement unfavorite feature

Detect and display cursor presence

Overview

• Update the cursor pointer based on toolbar change
• Track the collage cursor

Learning Nextjs Routing

Overview

• Learning about nextjs routing system

Output

• App folder: contains all routing files for the application, rendering specific routes or layout
• Components folder: reusable components used across the application, shadcn-ui created for this project
• Page folder: it is created for legacy nextjs, components in this folder will not utilise server component capability
• layout.tsx: the file defined the overall layout of a given route so
• Routing
  1. Static route
  2. Dynamic route: [routeId]
  3. Logically grouped routes: (products)/byCategory
  4. Private folder: _internal-components => cannot be accessed