Submission : Git Talking
Tags: twiliohackathon, showdev
Published: 2020-05-01 03:54:18

[comment]: # "All of this is placeholder text. Use this format or any other format of your choosing to best describe your project."
[reminder]: # "Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community"
[important]: # "By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms"

# 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](https://dev-to-uploads.s3.amazonaws.com/i/2n93x4b6oviurind3w3j.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/erdl3n2pdef6vau02gbn.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/ah0h3ek84dads33ynk78.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uqwtf24dcjtt8lquuevr.png)

They can then communicate with messages.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r22tu0jqvm46wrmp371q.png)

Code can also be shared through the snippet section
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ao84nybiixqvi6ht92f2.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/8yx1rsbry1mwlfbzoaoi.png)
To get the latest code, the user can pull the remote code.

Channels will also have Checklist
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/80wwttc7ttg7dmaktmie.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/q8wnmh3gmg87fw7fg20t.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/x6d2edmglrm1zev0ipxq.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/7p8mbrykm2hz7ams3mve.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fg8qvf5tvid3ox081r4f.png)

## 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.
1. CSS. Whatever I learned(again!!) while making this project, I'm positive I'll have to learn again for the next one. 
1. 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
1. Engaging Engagements

## Link to Code and Setup guide

{% github projectescape/twilio-hack %}