Built with Next.js to handle the user interface, Liveblocks for real-time features and styled with TailwindCSS, LiveDocs is a clone of Goole Docs. The primary goal is to demonstrate the developer's skills in realtime enviroment that creates a lasting impact.
- Next.js
- TypeScript
- Liveblocks
- Lexical Editor
- Shadcn
- Tailwind CSS
👉 Authentication: User authentication using GitHub through NextAuth, ensuring secure sign-in/out and session management.
👉 Collaborative Text Editor: Multiple users can edit the same document simultaneously with real-time updates.
👉 Documents Management:
- Create Documents: Users can create new documents, which are automatically saved and listed.
- Delete Documents: Users can delete documents they own.
- Share Documents: Users can share documents via email or link with view/edit permissions.
- List Documents: Display all documents owned or shared with the user, with search and sorting functionalities. 👉 Comments: Users can add inline and general comments, with threading for discussions.
👉 Active Collaborators on Text Editor: Show active collaborators with real-time presence indicators.
👉 Notifications: Notify users of document shares, new comments, and collaborator activities.
👉 Responsive: The application is responsive across all devices.
and many more, including code architecture and reusability
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.