Virtual Events Starter Kit

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

This platform is built upon three principles:

• Delegation: Running a conference is difficult – you have to delegate tasks to third-parties to ensure success. Certain elements of an online conference experience are tough to get right, and we'd rather lean on established, industry leading solutions.
• Flexibility: While delegating certain elements of the conference experience is helpful, it's also important to own the platform. That's why this template provides a flexible open-source codebase that can be modified for your event.
• Reducing Risk: It's inevitable something will go wrong during your event. This platform reduces risk by leaning on a dynamic site that outputs as static files using Incremental Static Generation. These static files are cached, ensuring your site is never down. Then, it uses API Routes to sprinkle dynamic content on top, which are hosted by a provider with 99.99% uptime.

Authentication and Database

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.

Authentication

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.

Running Locally:

• Set the Authorization Callback URL as http://localhost:3000/api/github-oauth on GitHub.
• On .env.local, set NEXT_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 as http://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".

On Vercel:

• Set the Authorization Callback URL as <your deployment’s URL>/api/github-oauth on GitHub.
• Set NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET on Vercel Project Environment Variables Settings for the production environment.
• Edit SITE_URL in lib/constants.ts to match your deployment’s URL (no trailing slash).
• Push the code to redeploy the Project on Vercel.

Database

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:

• Redis
• Supabase