Giter Club home page Giter Club logo

tikhepooja11 / realtime-collaborative-document-editing-app Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 343 KB

This app leverages React.js on the frontend and Nest.js, on the backend along with WebSockets Gateway to provide a seamless real-time collaborative document editing experience. Users can collaborate simultaneously on documents, seeing changes instantly with robust real-time synchronization.

JavaScript 40.62% TypeScript 56.09% HTML 2.42% CSS 0.87%
mongoose nestjs-backend nestjs-microservices nestjs-mongoose react-hooks reactjs tailwindcss websocket-api websockets

realtime-collaborative-document-editing-app's Introduction

INTRODUCTION -

In today's interconnected world, seamless collaboration on documents among multiple users is essential for productivity and efficiency. The Real-Time Collaborative Document Editor is a cutting-edge application designed to facilitate simultaneous editing of shared documents by multiple users in real time. This project harnesses the power of modern web technologies, including NestJS for the backend, WebSocket for real-time communication, and robust authentication mechanisms to ensure data security and user privacy

KEY-FEATURES ->

  1. Real-Time Collaboration
  2. Document & users management
  3. Identification/mapping of websocket client with database user
  4. Authentication & Authorization
  5. Conflict Resolution
  6. Persistence
  7. Maintaining DTO’s (Data Transfer Object)
  8. Class-Validator & Class-Transformer

TECHNOLOGY STACK ->

  1. Frontend : ReactJS, state management(ContextAPI), TailwindCSS
  2. Backend : NestJS, WebSockets Gateway, Socket.io-client, Mongoose, Mongo-Atlas, JWT(JSON web token - HMAC with SHA-256), Typescript

PROJECT STRUCTURE ->

Realtime-collaborative-doc-editor/ │ ├── src/ │ ├── app.module.ts // Main module │ ├── document/ // Document module │ │ ├── document.controller.ts // Document controller │ │ ├── document.service.ts // Document service │ │ ├── document.entity.ts // Document entity (Mongoose) │ │ └── document.module.ts // Document module definition │ │ │ ├── auth/ // Authentication module │ │ ├── auth.controller.ts // Auth controller (login, register) │ │ ├── auth.service.ts // Auth service (JWT authentication) │ │ └── auth.module.ts // Auth module definition │ │ └── jwt.strategy.ts │ │ └── guards │ │ ├── jwt-guards.auth.ts // JWT guard for authentication │ │ │ ├── user/ // User module │ │ ├── user.controller.ts // User controller │ │ ├── user.service.ts // User service │ │ ├── user.entity.ts // User entity (Mongoose) │ │ └── user.module.ts // User module definition │ ├── socket.gateway.ts // WebSocket gateway │ │ │ └── main.ts // Entry point for the application ├── .env // Environment variables └── package.json // Project dependencies and scripts

VIDEO-DEMO URL ->

  1. Frontend :

    Part 1 - https://www.loom.com/share/ef97f7ba1e16435baf3506f7e2333ab8?sid=9ab4cb8c-39a9-48ea-9cde-c55c023b6e76

    Part 2 - https://www.loom.com/share/db0d9a09a1a64a1196e2fb717db1fea2?sid=82fe327b-9ff7-4d4b-88e8-871ac0c95c7b

  2. Backend : https://www.loom.com/share/d32ac1f69e454fbab57841eb05fe958a?sid=1b64a82b-9707-4481-908b-3f087d283069

PROJECT SNAPSHOTS ->

Screenshot (19)

Screenshot (21)

Screenshot (22)

Screenshot (26)

Screenshot (28)

Screenshot (33)

Screenshot (35)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.