Introducing Collab - Realtime Code Collabration tool .

Collab is Realtime code sync tool where users can collab to others developers to write code on a same time. Beside this, user can save written code snippets to the website by creating profile in the website.

Overview video

How it works

The workflow of application is describe by the following architecture diagram.

At first, the socket connection is established through client. When the user get connected to the socket, users write the code in Editor. And the code written in editor get saved in redis as a Redis JSON .

How the data is stored:

The collab's data is stored in JSON format based upon RediJSON. The overall mapping of data is configured by Redis-Om Node js package.

At first connection need to be established in redis cloud by:

import { Client } from "redis-om";
const url = process.env.REDIS_HOST;
const client = new Client();
try {
  const res = await client.open(url);
  console.log("Connected to redis !");
} catch (error) {
  console.log("failed connecting redis", error);
}
export default client;

Schema of Code

const codeSchema = new Schema(
Code,
  {
    code_title: {
      type: "text",
    },
    code: {
      type: "text",
    },
    code_doc: {
      type: "text",
    },
    user_id: {
      type: "string",
    },
  },
  {
    dataStructure: "JSON",
  }
);

Schema of user

const userSchema = new Schema(
  User,
  {
    user_name: {
      type: "string",
    },
    user_profile: {
      type: "string",
    },
    user_email: {
      type: "string",
    },
    google_id: {
      type: "string",
    },
  },
  {
    dataStructure: "JSON",
  }
);

All the controllers files that communicates to redis for various CRUD operation.

• Code's api
• User's api

How the data is accessed:

Since, The project collab is using redis-om package to communicate to redis database hosted on redis cloud, which have the diffrent commands for various CRUD operation :

Create a data

const code = codeRepository.createEntity(req.body);
const id = await codeRepository.save(code);

Read a data

const { user_id } = req.params;
  const myCode = await codeRepository
    .search()
    .where("user_id")
    .eq(user_id)
    .return.all();

Delete a data

await codeRepository.remove(req.params.code_id);

How to run it locally?

Prerequisites

• Node - v16.15.0
• npm - v8.18.0
• yarn -v1.22.18

Local installation

Go to /server folder (cd ./server) and then:

Manage all .env file

install dependencies

yarn install

Run server

yarn server

Go to /client folder (cd ./client) and then:

Manage all .env file

install dependencies

yarn install

run development mode

yarn dev

Locally,Collab runs in:

• Server localhost:5000
• Client localhost:3000

Deployment

This web app is deployed at:

• Netlify (Frontend)
• Heroku (For backend)

More Information about Redis Stack

Here some resources to help you quickly get started using Redis Stack. If you still have questions, feel free to ask them in the Redis Discord or on Twitter.

Getting Started

1. Sign up for a free Redis Cloud account using this link and use the Redis Stack database in the cloud.
2. Based on the language/framework you want to use, you will find the following client libraries:
   • Redis OM .NET (C#)
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Node (JS)
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Python
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Spring (Java)
     • Watch this getting started video
     • Follow this getting started guide

The above videos and guides should be enough to get you started in your desired language/framework. From there you can expand and develop your app. Use the resources below to help guide you further:

1. Developer Hub - The main developer page for Redis, where you can find information on building using Redis with sample projects, guides, and tutorials.
2. Redis Stack getting started page - Lists all the Redis Stack features. From there you can find relevant docs and tutorials for all the capabilities of Redis Stack.
3. Redis Rediscover - Provides use-cases for Redis as well as real-world examples and educational material
4. RedisInsight - Desktop GUI tool - Use this to connect to Redis to visually see the data. It also has a CLI inside it that lets you send Redis CLI commands. It also has a profiler so you can see commands that are run on your Redis instance in real-time
5. Youtube Videos
   • Official Redis Youtube channel
   • Redis Stack videos - Help you get started modeling data, using Redis OM, and exploring Redis Stack
   • Redis Stack Real-Time Stock App from Ahmad Bazzi
   • Build a Fullstack Next.js app with Fireship.io
   • Microservices with Redis Course by Scalable Scripts on freeCodeCamp