Introducing a new Strapi Template for the Virtual Event Starter Kit

If you already visited the StrapiConf website, the website structure and look and feel might look familiar to you. And that's because, in order to provide a unique experience for the StrapiConf attendees, we decided to use the Virtual Event Starter Kit built by the Vercel team for Next.js Conf with Strapi as the backend of course.

Today, we’re happy to announce the release of a new template so that others can easily create new Strapi projects pre-configured to work with Vercel's Virtual Event Starters Kit. We are also releasing a second template that will have some of the added functionalities that we came up with for the specific needs of the StrapiConf.

In this blog post, we’ll first share the reasons why we decided to build on our Event platform on top of this awesome Event Kit. Then, we’ll explain how you can easily use this powerful open-source stack to power your future virtual events. Finally, we’ll summarize what you get out of the box from Vercel Kit and what we have baked in the Strapi template to make your life better.

Build vs Buy - why we decided to build?

Back in November 2020, when we first announced StrapiConf, we had no idea what platform we were going to use.

As part of our research and event platform benchmark, we evaluated two different options: Hopin and Bevy. Both platforms provide a very good attendee and sponsor experience (bonus point to Bevy for their Community focus) and would have worked just fine.

However, both platforms are fairly expensive and closed source so you don’t have much room for customization and all your event information gets lost as soon as the event is over. Even if we had decided to use Hopin as our event platform, we would have still needed to build a conference website which is no small task.

At Strapi, we are also very serious about dogfooding our product from the Strapi website to the way we manage the Strapi Enterprise Edition license server, so the decision to use Strapi for our first user conference was quite natural. And we thought from the beginning that we could open-source the work we did for the community, so here it is!

Let's dive into the different options we got you and how to get started.

Getting Started with this Strapi Template for the Vercel Virtual Event Kit

1. Create your Strapi project

First, use the CLI to create your Strapi Template project. Open your terminal and:

Using Yarn:

yarn create strapi-app my-app-name --template https://github.com/strapi/strapi-template-event-vercel

Using NPM

npx create-strapi-app my-project --template https://github.com/strapi/strapi-template-event-vercel

The CLI will create a monorepo, install dependencies, and run your project automatically. The Strapi backend server will run here => http://localhost:1337.

2. Launch the Vercel frontend kit locally

To install the frontend locally, follow the instructions from the Vercel’s Virtual Event Starter Kit’s readme:

• Clone the repo locally
• Create a .env.local file and add your localhost on STRAPI_API_URL=http://localhost:1337
• Launch the project

1yarn dev

💡 Make sure to remove the API keys from the other CMSs.

If you need to deploy your application, check the documentation to find how to do so on your preferred platform. You can also follow this tutorial to learn how to deploy a Strapi API on Heroku or this webinar to learn how to deploy on Digital Ocean.

What you get out of the box and what we have added

This starter kit is based on the following stack:

Framework:

• Next.js
• CSS Modules
• TypeScript

CMS: Strapi

Videos: YouTube

Frontend Deployment: Vercel

Authentication: GitHub OAuth

Database: Redis

Out of the box, the virtual event starter kit includes the following features:

• Multiple stages with an embedded YouTube stream
• Sponsor expo, including individual virtual booths
• Career Fair, allowing attendees to network and find job opportunities
• Ticket registration and generation
• Speaker pages and bios
• Schedule

Check out the GitHub repo for this Strapi template here.

We also created another template with added functionalities that we implemented on the StrapiConf event site.

Downloadable card for speaker / sponsor

In the process of creating the StrapiConf website and resulting Event template, speakers and sponsors are able to download cards with their details to promote their talks on Social Media or wherever they see fit.

So we added that possibility just by clicking on a CTA on each speaker or sponsor page.

Customizable and editable navigation

To allow complete ownership and autonomy to contributors, the navigation has been made completely customizable in the Strapi admin panel by defining the URL and label of each section in a Single Type Global.

SEO settings

The last functionality made available in the template is an all-global page setting including SEO meta-titles, meta-descriptions and meta-images. They have been made customizable directly from the Strapi admin in a Collection Type PageSettings.

You can use the StrapiConf template on these GitHub repos:

• StrapiConf Admin Template
• StrapiConf Next.js Template

We hope you’ll find these templates useful, and feel free to contact us in the comments below if you have any questions, or during the StrapiConf on Discord.

See you soon,