CloudScript-Docs is a sophisticated real-time document editor, designed as an advanced clone of Google Docs. This application is built with Next.js and TypeScript, ensuring a robust and type-safe foundation. It integrates Clerk for secure user authentication and session management, Liveblocks for seamless real-time collaboration, and Lexical Editor for a dynamic text editing experience. The user interface is styled with Tailwind CSS for a responsive and modern look, while Sentry is utilized for comprehensive application and performance monitoring.
👉 Authentication: Implemented secure user sign-in and session management with Clerk, offering a reliable and streamlined authentication process.
👉 Collaborative Text Editor: Supports simultaneous document editing by multiple users with real-time updates, facilitated by Liveblocks.
👉 Document Management:
- Create Documents: Users can effortlessly create and save new documents.
- Delete Documents: Provides functionality to manage and remove documents as needed.
- Share Documents: Allows sharing of documents through email or link with customizable permissions.
- List Documents: Enables users to view, search, and manage all documents owned or shared with them.
👉 Comments: Supports inline and general comments with threading for interactive discussions.
👉 Active Collaborators: Shows real-time presence indicators to highlight users currently editing the document.
👉 Notifications: Keeps users informed of document shares, new comments, and collaborator activities.
👉 Responsive Design: Ensures an optimal user experience across all devices.
This project utilizes cutting-edge technologies and tools to deliver a seamless experience:
- Next.js: Framework for server-side rendering and static site generation.
- TypeScript: Strongly typed programming language for scalable development.
- Liveblocks: Real-time collaboration and presence management.
- Lexical Editor: Advanced text editor for rich document editing.
- ShadCN: Utility-first component library for building interfaces.
- Tailwind CSS: Utility-first CSS framework for responsive design.
- Sentry: Error and performance monitoring to improve reliability.
- Clerk: Authentication solution for secure user management.
To work effectively with this project, it’s beneficial to have familiarity with the following:
- React.js
- CSS (Tailwind CSS is used for styling)
- Next.js
- TypeScript
CloudScript-Docs exemplifies my proficiency in developing real-time collaborative applications, showcasing my ability to build scalable and user-centric interfaces. The project mirrors the functionality of Google Docs while incorporating advanced features and a polished design.
Follow the steps below to set up and run CloudScript-Docs locally:
Ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/yourusername/CloudScript-Docs.git cd CloudScript-Docs -
Install dependencies:
Using npm:
npm install
Or using yarn:
yarn install
Or using pnpm:
pnpm install
-
Configure environment variables:
Copy the
.env.examplefile and rename it to.env, then add your configuration values.cp .env.example .env
-
Start the development server:
Using npm:
npm run dev
Or using yarn:
yarn dev
Or using pnpm:
pnpm dev
Or using bun:
bun dev
-
Open http://localhost:3000 with your browser to see the application in action.
You can start editing the main page by modifying the file app/page.tsx. Any changes you make will automatically update in the browser.
This project also uses next/font to 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 APIs.
- Learn Next.js - An interactive Next.js tutorial.
You can also check out the Next.js GitHub repository for further exploration and to contribute your feedback!
The easiest way to deploy this application is by using the Vercel Platform, the creators of Next.js.
For detailed instructions, visit the official Next.js deployment documentation.