Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/aftabrehan/board-wex

Real-Time Miro Clone Built With Nextjs, React, Covex, Liveblocks, TypeScript, and Tailwind CSS.
https://github.com/aftabrehan/board-wex

clerk-auth convex live-blocks next-js reactjs realtime-collaboration realtime-database shadcn-ui tailwindcss typescript

Last synced: about 14 hours ago
JSON representation

Real-Time Miro Clone Built With Nextjs, React, Covex, Liveblocks, TypeScript, and Tailwind CSS.

Host: GitHub
URL: https://github.com/aftabrehan/board-wex
Owner: aftabrehan
License: mit
Created: 2024-02-06T07:21:42.000Z (11 months ago)
Default Branch: master
Last Pushed: 2024-07-19T05:09:28.000Z (5 months ago)
Last Synced: 2024-12-16T02:40:03.620Z (6 days ago)
Topics: clerk-auth, convex, live-blocks, next-js, reactjs, realtime-collaboration, realtime-database, shadcn-ui, tailwindcss, typescript
Language: TypeScript
Homepage: https://board-wex.vercel.app
Size: 8.95 MB
Stars: 17
Watchers: 1
Forks: 8
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# BoardWex - Real-Time Miro Clone

![BoardWex - Real-Time Miro Clone](https://github.com/aftabrehan/board-wex/assets/93012310/8d85080c-f3a7-412f-8194-b45b601a17e4)

Real-Time Miro Clone Built With Nextjs, React, Covex, Liveblocks, TypeScript, and Tailwind CSS.

Features:

- 🛠️ Whiteboard from scratch
- 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil
- 🪄 Layering functionality
- 🎨 Coloring system
- ↩️ Undo & Redo functionality
- ⌨️ Keyboard shortcuts
- 🤝 Real-time collaboration
- 💾 Real-time database
- 🔐 Auth, organisations and invites
- ⭐️ Favoriting functionality
- 🌐 Next.js 14 framework
- 💅 TailwindCSS & ShadcnUI styling

### Prerequisites

**Node version 14.x**

### Cloning the repository

```shell
git clone https://github.com/aftabrehan/board-wex.git
```

### Install packages

```shell
npm i
```

### Setup .env file

```shell
CONVEX_DEPLOYMENT=dev:
NEXT_PUBLIC_CONVEX_URL=https://.convex.cloud
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_JWT_ISSUER_DOMAIN=https://example-id-0.clerk.accounts.dev
LIVEBLOCKS_SECRET_KEY=sk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

### Setup Convex

```shell
npx convex dev
```

### Start the app

```shell
npm run dev
```