└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # GSoC-2022 2 | 3 |
4 | google-summer-of-code 5 |
6 | 7 |

8 | Create a ready-to-go easy to embed mini-chat React component. 9 |

10 | 11 |
12 | 13 |

14 | 15 | Project Abstract    16 | Deliverables    17 | Demo    18 | Contributions    19 | Blog    20 | Mentor    21 | Links 22 | 23 |

24 | 25 | I got a chance to work on a project called [EmbeddedChat](https://github.com/RocketChat/EmbeddedChat) which is an in-app chat solution to web applications needing a chat component to increase user engagement. 26 | 27 | From just an idea (proposal) to a complete product - 3 months of Google Summer of Code passed. 28 | 29 | I intend to maintain this repository as a final report summary of my GSoC work and a quick guide for all future GSoC aspirants. 30 | 31 | ## ⭐ Project Abstract 32 | 33 | **EmbeddedChat allows users to integrate RocketChat into their React web-based applications easily also providing an amazing developer experience while introducing in-app chat solutions.** 34 | 35 | ## 🚢 Deliverables 36 | 37 | The following are the deliverables of this project: 38 | 39 | 1. Creation of UI using RocketChat Fuselage design system. [NEW] 40 | 2. Providing real-time chat functionality using RocketChat node.js SDK. [NEW] 41 | 3. Authentication using RocketChat’s Google SSO with an additional choice for login (if the user already has an account). [NEW] 42 | 4. Adding EmojiOne Emoji Picker to the component to ensure cross-platform functioning of emojis.[NEW] 43 | 5. Using Rocket.Chat’s REST API to: [NEW] 44 | - Get channel details 45 | - Get the channel’s pinned messages 46 | - Get the channel’s starred messages 47 | - Get the channel attachments 48 | - Send a message to the channel 49 | - Get messages of the channel 50 | 6. Providing the functionality to pin/star/react to any message and mention users. [NEW] 51 | 52 | **All of the above deliverables were completed within the GSoC period. Yay! 🎉** 53 | 54 | ## 📺 Demo 55 | ### Sneak Peak 56 | ![randomgifec](https://user-images.githubusercontent.com/73601258/189498365-90bcc80a-4fb1-461b-a89e-99f1f8d31d95.gif) 57 | 58 | ### Providing real-time chat functionality using RocketChat node.js SDK 59 | 60 | https://user-images.githubusercontent.com/73601258/189498385-1346c5af-ec75-42a9-b864-f6f3b1e49d88.mp4 61 | 62 | https://user-images.githubusercontent.com/73601258/189498400-942f337a-0ee8-48e5-b539-70dc49d1e3e7.mp4 63 | 64 | ### Authentication using RocketChat’s Google SSO 65 | https://user-images.githubusercontent.com/73601258/180390437-b28ceacb-7f3f-4b80-84c1-4e1709b6cd35.mp4 66 | 67 | ### Adding EmojiOne Emoji Picker to the component to ensure cross-platform functioning of emojis. 68 | ![image](https://user-images.githubusercontent.com/73601258/189498628-119c0417-a8cd-4775-acdf-41fdd3b7bc62.png) 69 | 70 | ### Using Rocket.Chat’s REST API 71 | Took an object-oriented programming approach to build this. Created an API wrapper that is super simple to set up. 72 | [Here](https://github.com/RocketChat/EmbeddedChat/blob/main/src/lib/api.js) is the code. 73 | 74 | ### Providing the functionality to pin/star/react to any message and mention users. 75 | 76 | https://user-images.githubusercontent.com/73601258/189498498-602ddade-2883-43ac-91b7-9f63dc41cf84.mp4 77 | 78 | https://user-images.githubusercontent.com/73601258/189498502-1310fb1c-293e-4bb4-a208-7b523dfdd23f.mp4 79 | 80 | ## 🚀 Contributions 81 | 82 | ### PRs 83 | 84 |
85 | 86 | | PR Link | Description | 87 | | :-----------: | :------------------------------------:| 88 | | [PR #1](https://github.com/RocketChat/EmbeddedChat/pull/1) | [NEW] initialize project and base setup
| 89 | | [PR #4](https://github.com/RocketChat/EmbeddedChat/pull/4) | NEW: issue and pr template | 90 | | [PR #5](https://github.com/RocketChat/EmbeddedChat/pull/5) | IMPROVE: Responsiveness | 91 | | [PR #7](https://github.com/RocketChat/EmbeddedChat/pull/7) | NEW: sending and receiving msgs (the oop way) | 92 | | [PR #11](https://github.com/RocketChat/EmbeddedChat/pull/11) | Parsing emojis in message box | 93 | | [PR #12](https://github.com/RocketChat/EmbeddedChat/pull/12) | NEW: AUTH (google SSO) | 94 | | [PR #15](https://github.com/RocketChat/EmbeddedChat/pull/15) | NEW: Development documentation | 95 | | [PR #26](https://github.com/RocketChat/EmbeddedChat/pull/26) | [IMPROVE] UI/UX improvements | 96 | | [PR #40](https://github.com/RocketChat/EmbeddedChat/pull/40) | FIX: when host is https set useSSL as true | 97 | | [PR #41](https://github.com/RocketChat/EmbeddedChat/pull/41) | [IMPROVE] more options to be present whether or not its fullscreen | 98 | | [PR #46](https://github.com/RocketChat/EmbeddedChat/pull/46) | FIX: when cookies are there assume user present | 99 | | [PR #47](https://github.com/RocketChat/EmbeddedChat/pull/47) | CHORE: remove tech.co.html | 100 | | [PR #48](https://github.com/RocketChat/EmbeddedChat/pull/48) | Handling attachments | 101 | | [PR #44](https://github.com/RocketChat/EmbeddedChat/pull/44) | NEW: react to message | 102 | | [PR #42](https://github.com/RocketChat/EmbeddedChat/pull/42) | NEW: Pin and star messages 103 | | [PR #39](https://github.com/RocketChat/EmbeddedChat/pull/39) | Add format to all files 104 | | [PR #29](https://github.com/RocketChat/EmbeddedChat/pull/29) | NEW: CI/CD Pipeline to deploy the package 105 | 106 |
107 | 108 | ### My overall contributions at Rocket.Chat 109 | 110 | Besides my GSoC project I have been contributing prolifically to other Rocket.Chat projects - [RocketChat.js.SDK](https://github.com/RocketChat/Rocket.Chat.js.SDK), [RC4Community](https://github.com/RocketChat/RC4Community), [fuselage](https://github.com/RocketChat/fuselage), [Rocket.Chat](https://github.com/RocketChat/Rocket.Chat). 111 | 112 | ## 😎 Blog 113 | 114 | I have been writing blogs regarding my progress in GSoC. 115 | - [My journey with open source and lessons learned](https://dev.to/sidmohanty11/my-journey-with-open-source-and-lessons-learned-30e7) 116 | - [[PART-I] GSoC 2022 | Rocket.Chat | EmbeddedChat](https://dev.to/sidmohanty11/part-i-gsoc-2022-rocketchat-embeddedchat-3njh) 117 | - [[PART-II] GSoC 2022 | Rocket.Chat | EmbeddedChat](https://dev.to/sidmohanty11/part-ii-gsoc-2022-rocketchat-embeddedchat-15g3) 118 | - [Final Part: GSoC 2022 | Rocket.Chat | EmbeddedChat](https://dev.to/sidmohanty11/final-part-gsoc-2022-rocketchat-embeddedchat-37g8) 119 | 120 | ## 🎓 Mentor 121 | 122 | A big big thank you to my mentor for the guidance before and throughout GSoC. 🙏 123 | 124 | I learned beyond GSoC from him and am forever grateful to be mentored by him. 125 | 126 | - **Rohan Lekhwani** - [GitHub](https://github.com/RonLek). [LinkedIn](https://www.linkedin.com/in/rohanlekhwani) 127 | 128 | ## 🔗 Links 129 | 130 | - Read my EmbeddedChat project proposal that got me accepted to GSoC [here](https://docs.google.com/document/d/1YeAz-hzv-7NY5HApraz0lOCNj2_Vc-ys_w2qp3qd-nQ/edit?usp=sharing). 131 | 132 | - I also complemented it with Figma designs. Check them out [here](https://www.figma.com/file/hj0BqzAvB15zBv7A8fMYc9/RocketChat-ReactJS-Component?node-id=0%3A1). 133 | 134 | - My GSoC Presentation can be found [here](https://docs.google.com/presentation/d/1hNO-iGlA0nnyHS5o6XlgwGaYP7IgOtcHdg--HCFNABY/edit?usp=sharing). 135 | 136 | - Watch the above presentation in video - [here](https://www.youtube.com/watch?v=gcB5c6cvg9w&t=6s) ! 137 | 138 | ## ❤️ Support 139 | Learned something new today? Reciprocate the love. ⭐ this repo for good karma. 140 | 141 | ## 💬 Connect With Me 142 | Want to discuss about GSoC / Rocket.Chat / Open-source ? Let's connect! 143 |
144 | 145 | | **Student** | Sidharth Mohanty | 146 | |:--------------------|:-------------------| 147 | | **Organization** | [Rocket.Chat](https://rocket.chat/) | 148 | | **Project** | [EmbeddedChat](https://docs.rocket.chat/contributors/annual-contribution-programs/google-summer-of-code/google-summer-of-code-2022#rocket.chat-reactjs-fullstack-component) | 149 | | **GitHub** | [@sidmohanty11](https://github.com/sidmohanty11) | 150 | | **LinkedIn** | [sidmohanty11](https://www.linkedin.com/in/sidmohanty11) | 151 | | **Twitter** | [sidmohanty11](https://www.twitter.com/sidmohanty11) | 152 | | **Blogs** | [sidmohanty11](https://dev.to/sidmohanty11) | 153 | | **Website** | [sidmohanty11.github.io](https://sidmohanty11.github.io) | 154 | | **Email** | sidmohanty11@gmail.com | 155 | | **Rocket.Chat** | [sidharth.mohanty](https://open.rocket.chat/direct/sidharth.mohanty) | 156 | 157 |
158 | --------------------------------------------------------------------------------