This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 live attendees. It includes the following features:
- Multiple stages - with the ability to add multiple sessions on each stage
- Each stage can be configured as -
- An embedded YouTube stream OR
- A live interactive audio-video experience powered by 100ms
- 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
- Framework: Next.js
- CMS: Prismic CMS
- Deployment: Vercel, Netlify
- Authentication: GitHub OAuth
- Database: Supabase
Click the button below to clone and deploy this template on Vercel.
You’ll be asked to install the 100ms with DatoCMS integration. It lets you sign up or log in to 100ms and DatoCMS, and connects your DatoCMS and 100ms account to vercel. In a single integration, you will be able to deploy a fully working template that contains all the elements of the virtual events starter kit.
NOTE: Before this setup make sure to deploy the project using 100ms + DatoCMS integration to speed up the setup process.
After the project is deployed on Vercel, you can find DATOCMS_READ_ONLY_API_TOKEN
and NEXT_PUBLIC_HMS_TOKEN_ENDPOINT
already setup in the environment-variables section in project settings. The integration also sets up the rooms, templates & roles associated with it.
First, to set local environment variables you can either use Vercel CLI vercel env pull or just manually copy paste them.
cp .env.local.example .env.local
Then install the package and run the development server:
yarn install
yarn dev
Open http://localhost:3000 to see the landing page.
Environment variables determine which CMS to use. See lib/cms-api.ts for details and .env.local.example
for all environment variables. The demo (demo.vercel.events) uses DatoCMS, but we also have support for:
- Agility
- Contentful
- Prismic (Instructions)
- Sanity
- Storyblok
- Click the following link to create the space for this starter kit in Storyblok: Create Event Space
lib/constants.ts
contains a list of variables you should customize.
Note - In case you're looking to add live audio-video to the events template, we'd recommend you to move ahead with DatoCMS for a seamless integration experience. We've created a dato + 100ms integration that will help you to integrate both 100ms and DatoCMS to your vercel account in a few clicks.
Some features won’t work until you set up authentication and database. The demo (demo.vercel.events) uses GitHub OAuth for authentication and Redis for database. You can use different providers as you see fit.
You need to have GitHub OAuth set up to be able to customize the ticket after signing up on the registration form.
First, create a GitHub OAuth application to use for authentication.
- Set Authorization Callback URL as
<your domain>/api/github-oauth
- After creating the OAuth app, create a client secret.
- Set the Authorization Callback URL as
http://localhost:3000/api/github-oauth
on GitHub. - On
.env.local
, setNEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID
as the Client ID of the OAuth app. - Set
GITHUB_OAUTH_CLIENT_SECRET
as the Client secret of the OAuth app. - Finally, make sure the
NEXT_PUBLIC_SITE_ORIGIN
environment variable is set ashttp://localhost:3000
. This is required to get the OAuth popup to work locally. - Restart the app (
yarn dev
) after editing.env.local
.
Once it’s set up, sign up using the registration form on the home page (not on a stage page) and then click "Generate with GitHub".
- Set the Authorization Callback URL as
<your deployment’s URL>/api/github-oauth
on GitHub. - Set
NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID
andGITHUB_OAUTH_CLIENT_SECRET
on Vercel Project Environment Variables Settings for the production environment. - Edit
SITE_URL
inlib/constants.ts
to match your deployment’s URL (no trailing slash). - Push the code to redeploy the Project on Vercel.
You need a database to save user data and enable the following features:
- Generating a unique ticket number for each email when signing up on the registration form. If no DB is set up, it’ll always be
1234
. - Generating a unique ticket image or ticket URL after signing in with GitHub. If no DB is set up, each ticket image or URL will show generic data.
Environment variables determine which database to use. See lib/db-api.ts for details and .env.local.example
for all environment variables. There's support for: