Muddy is the browser that makes teamwork easy. It integrates a browser and a chat app into one. As a Founding Design Engineer. I collaborated with a design contractor and one other engineer to create Muddy I was responsible for the implementation of the front-end UI and real time chat system. I worked on taking brand guidelines, icons and rough sketches to create a design system that could be used across the entire application, prototyping and testing new features and interactions, and working with the team to create a cohesive and delightful user experience. Tech Stack included React, Recoil, GraphQL, Redis and MongoDB in addition to a custom Chromium fork with C++/JS bindings to access browser capabilities. We used Figma for managing the design system and Framer Motion for animations.
Muddy is built on top of the Chromium browser, meaning it has all the features of a modern web browser, like extensions, web apps, and compatibility with all websites. Special C++ and JavaScript APIs were implemented on a custom Chromium fork to enable access of browser capabilities through web UI. This allows us to create a new browser by using a traditional React front-end stack with a custom build process.
In Muddy, we've built a chat feature right into the browser. This means you can talk to your team without having to leave your work or open a new app. To make this happen, we implemented a real-time chat system using graphql subscriptions, redis pub/sub, and Ably RealTime API for presence features. This allowed us to create a chat system that was fast and reliable.
Muddy features a sidebar for your team projects and a "dock" for your personal tabs, simplifying the process of sharing tabs with your team. The app incorporates multiple drag-and-drop interactions to facilitate easy sharing and organization of work.
On your Muddy dashboard you get one view to see what projects others are focused on, what files they’re using across your projects, and what’s most important across the team right now. We implemented a custom event system to track user activity and displayed it in a meaningful way for the user.
Search across all your tabs and messages. Because Muddy is a browser and chat app in one, we can search across all your tabs and messages at once. This makes it easy to find what you’re looking for without having to switch between apps. We implemented a custom search index using Elasticsearch along with a custom search ranking algorithm for your browser history and chat messages.