One day I went on devpost and saw a hackathon challenge by, a company I know for a long time. I was intrigued by the professional setup, great prices and their project management tool so I decided to take a deeper look.

After spending some time on their platform I realised that there isn’t any possibility to have an - not goal oriented - chat with other members on the platform. You can chat about specific items or topics but always with an audience. After searching through the app store and googling in their support forums I decided to give it a try. Not everybody likes slack.

What it does

It is a simple, compact and robust 1+1 Messenger, that runs solely on infrastructure.

Some features are:

  • Close to Realtime updates
  • Unread Message functionality
  • Emojis
  • Giphy Integration
  • Conversation Starter Suggestions
  • Dark Mode
  • Notification System
  • Great UX for typing, tabbing with smart local storage caching of settings and messages.

I believe that especially during COVID-19 non goal oriented communication can give a lot of meaning so I sketched a concept how this could be handled on the platform. Some key things that were important to me:

  • Sustainability: I didn’t want to use any kind of infrastructure that needed external hosting or any other services that needed attention. The application should live in only, no other services involved.
  • Robust & Simple: The result of the project should be a finished, simple and lovable product incl. zero config setup, this will be the reason why many people will try it.
  • Challenge myself: I know some reactJS, but I have never built a messenger - it is important that in terms of UX the messaging experience is close to other messengers.

How I built it

After getting to know the documentation by heart I noticed the freshly released Beta Storage API for storing information on directly -> this could be my data storage, signaling channels, etc.

I know some things about key value databases, but I was searching for information on how to set up a messaging system on top of that. I did find some examples on Redis, but always with the possibility to query keys, which was not an option.

This moment I realized it will be much harder than anticipated, but I was already too deep into it so I started building my own data-access-layers on top of the API. Active Chats, Unread Notifiers, close-to-realtime messaging updates - a rabbit hole with lots of Promise thinking.

The Core functionality of this app is the MondayChatDataLayer.js, which abstracts Database functionality into a parallel client side API processing. The monday storage API is the key_value storage, that is requested via HTTP requests, therefor parallel data requesting was part of ensuring a performant and good UX for the messaging experience.

This project only uses a few libraries including some monday components, I hope the independent and open source oriented setup of the application will give trust and keep it useful for some users out there, I already find some people in the community that showed interest in doing some alpha testing this week.

Challenges I ran into

  • Data Modeling on key_value storage Endpoints
  • Using Notifications without handling specific items
  • Learning iMovie to have something to present

Accomplishments that I'm proud of

  • Creating a robust solution on difficult terrain
  • Having Accessibility always on my mind when designing applications.

What I learned

  • Messengers are probably the hardest thing to build -> just because most of us use them every single day and the expectations on UX are massive, minor things will drive away the interest.
  • Dark mode Integrations don't take as much time as I thought
  • App Ecosystems are hard, a lot of effort is necessary to deliver something with proper quality. The "understanding" phase is something that I didn't calculate in my efforts. (including UX/Design understanding)

You can see all my struggles on

What's next for Careful Chat

  • I have some Alpha/Beta Testers in the community and I am curious if they find it useful
  • If it sparks some interest, I will invest a couple of days more to add user-requested features. If somebody wants to contribute, I will invest time to value the participants effort.

Built With

  • emoji-picker-react
  • giphy/js-fetch-api
  • giphy/react-components
  • monday-ui-react-core
  • react
Share this project: