An internal React app to manage workflows, data, and updates for the Webflow Customer Support team.
-min.webp)
I joined Webflow as an employee when it was undergoing rapid growth. We were hiring non-stop. As a result, we had to make quick decisions about how we would document internal workflows and other information the wider team needed to perform their daily tasks.
We landed on Coda as a solution. Although it was a good choice in the beginning, we quickly outgrew it. We had all this valuable information but it was difficult to navigate and searching just didn’t work. Finding information became a pain.
One of the perks of working at Webflow is 10% time. It's 4 hours a week to work on a new skill. I used this time to build a React app to address the pain the team was experiencing. My passion for solving this problem quickly turned into evenings and weekends. After 4 months, I had a solid product with several features that were specific to our use case.
Let’s dive into the details!
Add or remove the level of authorization for each user. A server-side cloud function is triggered to add/remove a token for a given user. The token is assigned to the cookie when the user signs in and this determines their level of access, what they can see and do in the app.
This is reinforced with database security rules to ensure users without sufficient permissions don’t perform unauthorized actions.
Managers and Trainers can send realtime in-app notifications to deliver crucial information to all users. This is possible with Firebase Firestore realtime database. When a new document is added, a cloud function triggers updates the document which forces the notification to be shown if it was hidden by the user.
Managers and Trainers can view all updates. They can also modify or delete updates.
Updates can be toggled to move items between new/past notifications.
Managers or Trainers can create new articles. Users on the same article are made visible to all users on that article. When a user begins typing, the Editor is locked for all other users. When changes are saved, realtime updates are sent and another editor can continue with the latest version of the article. Each article features a created and updated date. If the user is a Manager or Trainer, they can toggle Edit and Read mode.
Articles can be placed in Draft or Publish mode. Published articles will be available in Global search for all users. Draft articles can only be searched through by Managers and Trainers and they are not available to standard users. If an article is changed to Draft mode, an alert is added to that article notifying users that info may be outdated.
Deleting an article requires an extra confirmation step to finalize deleting the article.
Users can optionally view all articles by category.
Authorized users can create, update, or delete Article categories. If a category has one or more articles, it cannot be deleted until all articles are deleted in that category. Updating a category name changes the category name across all articles that reference that category. Each category shows an updated on date.
Deleting a category requires the CMD key to be held, to prevent accidental deletion.
Standard users can search through Articles with a global search feature accessible from all pages. Search results are highlighted as the user types.
Managers and Trainers can search through all Articles by category, draft or published, and by text search. Each article has a label indicating whether it’s in a draft or published state. Results are paginated to ensure performance is optimal.
Users can bookmark articles to save important information. Bookmarks can be searched through.
Each article has a bookmark button that can be toggled to add/remove an article from the users bookmarks.
An app of this level is typically built by an entire team, but I was able to build it myself, covering all the key areas. One of my main learnings from this experience was to use a state management library in a future build to simplify global state management.
