This project is a clone of 'Google Docs', designed to provide a collaborative document editing experience similar to Google Docs. It allows multiple users to create, edit, and collaborate on documents in real-time.
- Document Creation and Storage: Users can create new documents and store them securely in the database.
- Real-time Document Editing: Multiple users can collaborate and edit the same document simultaneously, with changes reflected instantly for all participants.
- Real-time Sync: Changes made by different users are automatically synchronized across all connected clients, ensuring seamless collaboration.
- Rich Text Editing: The Quill text editor provides a rich editing experience, allowing users to format text, add images, and more.
-
Frontend:
- React.js
- Quill
- shadcn/ui
-
Backend:
- Node.js
- Socket.io
-
Database:
- MongoDB
-
Other Tools:
- TypeScript
- Docker
To get a local copy up and running, please follow these simple steps.
Here's what you need to be able to run the application locally:
- Node.js (Version: >=18.x)
- MongoDB
- npm / yarn
-
Clone the repo. (or fork https://github.com/KshitijTodkar48/Google-Docs-Clone/fork).
git clone https://github.com/KshitijTodkar48/Google-Docs-Clone.git
-
Go to the server directory.
cd server
-
Install packages with npm/yarn.
npm install
or
yarn install
-
Set up your
.env
variables.Create a new file named
.env
inGoogle-Docs-Clone/server
directory.In the server
.env
file, add a variable namedDATABASE_URL
.- You will need you own MongoDB database (local or cloud). Put its link under
DATABASE_URL
in the.env
file.
Add another variable named
CLIENT_ORIGIN
and set its value tohttp://localhost:5173
. - You will need you own MongoDB database (local or cloud). Put its link under
-
Run the following command:
npm run dev
Now the backend server will be running on http://localhost:3000
-
Open a new terminal and go to the client directory.
cd client
-
Install the client dependencies with npm/yarn.
npm install
-
Set up your
.env
variables.Create a new file named
.env
inGoogle-Docs-Clone/client
directory.In that file, add a variable named
VITE_SERVER_URL
and set its value tohttp://localhost:3000
. -
Run the following command:
npm run dev
The React app will be running on http://localhost:5173
-
Set up environment variables:
- Follow the steps 4 and 8 in the above 'Setup without docker' guide.
-
Run the following command in the root directory:
docker-compose up
Now the application will be running on http://localhost:5173