Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/akshaypratapsingh09/flipboard

Collaborative Canvas App for simultaneous working
https://github.com/akshaypratapsingh09/flipboard

canvas collaborative-editor figma nextjs

Last synced: 12 days ago
JSON representation

Collaborative Canvas App for simultaneous working

Host: GitHub
URL: https://github.com/akshaypratapsingh09/flipboard
Owner: AkshayPratapSingh09
Created: 2024-08-26T18:23:12.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-09-01T16:44:45.000Z (2 months ago)
Last Synced: 2024-10-17T11:01:20.275Z (28 days ago)
Topics: canvas, collaborative-editor, figma, nextjs
Language: TypeScript
Homepage:
Size: 216 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# How I Built it

- **FabricJs** - A Canvas Library for easy implementation of canvas Movable Canvas Elements
- For reference FabricJs Site

- **UUID** - A Js Library for generating unique IDs for all elements(Lot fo canvas and User needs unique IDs)
- For reference UUID (Unique Ids)

- **Liveblocks** - For Collaborative working(Multiple devs working on same App) ans *sharing* / *commenting* / *Reacting* etc.
- For reference Liveblocks (Collaborative Working)

**!** -> In typescript it ignore if the variable exist or not
- Used in the public Key While Creating Client For LiveBLock (Collaborative Features) *to ensure use of env varibales*

# Commands For Setup :

```
npm install fabric uuid
```

```
npm i @liveblocks/client @liveblocks/react
```

### Initialize the `liveblocks.config.ts` file

```
npx create-liveblocks-app@latest --init --framework react
```

## Setting Up Main Collaborative Frontend

- Start by using get started and setup up and Wrap up the app within the Room(Collaborative)
- Getting Started : Setup Nextjs

- ## Now our default Page is a Collaborative Page and Will Show how many people have Joined

# For The UI Library we are using Shadcn/ui
- Installation Shadcn/ui for NextJs

```
npx shadcn-ui@latest init
```

## Now copy pre-written tailwind.Config

tailwind.config.ts

```typescript
import type { Config } from "tailwindcss";

const config = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
primary: {
black: "#14181F",
green: "#56FFA6",
grey: {
100: "#2B303B",
200: "#202731",
300: "#C4D3ED",
},
},
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;
```

app/globals.css

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "@liveblocks/react-comments/styles.css";

* {
font-family:
work sans,
sans-serif;
}

@layer utilities {
.no-ring {
@apply outline-none ring-0 ring-offset-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0 !important;
}

.input-ring {
@apply h-8 rounded-none border-none bg-transparent outline-none ring-offset-0 focus:ring-1 focus:ring-primary-green focus:ring-offset-0 focus-visible:ring-offset-0 !important;
}

.right-menu-content {
@apply flex w-80 flex-col gap-y-1 border-none bg-primary-black py-4 text-white !important;
}

.right-menu-item {
@apply flex justify-between px-3 py-2 hover:bg-primary-grey-200 !important;
}
}
```

## Now Install `@liveblocks/react-comments` for implementing react by commenting for collaborative page

```
npm install @liveblocks/react-comments
```

## Now Grab all the assets for this Projects
- Includes *type Declarations*, *constants values*, *events and Custo Hooks For Canvas*, *Image Assets* and *LiveBlock Config*
- Get assets Zip Here

## Now we create cursors for every Users there

`Components/Cursor/Cursor.tsx`
- It container the base component for a cursor for all the collaborating people

`Components/Cursor/LiveCursors.tsx`
- This will contain/render all the people's cursor using Cursor.tsx

`Components/Cursor/CursorChat.tsx`
- This will contains the Chat messages from different users(Cursors)

### Hook Provided by Liveblocks
- `useOthers` - Will give info regarding others on the same board
- ``