{"id":16139944,"url":"https://github.com/ladunjexa/nextjs14-livedox","last_synced_at":"2025-04-06T18:19:11.947Z","repository":{"id":254343203,"uuid":"832284771","full_name":"ladunjexa/nextjs14-livedox","owner":"ladunjexa","description":"LiveDox is a real-time collaborative document editor built with Next.js, Liveblocks, and Clerk 🌐","archived":false,"fork":false,"pushed_at":"2024-09-09T00:12:43.000Z","size":6500,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T00:17:16.340Z","etag":null,"topics":["collaboration-platform","lexical-react","liveblocks","nextjs14","shadcn-ui"],"latest_commit_sha":null,"homepage":"https://nextjs14-livedox.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ladunjexa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-22T17:45:20.000Z","updated_at":"2024-09-09T01:04:47.000Z","dependencies_parsed_at":"2024-08-22T22:36:31.424Z","dependency_job_id":"786fdd0c-96d6-4116-a5df-24c7c054f91c","html_url":"https://github.com/ladunjexa/nextjs14-livedox","commit_stats":null,"previous_names":["ladunjexa/nextjs14-livedox"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-livedox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-livedox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-livedox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-livedox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ladunjexa","download_url":"https://codeload.github.com/ladunjexa/nextjs14-livedox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247526772,"owners_count":20953143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collaboration-platform","lexical-react","liveblocks","nextjs14","shadcn-ui"],"created_at":"2024-10-09T23:50:13.044Z","updated_at":"2025-04-06T18:19:11.927Z","avatar_url":"https://github.com/ladunjexa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js 14 LiveDox\n\n\u003c!-- GitHub badges --\u003e\n\n[![Latest release](https://img.shields.io/github/v/release/ladunjexa/nextjs14-livedox?label=Latest%20release\u0026style=social)](https://github.com/ladunjexa/nextjs14-livedox/releases/tag/v0.1.0)\n[![Stars](https://img.shields.io/github/stars/ladunjexa/nextjs14-livedox?style=social)](https://github.com/ladunjexa/nextjs14-livedox/stargazers)\n[![Fork](https://img.shields.io/github/forks/ladunjexa/nextjs14-livedox?style=social)](https://github.com/ladunjexa/nextjs14-livedox/forks)\n[![GitHub commits](https://img.shields.io/github/commit-activity/t/ladunjexa/nextjs14-livedox?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-livedox/commits)\n[![Pull requests](https://img.shields.io/github/issues-pr/ladunjexa/nextjs14-livedox?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-livedox/pulls)\n\n![demo](/public/thumbnail.png)\n\n[![ladunjexa](https://custom-icon-badges.demolab.com/badge/made%20by%20-ladunjexa-556bf2?logo=github\u0026logoColor=white\u0026labelColor=101827)](https://github.com/luadnjexa)\n[![License](https://img.shields.io/github/license/ladunjexa/nextjs14-livedox?color=dddddd\u0026labelColor=000000)](https://github.com/ladunjexa/nextjs14-livedox/blob/main/LICENSE)\n[![Top Language](https://img.shields.io/github/languages/top/ladunjexa/nextjs14-livedox?logo=github\u0026logoColor=%23007ACC\u0026label=TypeScript)](https://www.typescriptlang.org/)\n[![Contributors](https://img.shields.io/github/contributors/ladunjexa/nextjs14-livedox?style=flat\u0026color=orange\u0026label=Contributors)](https://github.com/ladunjexa/nextjs14-livedox/graphs/contributors)\n![Release](https://img.shields.io/github/release/ladunjexa/nextjs14-livedox.svg)\n![PRs](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=shields)\n![deployment](https://img.shields.io/github/deployments/ladunjexa/nextjs14-livedox/Production?logo=vercel\u0026label=Website)\n[![Known Vulnerabilities](https://snyk.io/test/github/ladunjexa/nextjs14-livedox/badge.svg)](https://snyk.io/test/github/ladunjexa/nextjs14-livedox)\n\n## 🌐 Live Demo\n\nExplore the live demonstration of the project:\n[nextjs14-livedox](https://nextjs14-livedox.vercel.app/)\n\n## 📝 Description\n\n**LiveDox** is a real-time collaborative document editor. It showcases seamless multi-user editing,\ncommenting, and sharing of documents. The application is built with Next.js, Liveblocks, Clerk,\nSentry, and styled with TailwindCSS and Shadcn UI.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFolder Structure\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnextjs14-livedox/\n├── app/\n│   ├── (auth)/\n│   │   ├── sign-in/\n│   │   │   └── [[...sign-in]]/\n│   │   │       └── index.ts\n│   │   └── sign-up/\n│   │       └── [[...sign-up]]/\n│   │           └── index.ts\n│   ├── (root)/\n│   │   ├── document/\n│   │   │   └── [id]/\n│   │   │       └── page.tsx\n│   │   └── page.tsx\n│   ├── api/\n│   │   └── liveblocks-auth/\n│   │       └── route.ts\n│   ├── favicon.ico\n│   ├── global-error.tsx\n│   ├── globals.css\n│   ├── layout.tsx\n│   └── provider.tsx\n├── components/\n│   ├── atoms/\n│   │   ├── collaborator.tsx\n│   │   ├── loader.tsx\n│   │   ├── notifications.tsx\n│   │   └── user-type-selector.tsx\n│   ├── core/\n│   │   └── collaborative-room.tsx\n│   ├── document/\n│   │   └── new-document-button.tsx\n│   ├── editor/\n│   │   ├── plugins/\n│   │   │   ├── FloatingToolbarPlugin.tsx\n│   │   │   ├── Theme.ts\n│   │   │   └── ToolbarPlugin.tsx\n│   │   └── Editor.tsx\n│   ├── layout/\n│   │   └── header.tsx\n│   ├── modals/\n│   │   ├── delete-modal.tsx\n│   │   └── share-modal.tsx\n│   ├── room/\n│   │   ├── active-collaborators.tsx\n│   │   └── comments.tsx\n│   └── ui/ (generated by Shadcn UI)\n│       └── [[...]].{tsx,ts}\n├── lib/\n│   ├── actions/\n│   │   ├── room.actions.ts\n│   │   └── user.actions.ts\n│   ├── liveblocks.ts\n│   └── utils.ts\n├── public/\n│   ├── assets/\n│   │   ├── icons/[[...]].svg\n│   │   └── images/[[...]].png\n│   ├── next.svg\n│   └── vercel.svg\n├── styles/\n│   ├── dark-theme.css\n│   └── light-theme.css\n├── types/\n│   └── index.d.ts\n├── .env.local\n├── .eslintignore\n├── .eslintrc.json\n├── .gitignore\n├── .prettierignore\n├── .prettierrc\n├── components.json\n├── instrumentation.ts\n├── liveblocks.config.ts\n├── middleware.ts\n├── next-env.d.ts\n├── next.config.mjs\n├── package-lock.json\n├── package.json\n├── postcss.config.mjs\n├── README.md\n├── sentry.client.config.ts\n├── sentry.edge.config.ts\n├── sentry.server.config.ts\n├── tailwind.config.ts\n└── tsconfig.json\n```\n\n\u003c/details\u003e\n\n## 📖 Table of Contents\n\n\u003cdetails\u003e\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Live Demo](#-live-demo)\n- [Description](#-description)\n- [Technologies Used](#-technologies-used)\n- [Get Started](#-get-started)\n  - [Prerequisites](#-prerequisites)\n  - [Installation and Run Locally](#-installation-and-run-locally)\n  - [Scripts](#-scripts)\n- [Environment Variables](#-environment-variables)\n- [Deployment](#-deployment)\n  - [Deploy to production (manual)](#-deploy-to-production-manual)\n  - [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)\n  - [Deploy on Netlify](#-deploy-on-netlify)\n- [Contributing](#-contributing)\n  - [Bug / Feature Request](#-bug--feature-request)\n- [Acknowledgements](#-acknowledgements)\n- [Contact Us](#-contact-us)\n- [License](#-license)\n\n\u003c/details\u003e\n\n## ✨ Technologies Used\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eLiveDox\u003c/b\u003e is built using the following technologies:\u003c/summary\u003e\n\n- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that\n  compiles to plain JavaScript.\n- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and\n  statically generated web applications.\n- [Liveblocks](https://liveblocks.io/): Liveblocks is a real-time collaboration API that allows you\n  to build collaborative applications.\n- [Clerk](https://clerk.com/): Clerk is a developer-first authentication API that allows you to\n  build secure and scalable applications.\n- [Lexical](https://lexical.dev/): Lexical is a design system that helps you build beautiful text\n  editor interfaces faster.\n- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for\n  rapidly building custom user interfaces.\n- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic\n  patterns found in JavaScript code.\n- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.\n- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly\n  build modern web applications.\n- [Sentry](https://sentry.io/): Sentry is a developer-first error tracking and performance\n  monitoring platform that helps developers see what actually matters, solve quicker, and learn\n  continuously about their applications.\n- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the\n  frameworks, workflows, and infrastructure to build a faster, more personalized Web.\n\n\u003c/details\u003e\u003cbr/\u003e\n\n[![Technologies Used](https://skillicons.dev/icons?i=ts,nextjs,tailwind,sentry,vercel)](https://skillicons.dev)\n\n## 🧰 Get Started\n\nTo get this project up and running in your development environment, follow these step-by-step\ninstructions.\n\n### 📋 Prerequisites\n\nIn order to install and run this project locally, you would need to have the following installed on\nyour local machine.\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com/get-npm)\n- [Git](https://git-scm.com/downloads)\n\n### ⚙️ Installation and Run Locally\n\n**Step 0:**\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e - the apllication uses _Clerk_ as an authentication and user management service, therefore, you\n\u003e   need to create account [here](https://clerk.com/) and sets the\n\u003e   `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables in `.env` file.\n\u003e   Also, the different URLs for the Clerk sign-in and sign-up pages.\n\u003e - the application uses _Liveblocks_ for real-time collaboration, therefore, you need to create\n\u003e   account [here](https://liveblocks.io/) and sets the `LIVEBLOCKS_SECRET_KEY` environment variable\n\u003e   in `.env` file.\n\u003e - the application uses _Sentry_ for Error Tracking and Monitoring, therefore, you need to create\n\u003e   Sentry account [here](https://sentry.io/) and sets the `SENTRY_AUTH_TOKEN` environment variable\n\u003e   in `.env` file.\n\n**Step 1:**\n\nDownload or clone this repo by using the link below:\n\n```bash\ngit clone https://github.com/ladunjexa/nextjs14-livedox.git\n```\n\n**Step 2:**\n\nExecute the following command in the root directory of the downloaded repo in order to install\ndependencies:\n\n```bash\nnpm install\n```\n\n**Step 3:**\n\nExecute the following command in order to run the development server locally:\n\n```bash\nnpm run dev\n```\n\n**Step 4:**\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### 📜 Scripts\n\nAll scripts are defined in the `package.json` file. Here is a list of all scripts:\n\n| Script          | Action                                      |\n| :-------------- | :------------------------------------------ |\n| `npm install`   | Installs dependencies                       |\n| `npm run dev`   | Starts local dev server at `localhost:3000` |\n| `npm run build` | Build your production site to `./dist/`     |\n| `npm run start` | Start your production site locally          |\n| `npm run lint`  | Run ESLint                                  |\n\n## 🔒 Environment Variables\n\nEnvironment variables[^6] can be used for configuration. They must be set before running the app.\n\n\u003e [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are\n\u003e set in the operating system or shell, typically used to configure programs.\n\n**LiveDox** uses [Clerk](https://clerk.com), [Liveblocks](https://liveblocks.io), and\n[Sentry](https://sentry.io) as external services. You need to create an account on each of these\nservices and get the required credentials to run the app.\n\nCreate a `.env` file in the root directory of the project and add the following environment\nvariables:\n\n```env\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\u003cNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY\u003e\nCLERK_SECRET_KEY=\u003cCLERK_SECRET_KEY\u003e\n\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\n\nLIVEBLOCKS_SECRET_KEY=\u003cLIVEBLOCKS_SECRET_KEY\u003e\nSENTRY_AUTH_TOKEN=\u003cSENTRY_AUTH_TOKEN\u003e\n```\n\n## 🚀 Deployment\n\n#### Deploy to production (manual)\n\nYou can create an optimized production build with the following command:\n\n```bash\nnpm run build\n```\n\n#### Deploy on Vercel (recommended)\n\nThe easiest way to deploy this Next.js app is to use the\n[Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-livedox)\n\n#### Deploy on Netlify\n\nYou can also deploy this Next.js app with [Netlify](https://www.netlify.com/).\n\n[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-livedox)\n\nCheck out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## 🔧 Contributing\n\n[![contributors](https://contrib.rocks/image?repo=ladunjexa/nextjs14-livedox)](https://github.com/ladunjexa/nextjs14-livedox/graphs/contributors)\n\nContributions are what make the open source community such an amazing place to learn, inspire, and\ncreate. Any contributions you make are **greatly appreciated**.\n\nTo fix a bug or enhance an existing module, follow these steps:\n\n1. Fork the repo\n2. Create a new branch (`git checkout -b improve-feature`)\n3. Make the appropriate changes in the files\n4. Commit your changes (`git commit -am 'Improve feature'`)\n5. Push to the branch (`git push origin improve-feature`)\n6. Create a Pull Request 🎉\n\n### 📩 Bug / Feature Request\n\nIf you find a bug (failure of a module to execute its intended function), kindly open an issue\n[here](https://github.com/ladunjexa/nextjs14-livedox/issues/new) by including the issue with a title\nand clear description.\n\nIf you'd like to request a new function, feel free to do so by opening an issue\n[here](https://github.com/ladunjexa/nextjs14-livedox/issues/new). Please include sample queries and\ntheir corresponding results.\n\n## 💎 Acknowledgements\n\nI'd like to express my gratitude to the following people who helped me with this project and made it\npossible:\n\n- [Next.js](https://nextjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Liveblocks](https://liveblocks.io/)\n- [Clerk](https://clerk.com/)\n- [Lexical](https://lexical.dev/)\n- [Shadcn UI](https://ui.shadcn.com/)\n- [Sentry](https://sentry.io/)\n- [Vercel](https://vercel.com/)\n- [JavaScript Mastery](https://www.jsmastery.pro/)\n\n## 📞 Contact Us\n\n[![Telegram](https://img.shields.io/badge/Telegram-@ladunjexa-2CA5E0?style=social\u0026logo=telegram\u0026logoColor=000000)](https://t.me/ladunjexa)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-ladunjexa-blue?style=flat\u0026logo=linkedin\u0026logoColor=b0c0c0\u0026labelColor=363D44)](https://www.linkedin.com/in/lironabutbul)\n[![Instagram](https://img.shields.io/badge/Instagram-ladunjexa-grey?style=flat\u0026logo=instagram\u0026logoColor=b0c0c0\u0026labelColor=8134af)](https://www.instagram.com/ladunjexa)\n[![Discord](https://img.shields.io/badge/Discord-ladunjexa-7289da?style=flat\u0026logo=discord\u0026logoColor=b0c0c0\u0026labelColor=2c2f33)](https://discord.com/users/827996364331810816)\n\n\u003c!-- [![Twitter](https://img.shields.io/twitter/follow/ladunjexa.svg?style=social)](https://twitter.com/intent/follow?screen_name=ladunjexa) --\u003e\n\n## 📋 License\n\n**LiveDox** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is\nfree to use — See [LICENSE](https://github.com/ladunjexa/nextjs14-livedox/blob/main/LICENSE) for\nmore details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-livedox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fladunjexa%2Fnextjs14-livedox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-livedox/lists"}