GSoC-2022
Create a ready-to-go easy to embed mini-chat React component.
Project Abstract
Deliverables
Demo
Contributions
Blog
Mentor
Links
I got a chance to work on a project called EmbeddedChat which is an in-app chat solution to web applications needing a chat component to increase user engagement.
From just an idea (proposal) to a complete product - 3 months of Google Summer of Code passed.
I intend to maintain this repository as a final report summary of my GSoC work and a quick guide for all future GSoC aspirants.
⭐ Project Abstract
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.
🚢 Deliverables
The following are the deliverables of this project:
- Creation of UI using RocketChat Fuselage design system. [NEW]
- Providing real-time chat functionality using RocketChat node.js SDK. [NEW]
- Authentication using RocketChat’s Google SSO with an additional choice for
<username, password>login (if the user already has an account). [NEW] - Adding EmojiOne Emoji Picker to the component to ensure cross-platform functioning of emojis.[NEW]
- Using Rocket.Chat’s REST API to: [NEW]
- Get channel details
- Get the channel’s pinned messages
- Get the channel’s starred messages
- Get the channel attachments
- Send a message to the channel
- Get messages of the channel
- Providing the functionality to pin/star/react to any message and mention users. [NEW]
All of the above deliverables were completed within the GSoC period. Yay! 🎉
📺 Demo
Sneak Peak
Providing real-time chat functionality using RocketChat node.js SDK
Authentication using RocketChat’s Google SSO
Adding EmojiOne Emoji Picker to the component to ensure cross-platform functioning of emojis.
Using Rocket.Chat’s REST API
Took an object-oriented programming approach to build this. Created an API wrapper that is super simple to set up. Here is the code.
Providing the functionality to pin/star/react to any message and mention users.
🚀 Contributions
PRs
| PR Link | Description |
|---|---|
| PR #1 | [NEW] initialize project and base setup |
| PR #4 | NEW: issue and pr template |
| PR #5 | IMPROVE: Responsiveness |
| PR #7 | NEW: sending and receiving msgs (the oop way) |
| PR #11 | Parsing emojis in message box |
| PR #12 | NEW: AUTH (google SSO) |
| PR #15 | NEW: Development documentation |
| PR #26 | [IMPROVE] UI/UX improvements |
| PR #40 | FIX: when host is https set useSSL as true |
| PR #41 | [IMPROVE] more options to be present whether or not its fullscreen |
| PR #46 | FIX: when cookies are there assume user present |
| PR #47 | CHORE: remove tech.co.html |
| PR #48 | Handling attachments |
| PR #44 | NEW: react to message |
| PR #42 | NEW: Pin and star messages |
| PR #39 | Add format to all files |
| PR #29 | NEW: CI/CD Pipeline to deploy the package |
My overall contributions at Rocket.Chat
Besides my GSoC project I have been contributing prolifically to other Rocket.Chat projects - RocketChat.js.SDK, RC4Community, fuselage, Rocket.Chat.
😎 Blog
I have been writing blogs regarding my progress in GSoC.
- My journey with open source and lessons learned
- [PART-I] GSoC 2022 | Rocket.Chat | EmbeddedChat
- [PART-II] GSoC 2022 | Rocket.Chat | EmbeddedChat
- Final Part: GSoC 2022 | Rocket.Chat | EmbeddedChat
🎓 Mentor
A big big thank you to my mentor for the guidance before and throughout GSoC. 🙏
I learned beyond GSoC from him and am forever grateful to be mentored by him.
🔗 Links
-
Read my EmbeddedChat project proposal that got me accepted to GSoC here.
-
I also complemented it with Figma designs. Check them out here.
-
My GSoC Presentation can be found here.
-
Watch the above presentation in video - here !
❤️ Support
Learned something new today? Reciprocate the love. ⭐ this repo for good karma.
💬 Connect With Me
Want to discuss about GSoC / Rocket.Chat / Open-source ? Let's connect!
| Student | Sidharth Mohanty |
|---|---|
| Organization | Rocket.Chat |
| Project | EmbeddedChat |
| GitHub | @sidmohanty11 |
| sidmohanty11 | |
| sidmohanty11 | |
| Blogs | sidmohanty11 |
| Website | sidmohanty11.github.io |
| sidmohanty11@gmail.com | |
| Rocket.Chat | sidharth.mohanty |