https://github.com/ladunjexa/nextjs14-livedox
LiveDox is a real-time collaborative document editor built with Next.js, Liveblocks, and Clerk 🌐
https://github.com/ladunjexa/nextjs14-livedox
collaboration-platform lexical-react liveblocks nextjs14 shadcn-ui
Last synced: 2 months ago
JSON representation
LiveDox is a real-time collaborative document editor built with Next.js, Liveblocks, and Clerk 🌐
- Host: GitHub
- URL: https://github.com/ladunjexa/nextjs14-livedox
- Owner: ladunjexa
- License: mit
- Created: 2024-07-22T17:45:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-09T00:12:43.000Z (9 months ago)
- Last Synced: 2025-02-13T00:17:16.340Z (4 months ago)
- Topics: collaboration-platform, lexical-react, liveblocks, nextjs14, shadcn-ui
- Language: TypeScript
- Homepage: https://nextjs14-livedox.vercel.app
- Size: 6.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js 14 LiveDox
[](https://github.com/ladunjexa/nextjs14-livedox/releases/tag/v0.1.0)
[](https://github.com/ladunjexa/nextjs14-livedox/stargazers)
[](https://github.com/ladunjexa/nextjs14-livedox/forks)
[](https://github.com/ladunjexa/nextjs14-livedox/commits)
[](https://github.com/ladunjexa/nextjs14-livedox/pulls)
[](https://github.com/luadnjexa)
[](https://github.com/ladunjexa/nextjs14-livedox/blob/main/LICENSE)
[](https://www.typescriptlang.org/)
[](https://github.com/ladunjexa/nextjs14-livedox/graphs/contributors)
[](https://snyk.io/test/github/ladunjexa/nextjs14-livedox)
## 🌐 Live Demo
Explore the live demonstration of the project:
[nextjs14-livedox](https://nextjs14-livedox.vercel.app/)
## 📝 Description
**LiveDox** is a real-time collaborative document editor. It showcases seamless multi-user editing,
commenting, and sharing of documents. The application is built with Next.js, Liveblocks, Clerk,
Sentry, and styled with TailwindCSS and Shadcn UI.
Folder Structure
```bash
nextjs14-livedox/
├── app/
│ ├── (auth)/
│ │ ├── sign-in/
│ │ │ └── [[...sign-in]]/
│ │ │ └── index.ts
│ │ └── sign-up/
│ │ └── [[...sign-up]]/
│ │ └── index.ts
│ ├── (root)/
│ │ ├── document/
│ │ │ └── [id]/
│ │ │ └── page.tsx
│ │ └── page.tsx
│ ├── api/
│ │ └── liveblocks-auth/
│ │ └── route.ts
│ ├── favicon.ico
│ ├── global-error.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── provider.tsx
├── components/
│ ├── atoms/
│ │ ├── collaborator.tsx
│ │ ├── loader.tsx
│ │ ├── notifications.tsx
│ │ └── user-type-selector.tsx
│ ├── core/
│ │ └── collaborative-room.tsx
│ ├── document/
│ │ └── new-document-button.tsx
│ ├── editor/
│ │ ├── plugins/
│ │ │ ├── FloatingToolbarPlugin.tsx
│ │ │ ├── Theme.ts
│ │ │ └── ToolbarPlugin.tsx
│ │ └── Editor.tsx
│ ├── layout/
│ │ └── header.tsx
│ ├── modals/
│ │ ├── delete-modal.tsx
│ │ └── share-modal.tsx
│ ├── room/
│ │ ├── active-collaborators.tsx
│ │ └── comments.tsx
│ └── ui/ (generated by Shadcn UI)
│ └── [[...]].{tsx,ts}
├── lib/
│ ├── actions/
│ │ ├── room.actions.ts
│ │ └── user.actions.ts
│ ├── liveblocks.ts
│ └── utils.ts
├── public/
│ ├── assets/
│ │ ├── icons/[[...]].svg
│ │ └── images/[[...]].png
│ ├── next.svg
│ └── vercel.svg
├── styles/
│ ├── dark-theme.css
│ └── light-theme.css
├── types/
│ └── index.d.ts
├── .env.local
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── components.json
├── instrumentation.ts
├── liveblocks.config.ts
├── middleware.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md
├── sentry.client.config.ts
├── sentry.edge.config.ts
├── sentry.server.config.ts
├── tailwind.config.ts
└── tsconfig.json
```
## 📖 Table of Contents
Table of Contents
- [Live Demo](#-live-demo)
- [Description](#-description)
- [Technologies Used](#-technologies-used)
- [Get Started](#-get-started)
- [Prerequisites](#-prerequisites)
- [Installation and Run Locally](#-installation-and-run-locally)
- [Scripts](#-scripts)
- [Environment Variables](#-environment-variables)
- [Deployment](#-deployment)
- [Deploy to production (manual)](#-deploy-to-production-manual)
- [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)
- [Deploy on Netlify](#-deploy-on-netlify)
- [Contributing](#-contributing)
- [Bug / Feature Request](#-bug--feature-request)
- [Acknowledgements](#-acknowledgements)
- [Contact Us](#-contact-us)
- [License](#-license)
## ✨ Technologies Used
LiveDox is built using the following technologies:
- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript.
- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and
statically generated web applications.
- [Liveblocks](https://liveblocks.io/): Liveblocks is a real-time collaboration API that allows you
to build collaborative applications.
- [Clerk](https://clerk.com/): Clerk is a developer-first authentication API that allows you to
build secure and scalable applications.
- [Lexical](https://lexical.dev/): Lexical is a design system that helps you build beautiful text
editor interfaces faster.
- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for
rapidly building custom user interfaces.
- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic
patterns found in JavaScript code.
- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.
- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly
build modern web applications.
- [Sentry](https://sentry.io/): Sentry is a developer-first error tracking and performance
monitoring platform that helps developers see what actually matters, solve quicker, and learn
continuously about their applications.
- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the
frameworks, workflows, and infrastructure to build a faster, more personalized Web.
[](https://skillicons.dev)
## 🧰 Get Started
To get this project up and running in your development environment, follow these step-by-step
instructions.
### 📋 Prerequisites
In order to install and run this project locally, you would need to have the following installed on
your local machine.
- [Node.js](https://nodejs.org/en/)
- [NPM](https://www.npmjs.com/get-npm)
- [Git](https://git-scm.com/downloads)
### ⚙️ Installation and Run Locally
**Step 0:**
> [!IMPORTANT]
>
> - the apllication uses _Clerk_ as an authentication and user management service, therefore, you
> need to create account [here](https://clerk.com/) and sets the
> `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables in `.env` file.
> Also, the different URLs for the Clerk sign-in and sign-up pages.
> - the application uses _Liveblocks_ for real-time collaboration, therefore, you need to create
> account [here](https://liveblocks.io/) and sets the `LIVEBLOCKS_SECRET_KEY` environment variable
> in `.env` file.
> - the application uses _Sentry_ for Error Tracking and Monitoring, therefore, you need to create
> Sentry account [here](https://sentry.io/) and sets the `SENTRY_AUTH_TOKEN` environment variable
> in `.env` file.
**Step 1:**
Download or clone this repo by using the link below:
```bash
git clone https://github.com/ladunjexa/nextjs14-livedox.git
```
**Step 2:**
Execute the following command in the root directory of the downloaded repo in order to install
dependencies:
```bash
npm install
```
**Step 3:**
Execute the following command in order to run the development server locally:
```bash
npm run dev
```
**Step 4:**
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### 📜 Scripts
All scripts are defined in the `package.json` file. Here is a list of all scripts:
| Script | Action |
| :-------------- | :------------------------------------------ |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run start` | Start your production site locally |
| `npm run lint` | Run ESLint |
## 🔒 Environment Variables
Environment variables[^6] can be used for configuration. They must be set before running the app.
> [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are
> set in the operating system or shell, typically used to configure programs.
**LiveDox** uses [Clerk](https://clerk.com), [Liveblocks](https://liveblocks.io), and
[Sentry](https://sentry.io) as external services. You need to create an account on each of these
services and get the required credentials to run the app.
Create a `.env` file in the root directory of the project and add the following environment
variables:
```env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
LIVEBLOCKS_SECRET_KEY=
SENTRY_AUTH_TOKEN=
```
## 🚀 Deployment
#### Deploy to production (manual)
You can create an optimized production build with the following command:
```bash
npm run build
```
#### Deploy on Vercel (recommended)
The easiest way to deploy this Next.js app is to use the
[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-livedox)
#### Deploy on Netlify
You can also deploy this Next.js app with [Netlify](https://www.netlify.com/).
[](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-livedox)
Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## 🔧 Contributing
[](https://github.com/ladunjexa/nextjs14-livedox/graphs/contributors)
Contributions are what make the open source community such an amazing place to learn, inspire, and
create. Any contributions you make are **greatly appreciated**.
To fix a bug or enhance an existing module, follow these steps:
1. Fork the repo
2. Create a new branch (`git checkout -b improve-feature`)
3. Make the appropriate changes in the files
4. Commit your changes (`git commit -am 'Improve feature'`)
5. Push to the branch (`git push origin improve-feature`)
6. Create a Pull Request 🎉
### 📩 Bug / Feature Request
If you find a bug (failure of a module to execute its intended function), kindly open an issue
[here](https://github.com/ladunjexa/nextjs14-livedox/issues/new) by including the issue with a title
and clear description.
If you'd like to request a new function, feel free to do so by opening an issue
[here](https://github.com/ladunjexa/nextjs14-livedox/issues/new). Please include sample queries and
their corresponding results.
## 💎 Acknowledgements
I'd like to express my gratitude to the following people who helped me with this project and made it
possible:
- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Liveblocks](https://liveblocks.io/)
- [Clerk](https://clerk.com/)
- [Lexical](https://lexical.dev/)
- [Shadcn UI](https://ui.shadcn.com/)
- [Sentry](https://sentry.io/)
- [Vercel](https://vercel.com/)
- [JavaScript Mastery](https://www.jsmastery.pro/)
## 📞 Contact Us
[](https://t.me/ladunjexa)
[](https://www.linkedin.com/in/lironabutbul)
[](https://www.instagram.com/ladunjexa)
[](https://discord.com/users/827996364331810816)
## 📋 License
**LiveDox** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is
free to use — See [LICENSE](https://github.com/ladunjexa/nextjs14-livedox/blob/main/LICENSE) for
more details.