TownHall

Inspiration

With today's hybrid and remote workforce, it can be hard for employees to interact directly with leadership. Employees do not have the opportunity to ask important questions to company executives, while executives have trouble collecting direct feedback from the employees. Also, meetings with a mix of attendees in-person and remote, can make remote employees feel disconnected and struggle to have their voices heard.

With TownHall, we aim to solve this problem by connecting all employees with leadership through open Q&A sessions, bridging the gap between employees and executives, and promoting inclusion and diversity in the workplace.

We believe that open Q&A's allow employees to ask questions to leadership, building trust and an open culture; and it also allows executives to answer the most important questions, thus maintaining a healthy two-way communication with the employees.

What it does

TownHall is a Confluence app to create and manage events and audience questions. The three main users within TownHall are Admin, Presenter and Attendee.

As an Admin, you can create an event by entering the event name, event code and event timeline. You can also manage events by editing event settings, adding a Presenter to the event, sharing the event code with Attendees, and deleting the event. Within an event, you can manage event questions by pinning or unpinning a question, marking a question as answered, reopening an answered question, and deleting a question. And finally, you can view the event as a Presenter or as an Attendee.

As a Presenter, you can present an event in a special full screen Presentation mode, where you can pin a question being answered, and also mark a question as answered once it has been responded to.

As an Attendee, you can join an event with an event code, and within the event, ask questions, upvote questions, and also delete questions that you have previously asked.

In short, using TownHall, you can:

• Create an event
• Manage an event
  • Invite presenters
  • Share event code
  • Delete event
• Present an event
  • Pin a question
  • Mark a question as answered
• Join an event
  • Ask questions
  • Upvote questions
  • Delete questions

How we built it

We started analysis and design by outlining user workflows for each TownHall user using diagrams.io before diving deeper into wireframing with Balsamiq Cloud. This provided a solid foundation for our entity model, ensuring UI interactions made sense end to end.

The TownHall app itself is built as a Global Confluence Page app using the Forge development platform. We used Custom UI in React, Forge Storage and Bridge APIs, and a Custom Wrapper around many AtlasKit components. We also used Typescript and Vite locally, to get maximum type safety and development speed.

Challenges we ran into

We felt that a Global Confluence App made the most sense early on, as event Q&A naturally fits within Confluence's collaboration and knowledge page boundaries. However we ran into a few drawbacks with that approach - namely the HistoryAPI not being available for that module type, meaning we were not able to update the browser URLs, and instead had to rely on an internal hash-based router for page navigation.

The same missing API also had other side-effects that we didn't catch early on during development. For our join events workflow, we were unable to share direct event links/URLs with users, instead we had to build an alternate workflow using event codes as we only had access to the base url of our app. The same restriction also meant that we could not open new tabs/new URL's for features like Presentation Mode.

We devoted just one week of dedicated time to build TownHall. So we prioritized only high value features for MVP and left others out from this initial build. As this was our first fully featured app built with Forge, we did came across some limitations for data storage within Forge's storage APIs, and also restrictions around accessing email addresses. All in all, we enjoyed using the Forge platform and we have collated all our feedback into BunneyApps Feedback for Forge.

Accomplishments that we're proud of

We are very proud of TownHall's Presentation mode! It was a great challenge but we are very happy with the outcome. It shows that by thinking outside the box, Forge and Custom UI can be used to implement complex designs and render great outcomes, even if we are running inside a sandboxed iframe.

What we learned

We learned that Forge is a great development platform for building custom Confluence Cloud apps from scratch. We only had one week to build the TownHall app before the hackathon deadline, and Forge made it possible for us to build a fully-functional app, without having to worry about the added complexity of running a cloud service.

We were very happy to find out that we could use almost all the React/Typescript libraries that we wanted to, and with a little extra effort upfront, had a wrapper built around the Forge specific bridge API to allow us to develop our app locally. This rapidly sped up our development process, whereby we could make changes and see them instantly hot reloaded (thanks to Vite) without having to run a forge tunnel or deploy manually.

We also learned that creating an app representing interaction between multiple users was quite complex and involved a complicated workflow. We had to put on different hats to represent each of our users - Admin, Presenter, and Attendee, and make sure that we implemented end to end functionality for all users within the app.

What's next for TownHall

Next, for TownHall, we would like to create/share an event link with Attendees which they can use directly to join a TownHall event. We would also like to allow Presenters to present a TownHall event in a new tab. These changes will definitely be possible once Confluence Global Page apps support the history API. In our future releases, we would also like to add more ways for Attendees to engage with TownHall events - by adding features like live polls, quizzes and surveys.

Built With

• atlaskit
• forge
• react
• reactrouter
• typescript
• vite