Raven

Simple, open source team messaging platform

FOSS Hack 3.0

Before the Hackathon

The web app had the following features:

1. Authentication
2. Creating a channel
3. Joining a channel
4. Adding and removing a member
5. Sending messages (only text based) in channels and private messages.

---

During the Hackathon

The mobile app was set up using Capacitor, Ionic and React: 1. Set up authentication on the mobile app 2. View all channels, private messages and profile on mobile app 3. View a channel's messages (text, images and files) on the mobile app 4. Send a message on a channel.

New features were added to the web app: 1. Ability to create an "Open" channel - where all users are members by default. 2. Ability to delete a message previously sent 3. Ability to edit a message 4. Ability to send images and files by clicking on the file "plus" button 5. Ability to send images and files by dragging and dropping them into the chat interface 6. Image previews in the chat interface 7. Ability to download files from the chat interface 8. Styling improvements: dark mode for emoji picker, highlight for mentions in messages (@user), dark mode support for Quill mentions menu 9. General channel is created when app is installed. 10. Bug fix: empty messages cannot be sent 11. Bug fix: duplicate channel names cannot be created (added validation) 12. Bug fix: design issues fixed on the chat interface to make the chat messages responsive according to height of input.

---

What's not working (yet)

Mobile app: 1. Channels cannot be created and channel details cannot be viewed 2. Members cannot be added to or removed from channels 3. Files and images cannot be sent.

Moreover, the mobile app authentication needs to be updated to use Bearer tokens because of a cookie issue on iOS. The mobile app works on Android.

Web app: 1. Improvements to be made on direct message listing. 2. Lazy loading and scroll to load for older messages.

---

Raven is a simple work messaging tool that is built using Frappe Framework and can be installed on any new or existing Frappe site (e.g. in addition to ERPNext or Gameplan). It is designed to help teams collaborate and communicate with each other and get work done. Teams can create their own channels (publically viewable or private) and send messages, emojis, files and images.

---

Motivation

Raven was born out of a need to have a simple work communication tool that could replace Slack for us at The Commit Company. Most work communication tools in the market had the following problems:

1. They include many features like video calling, audio sharing on top of work messaging which are not required for small teams. However, these features are expensive to build and run.
2. Hence, they require payments for every user every month - regardless of how much time a user uses the tool or how many messages they send. This meant that we would have to pay for "mostly inactive" users as well.
3. We were already using ERPNext hosted on Frappe Cloud for our operations. Since all our users were already on ERPNext and we were paying for the server, we thought that a simple Frappe app can solve our work communication problem - and we feel there are many other teams and organizations who would benefit in a similar way.

---

Features

1. Send messages to all members in your organization (in an "open" channel), or just in your team in a private channel.
2. Create new channels for your team and your team members.
3. Send text messages 💬, code blocks 💻, emojis 😆, files 📑 and images 📸.
4. Mention users in your messages with "@"
5. Don't strain your eyes 👀 - Raven supports dark mode 🌙
6. Collaborate on the go with the Raven mobile app 📱 (in progress).

---

Tech Stack

Raven is built using the Frappe Framework - an open-source full stack development framework.

These are some of the tools it's built on: - Python - Redis - MariaDB - Socket.io

The frontend is built using React and the following tools: 1. ChakraUI - UI components 2. frappe-react-sdk - simple React hooks to interface with a Frappe framework backend - built and maintained by us at The Commit Company. 3. react-icons - Icon set 4. Framer Motion - Animations 5. react-quill

The mobile app is built using Ionic, Tailwind CSS and Capacitor.

---

Installation

Since Raven is a Frappe app, it can be installed via frappe-bench on your local machine or on your production site.

Once you have setup your bench and your site, you can install the app via the following commands:

bench get-app https://github.com/janhvipatil/Raven.git
bench --site yoursite.name install-app raven

Post this, you can access Raven on your Frappe site at the /raven-app endpoint (e.g. https://yoursite.com/raven-app).

We plan to publish Raven to the Frappe Cloud Marketplace soon.

Local development setup

To set up your local development environment, make sure that you have enabled developer mode in your Frappe site config.

You also need to disable CSRF (add ignore_csrf: 1 in your site_config.json) since the React web server will not have any CSRF token in live reload mode. If you are working on the mobile app, you would also need to allow CORS (add allow_cors: "*" in your site_config.json). Please note that this is only for the local dev setup - not meant for Production.

You can start the React live web server by:

cd frappe-bench/apps/raven
yarn dev

Your local dev server would be running at http://localhost:8080.

You can also run the mobile app on your browser by:

cd frappe-bench/apps/raven/mobile
yarn install
yarn dev

---

Future Plans

We are currently working or will be working on the following features. Please head to our Github issues page and feel free to contribute:

1. Mobile app for Raven
2. Open-graph link previews
3. Push notifications
4. Integration service - allowing other applications to create bots and send messages. Some popular services we are looking at are Github, Linear, [Sentry][https://sentry.io], [Frappe Desk][https://frappedesk.com].

---

Reporting Bugs

If you find any bugs, feel free to report them here on GitHub Issues. Make sure you share enough information (app screenshots, browser console screenshots, stack traces, etc) for project maintainers to replicate your bug.

---

License

AGPLv3

---

Maintainers

Maintainer	GitHub	Social
Janhvi Patil	janhvipatil	@janhvipatil_
Aditya Patil	TITANiumRox
Nikhil Kothari	nikkothari22	@nik_kothari22