DEV Community

Elio Struyf
Elio Struyf

Posted on • Originally published at eliostruyf.com on

Running the CollabDays Benelux event on Azure Static Web App

This article recaps the CollabDays Benelux event that BIWUG and DIWUG organized together and happened on the 24th of October. We held the event virtually due to Covid-19, like most of the events in 2020. We decided that we wanted to do this as a virtual event together around May/June timeframe to make sure we could let it happen.

Our initial plan was to book a meeting room (the Benelux war room) to communicate and coordinate the event. Unfortunately, due to the increasing number of Covid-19 patients in the Netherlands and Belgium, we had to change those plans a week before the event. We decided that it would be best that we would host it from two locations.

Meet the team

Before I start giving some numbers, let me thank each team member for making this event a huge success. Running an event is not something you can do on your own. It takes a lot of effort from each one of us.

The CollabDays Benelux team
The CollabDays Benelux team

Thank you Karine, Jim, Rick, Thomas, Maarten, Bram, and Albert-Jan.

Group picture of the whole team
Group picture of the whole team

Stepping away from Microsoft Teams

Maarten explained it pretty well in Discord yesterday:

Why we were not using Microsoft Teams
Why we were not using Microsoft Teams

Going back to June, we outlined a plan to get the best community feeling during the event. Most of the attendees come to our event to connect with others and, of course, also to learn. That is why we wanted to go for Microsoft Teams meetings instead of Microsoft Teams Live events.

We figured out that this might create issues as attendees can accidentally start sharing or unmute themself. We experienced something else in other events because attendees do not join the meetings correctly and lose the ability to chat. Microsoft Teams Live events would solve the first issues, and so we formed a new plan.

Some time passed, and each one of us attended multiple virtual events. We all noticed that you do not get the community feeling we were aiming for with Microsoft Teams Live events. Besides that, the speaker’s experience is not always that simple for joining the right tenant and following up on questions. We had to think about how we could make our attendees feel more connected and provide an easy solution for our speakers to present their content.

Going for Streamyard and Discord

During Ignite, Luise Freese and I were interviewed by Microsoft with a tool called Streamyard. I was impressed with its simplicity and learned that Microsoft uses it for other community events like Hacktoberfest. After a couple of meetings and tests with the team, we agreed that Streamyard would be the tool to use.

You can compare Streamyard to OBS running in the cloud, but a lot easier to configure and maintain. Plus, Streamyard allows you to stream to many sources like Youtube, Facebook, Twitch, and more.

Info; The only downside we found is that videos in Streamyard are limited to 5min and 100mb. Our sponsor videos were about 6min and 250mb in size. To overcome this, we split all videos into two parts. Next time, we could create a PowerPoint that we keep rotating before/after each session on a VM.

To engage with our attendees and provide them a way to connect with the speakers and other attendees, we decided to use Discord. We went for Discord because it does not require you to have an account or application to start chatting.

Bringing the experiences together

To make it as easy as possible for our attendees, we chose to create a website. The website we wanted to create needed to fulfill the following requirements:

  • Easy to use
  • Switching between channels/sessions
  • View the schedule
  • Speaker overview
  • Sponsors overview
  • Links to the Discord channels
  • Links to the feedback forms
  • Code of conduct
  • And of course, it needed to be fast

Important: Our website for the CollabDays Benelux can be found here: https://collabdaysbenelux.eu.

The website couple of minutes before going live
The website couple of minutes before going live

How did we create the website?

As a big fan of Static Websites, I choose to create the event website with React and host it on an Azure Static Web App.

The front-end is developed by using React and Tailwind CSS.

On the back-end, the website makes use of Sessionize. Sessionize is the platform we in BIWUG use for all of our events to gather speaker submissions and create a schedule. The tool itself is excellent. It provides all the things you need for event organizers. On the website, we used the Sessionize APIs to visualize our schedule and speakers.

In the documentation, I read that data needed to be cached locally and be 100% sure that we would not get throttled or bringing the Sessionize APIs down. I choose to put an Azure Function in between to cache the data an extra time.

I created a config.json file that gets validated each minute on the client to perform changes on the website smoothly. Initially, I wanted to go for WebSockets, but as Azure Static Web Sites does not have this out-of-the-box available, I just went for a straightforward solution. This config.json has proven itself, as we could quickly push new alerts and update the channel/session links from Youtube.

Each change we did in the config took about 1-2 minutes before it was visible online.

GitHub Actions flows during the event which were unnoticeable for our attendees
GitHub Actions flows during the event which were unnoticeable for our attendees

Whole technology stack

  • React
  • Tailwind
  • TypeScript
  • Azure Functions
  • GitHub Actions
  • Azure Static Web Apps
  • Cloudflare

Website changes during the event

The website ran without any issues the whole time, never did it failed us, and we even pushed a couple of changes based on feedback from our attendees. Here are the top three changes I can recall:

  • Open external alert links in a new tab;
  • Links to the schedule and speakers overview should not redirect the user to channel 1;
  • Add a next session description in the channel overview.

Let us talk about the numbers

The numbers are just crazy. The website held up on a huge load and kept performing very fast.

During the event, I posted the following screenshot from Google Analytics:

Site statistics during the event
Site statistics during the event

After the event, we looked back at the number and asked ourselves if these numbers could be correct. A day after the event, I evaluated the numbers, and probably Google Analytics was not showing us the right numbers at that time. However, the final numbers are still high.

Number of pageviews

In total, we had 123000 pageviews, which meant that our attendees used channel switching a lot.

Total pageviews
Total pageviews

To be sure, I verified these statistics with the load on the Azure Web Apps, and there I saw a similar number of hits.

Page hits on Azure Web App
Page hits on Azure Web App

Unique number of people

Out of all these pageviews, we had 390 unique users on the website.

Unique visitors per country
Unique visitors per country

Busiest hour

The busiest hour was at 11 am, where we had a total of 135 attendees on the website. Followed by noon (104 attendees) and 10 am (101 attendees).

The number of attendees on each channel was equally spread.

Azure Functions called

To give you an insane number. The Azure Function for retrieving the schedule and speaker details has received one million hits.

One million Azure Function calls
One million Azure Function calls

Discord

On Discord, we had 220 active members who wrote more than 1200 messages altogether.

Thank you all

To wrap it all up, I want to thank each one of you that attended our event.

Thank each of the 21 speakers for showing up on time and presenting their valuable content to the attendees.

Each of our sponsors, because without their support, we could not make this event take place.

The fantastic team behind BIWUG and DIWUG. Finally, we did something which we wanted to do for years. We organized an event together and did not have to agree where it would occur, as there was only one option.

I hope to see you all next year, hopefully, in real life. Stay safe!

Top comments (0)