DEV Community

loading...

Submission : Git Talking

projectescape profile image Aniket ・Updated on ・4 min read

What I built

Git Talking

Git talking is an application that helps you manage your GitHub projects by providing a platform to interact with other contributors by having features like Chat for discussion, Code Snippet Share for fast exchange of code and logic and CheckList to manage completed and pending tasks.
Subchannels for individual files of the repository can also be made to get new instances of Chat, Snippet Share and CheckList that can be used to have those file specific exchanges.

Use Case

Search Channel Page
This is the page user will see after signing in through Github.
On left the user's own channels will be shown and on right, user can search for other channels to join.

To create a new channel, the user can press "Create New Channel"
Alt Text
All repos for which channel hasn't been made will be shown here.
User can then select a repo to create a new channel for it.

Alt Text

Another user can then search for this channel by either the username of the owner or the repo name and join

Alt Text

They can then communicate with messages.
Alt Text

Code can also be shared through the snippet section
Alt Text
Here the user will be greeted with a code editor like interface with syntax highlighting and shortcuts.

To publish the changes made by any user to remote, Snippet has to be pushed. Upon pushing, other users will see something like this.

Alt Text
To get the latest code, the user can pull the remote code.

Channels will also have Checklist
Alt Text
This will be synced with other users as soon as some change happen

Also, chat will notify the members if changes are made to Snippet or CheckList
Alt Text

Each Channel has subchannels.
General is the default subchannel created at first for every repo.
Each subchannel has its independent Chat, Snippet Share, and Checklist

To create a new subchannel the owner of the repo will see an option to create subchannel
Alt Text
Subchannels can only be created for files and not for directories.

The non-owner user can then join subchannel by listing all unsubscribed subchannels
Alt Text

Alt Text

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I built this app using the PERN stack and GitHub user, repos and content API.

Chat was implemented using Twilio Programmable Chat.

Although it could've been done without Postgres, I still used it to store all the created channels and user-channel relationships as I wasn't able to find any way by which subscribed channels can be fetched by applying a filter using the Twilio web client and it was driving me crazy that all the channels are being fetched again and again.

Code Snippet Share and CheckList were made using Twilio Sync.

For Snippet Share I found a cool library named "@monaco-editor/react" which is also used by VS Code!!

Problems I faced

  1. I also implemented functionality to delete channels, but since it was a little buggy, I commented it out for the final submission.
  2. CSS. Whatever I learned(again!!) while making this project, I'm positive I'll have to learn again for the next one.
  3. Rolling Release Distros are great, but they do come with their cons. I updated node to v14 without noticing ( I literally have to type yay to update my packages, and I have a bad habit of doing that just for fun ) while building the project and had to spend at least a couple hours trying to figure out what had happened. Apparently, v14 has some breaking changes which wouldn't let me connect to postgres. This is the reason why I have provided a legacy package.json in my project so that people with older versions can run it.

Category Submission

  1. Interesting Integrations
  2. Engaging Engagements

Link to Code and Setup guide

GitHub logo projectescape / twilio-hack

Manage your github projects by having a platform to interact with other contributors

Git Talking

Git talking is an application that helps you manage your github projects by providing a platform to interact with other contributors by having features like Chat for discussion, Code Snippet Share for fast exchange of code and logic and CheckList to manage completed and pending tasks Subchannels for individual files of the repository can also be made to get new instances of Chat, Snippet Share and CheckList that can be used to have those file specific exchanges.

Dev post for the project

Note

  1. This App uses Twilio services to function, so twilio specific keys are needed.
  2. This App is setup using node.js v14 . If you are using an older version of node ( < 14 ), see legacy setup towards the end.

Local Setup

  1. Rename dev.example.js(./config/keys/dev.example.js) to dev.js (./config/keys/dev.js) and fill values for the keys with values xxx.
  2. Open a terminal in the root…

Discussion (0)

pic
Editor guide