Implementing Real-Time Comment Editing For Paste, a Magical Slide Creator Tool

Client
WeTransfer
Role
Front-end Developer
Technologies
React
TypeScript
Redux
WebSockets
Ruby on Rails

Paste was a product in WeTransfer's suite of creative tools aimed at automating design for presentations.

Paste's main product promise was the speedy creation of well designed presentations. Much of the layout and formatting was done "automatically", abstracting away granular design control from the user. Paste also enabled teams to create together. They could edit decks, leave comments or drop emoji reactions on slides — both real-time and asynchronous collaboration was supported.

Role & Contribution

During my time in the Paste team I contributed with planning and building a handful of features, and implemented overall UX-improvements across the stack.

The main feature I worked on was an adjustment to the real-time commenting functionality. Paste users could leave comments on their slides, for example to add feedback or open tasks. This was a helpful feature when collaborating on slide decks with several people, as they were also able to tag each other.

While the commenting functionality had existed for a while, it wasn't possible to edit or delete comments. This adjustment was, understandably, one of our most demanded feature requests at the time. Although not too technically complex, it has been one of the most rewarding features I've shipped to this day.

Paste Onboarding Video

Technical Challenges

The main challenge while working on the feature was the fact that it touched all parts of the application architecture, which I still had to get familiar with, as I had just joined the team.

Editing or deleting existing comments required to connect the user interaction on the front-end with a new Redux reducer, which then called a new UPDATE endpoint in our Ruby on Rails back-end, which eventually executed the database query.

Additionally I had to make sure that we managed permissions correctly, only allowing users to edit or delete their own comments. And, lastly, I had to guarantee that all updated comments get populated in real-time to all remaining users of the team.

Results

The reason why I fondly remember this feature, is that we got very positive user feedback after shipping our improvement. It was rewarding to see that a pain point has been solved for many people.

Read More

Refactoring a web payments checkout flow from a monolith into a stand-alone service

Streamlining the feedback-loop between creatives and their clients with Portals & Reviews

Why we’re called Studio F3 - the extraordinary story of Dame Stephanie Shirley