Set up the frontend

In this guide, you will learn how to set up the frontend of a collaborative application using Weave.js and Next.js.

The minimal setup involves two pages:

One that allows users to indicate the room name or ID and a username to join a collaboration room. Let's call this page the Enter Room page from now on.
A second page that handles the UI for the collaboration room once the user has joined. Let's call this page the Room page from now on.

Opinionated tools

We will use some opinionated tools and libraries (like shadcn/ui for UI components) to demonstrate the integration. Feel free to adapt and use alternatives that better match your project's needs and preferences.

Prerequisites

Before you begin, ensure that you have completed the backend installation guide.

Step by step

To set up Weave.js frontend over our Next.js project (on a single artifact), follow these steps:

Install the Weave.js frontend dependencies

Located on your project folder, install the Weave.js frontend dependencies:

npm install boring-avatars lucide-react @inditextech/weave-react

Set up a global state store for the UI

Let's start by creating a global state store to handle the UI state. We will use Zustand for this.

First, install the Zustand dependency:
```
npm install zustand
```

Create a store/store.ts file on the root folder of your project and set its content to:

store/store.ts

import { create } from "zustand";

type ShowcaseUser = {
  name: string;
  email: string;
};

interface CollaborationRoomState {
  ui: {
    show: boolean;
  };
  user: ShowcaseUser | undefined;
  room: string | undefined;
  setShowUi: (newShowUI: boolean) => void;
  setUser: (newUser: ShowcaseUser | undefined) => void;
  setRoom: (newRoom: string | undefined) => void;
}

export const useCollaborationRoom = create<CollaborationRoomState>()((set) => ({
  ui: {
    show: true,
  },
  user: undefined,
  room: undefined,
  setShowUi: (newShowUI) =>
    set((state) => ({
      ...state,
      ui: { ...state.ui, show: newShowUI },
    })),
  setUser: (newUser) => set((state) => ({ ...state, user: newUser })),
  setRoom: (newRoom) => set((state) => ({ ...state, room: newRoom })),
}));

Set up the Enter Room page

With the global state store in place, create the Enter Room page.

Set up the Room page

Now that the Enter Room page is set up, create the Room page.

Next steps

Let's now run the project.