Skip to content

Google Docs Clone built in React/Typescript/Express/Postgres. Uses web sockets to provide document collaboration.

Notifications You must be signed in to change notification settings

noahskorner/google-docs-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Google Docs Clone

Built with React, Typescript, TailwindCSS, ExpressJS, Postgres, and Socket.IO Check it out here!

API Documentation

View it here!

Project Screen Shot(s)

  • Full Register/Login/Verify Email functionality, with helpful toast notifications to guide you.

    Authentication

  • Basic document dashboard to create new documents, and navigate to your recent or shared documents.

    Dashboard

  • Real time collaboration. Work on documents at the same time with those you've shared the document with.

    Collaboration

Installation and Setup Instructions

Clone down this repository. You will need node and npm installed globally on your machine.

Client Installation:

cd client

Install Dependencies:

npm install

To Start Server:

npm start

To Visit App:

localhost:3000

Server Installation:

cd server

Create the .env file in the root directory:

touch .env.development

You will need to add all of the neccessary environment variables listed in this file

Install Dependencies:

npm install

To Start Server:

npm start

To Visit App:

localhost:3001

Reflection

This was a week long project I used to learn web sockets, and sharpen my React skills. While the project still has a ton of functionality that could be added, I accomplished my goals of the project. I used Socket.IO to create and consume web sockets, to provide real-time collaboration between your peers, similar to Google Docs. I learned a lot about React particularly on how to structure and consume Contexts and Hooks.

If I wanted to work more on this project, the next thing I would do is refactor my client service files. I am using the React Context API to provide a global AuthContext which stores my JWT accessToken in memory. However, my service files are plain typescript files, and cannot make use of the Context API. This makes it tedious to provide the accessToken to these services, as I have to pass the token as an argument each time. My first thoughts on how to fix this would be to create custom Hooks for each service, let me know if you can think of a better way!

Overall, I had a lot of fun working on this project. It was nice to not have to worry about designing a front end (and just copying Google's hard work). I am looking forward to trying more 'clone' projects in the future!

About

Google Docs Clone built in React/Typescript/Express/Postgres. Uses web sockets to provide document collaboration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published