A modern, collaborative document editor that replicates the core functionalities of Google Docs. This application offers real-time collaboration, rich text editing, and a responsive design for an optimal user experience.
Explore the live application here: Google Docs Clone Live Demo
- Next js: A React framework for server-side rendering and static site generation.
- TypeScript: Adds static type definitions to JavaScript for better development experience.
- Liveblocks: Framework for building real-time collaborative applications.
- Lexical Editor: A versatile rich text editor framework.
- ShadCN: A library of accessible and customizable UI components.
- Tailwind CSS: Utility-first CSS framework for responsive and customizable styling.
π Authentication: Secure user authentication via GitHub using NextAuth, managing sign-ins, sign-outs, and sessions.
π Collaborative Text Editor: Multiple users can edit documents simultaneously with live updates, ensuring seamless collaboration.
π Document Management:
- Create Documents: Users can create new documents that are automatically saved and organized.
- Delete Documents: Users can delete documents they own with a simple interface.
- Share Documents: Share documents via email or link with customizable view/edit permissions.
- List Documents: View and manage all documents, including those owned or shared with the user, with search and sorting capabilities.
π Comments: Add inline or general comments with support for threaded discussions, enabling in-depth conversations.
π Active Collaborators: Real-time presence indicators to show who is currently working on the document.
π Notifications: Get alerts for document sharing, new comments, and collaborator activity to stay updated.
π Responsive Design: The application is optimized for various devices, ensuring a smooth experience on both desktop and mobile.
π Robust Architecture: Emphasizes code reusability and modularity, promoting maintainability and scalability.
To set up and run this project locally, follow these steps:
-
Clone the Repository:
git clone https://github.com/soumojit622/google-docs-clone.git cd google-docs-clone
-
Install Dependencies:
npm install
-
Set Up Environment Variables: Create a
.env.local
file in the root directory and add your environment variables. Use.env.example
as a reference. -
Run the Development Server:
npm run dev
-
Access the Application: Open your browser and navigate to
http://localhost:3000
to start using the application.
Once the server is running, you can:
- Create and Edit Documents: Start new documents or edit existing ones using the rich text editor with various formatting options.
- Collaborate in Real-Time: Invite others to work on documents together and see live changes.
- Manage Documents: Use the dashboard to organize, search, and manage your documents efficiently.
- Comment and Discuss: Add comments and participate in threaded discussions to collaborate more effectively.
- Track Collaborators: See who is currently working on the document with real-time presence indicators.
We welcome contributions to this project! To contribute:
- Fork the Repository: Create your own fork.
- Create a Branch: Develop your changes in a new branch.
- Submit a Pull Request: Open a pull request with a clear description of your changes.
Please ensure that your code follows the project's coding standards and includes appropriate tests.
For questions or feedback:
- Email: mail
Special thanks to the developers and communities behind the technologies used: