Code Monkey home page Code Monkey logo

virtual-event-starter-kit's Introduction

Deploy with Vercel

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.

Built With

What’s New?

The virtual events starter kit now has added support for organising truly LIVE virtual events. You can quickly setup a live stage and invite speakers to interact with viewers. Live audio-video opens up a ton of possibilities with respect to what you can do with this template. You can use it for:

  1. Live Webinars
  2. Community Calls
  3. Hackathons
  4. Panel Discussions
  5. Multi-stage live conferences with a backstage (coming soon)

Clone and Deploy

Click the button below to clone and deploy this template on Vercel.

Deploy with 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.

Running Locally

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.

Stages

There are four different stages included in the seed data. Feel free to add or remove these based on your schedule. Each stage can be easily configured to be a Live Video/Audio experience or an embedded YouTube stream. (You can do all of these configurations via DatoCMS console)

Joining a stage

Visit /stage/a after entering your email you should see a "Enter your name" input form.

NOTE: by default, you will join as a Viewer

join

Click on Join and you should see "No Speakers Present". This is because only you have joined the Stage aka the "Room" as a viewer. A viewer does not have the permission to publish their audio and video. You can read more about roles in the sections below.

stage.png

Joining with different Roles

For this we pass a query param in url for eg: /stage/a?role=<ROLE_NAME>

  • Moderator: /stage/a?role=backstage

  • Speaker: /stage/a?role=stage

  • Viewer: /stage/a

So if you visit /stage/a?role=stage now you should see a Preview screen opening up. After joining you should be able to see yourselves. Open a new tab or invite others to host your next meetup, community calls, etc.

preview

Customize

Live Video

To learn more on how to customise the live video aspect of this template, refer to this document.

CMS

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:

Constants

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.


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:

virtual-event-starter-kit's People

Contributors

bowtiedheron avatar cfofiu avatar chibicode avatar deep-codes avatar enesakar avatar erikras avatar goncy avatar hugefunwoo avatar leerob avatar levimykel avatar lisilinhart avatar marionott avatar matheuss avatar smakosh avatar stefanoverna avatar thorwebdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

virtual-event-starter-kit's Issues

getting 404

where can I make changes to the model of what is being pulled i changed job to action and cannot find anywhere in the code where it is calling for that model type in datocms.

Role change to invitee doesn't persist audio/video status

When a viewer is invited to the stage, the pre-joining modal gives them the ability to toggle their audio and video before they join. But those settings don’t stand. Invitee’s audio video is always turned off when they join the stage.

Integrating Search Functionality in Event Starter Kit using Meilisearch

Adding a search functionality in an event platform to easily find speakers, specific talks, job opportunities, or even attendees for networking can be useful.

So I want to propose adding a search functionality with Meilisearch in the virtual event starter kit. The data from the CMS providers can be easily seeded into Meilisearch.

Here is a live demo link, where you can use Meilisearch to search for schedules, speakers, jobs, sponsors.

Live Demo: https://next-js-event-starter-kit.vercel.app/

Also linked is the Github repository for this integration:

Github Link: https://github.com/shivaylamba/NextJS-Event-Starter-Kit/

image

Error With Repo

Hi! Devs

I tried deploying this template to vercel and it worked! except when I tried registering - it didn't work at all. I am not sure what the issue is or if I need to set some things up, because it's not letting me register. I checked other forks and it seems that they are too facing it, not sure if it's because of the addition of superbase but it's really affecting a lot of users. I am currently relying on 100ms's fork of the virtual event starter kit as it was the only one that was working, please look into it as it's really affecting a lot of people @leerob @Deep-Codes @thorwebdev @chibicode

Note - Unless there are any additional configs required to be done beforehand or any setup, it would be awesome if you guys can explain it :D

With Warm Regards,
Solomon Shalom Lijo

Not allowing users to register

I am unable to register in the virtual event starter kit, even after adding all the necessary environmental keys ->
image
I am not sure what the issue is @leerob or anybody who can help me out would be amazing!

DatoCMS template Schema has been changed (virtual events)

I got this error while trying to build this template . I have used the template in datoCMS which pre seeds all the data.
But there seem to be few field removed for datoCMS

 {
    message: "Field 'isLive' doesn't exist on type 'StageRecord'",
    locations: [ [Object] ],
    path: [ 'query', 'allStages', 'isLive' ],
    extensions: {
      code: 'undefinedField',
      typeName: 'StageRecord',
      fieldName: 'isLive'
    }
  },
  {
    message: "Field 'roomId' doesn't exist on type 'StageRecord'",
    locations: [ [Object] ],
    path: [ 'query', 'allStages', 'roomId' ],
    extensions: {
      code: 'undefinedField',
      typeName: 'StageRecord',
      fieldName: 'roomId'
    }
  }

Redis-Vercel (Upstash) Config

How does one setup the integration?
The normal way (using the integration marketplace) doesn't allow the site to work.
Please help!!!

NextJS Conf 2021

Do you plan on updating the repository to have the look and feel of NextJS Conf 2021?

Issues on initial setup and install

Initial clone and npm install shows some dependency issues

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: virtual-event-starter-kit@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0-rc.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from @100mslive/[email protected]
npm ERR! node_modules/@100mslive/react-sdk
npm ERR!   @100mslive/react-sdk@"^0.0.6" from the root project

npm i --force && npm run dev

error - ./components/mobile-menu.tsx:22:0
Module not found: Can't resolve '@react-stately/overlays'
  20 | import cn from 'classnames';
  21 | import { NAVIGATION } from '@lib/constants';
> 22 | import { useOverlayTriggerState } from '@react-stately/overlays';
  23 | import { useOverlay, usePreventScroll, useModal, OverlayContainer } from '@react-aria/overlays';
  24 | import { useDialog } from '@react-aria/dialog';
  25 | import { FocusScope } from '@react-aria/focus';

Next JS Conf 2020 - Help

Hey Developers,

Could you explain to me how to add the exact style like the one shown here. Would be nice if anyone could help me on adding the rainbow color effect shown on the NextJS conf 2020 demo.

Thank You

Redirect present in next.config.js, causing all pages to be redirected to demo.vercel.events.

This causes all pages to redirect to demo.vercel.events, including in development.

async redirects() {
    return [
        {
            source: '/:slug*',
            destination: 'https://demo.vercel.events/:slug*', // Matched parameters can be used in the destination
            permanent: false
        }
    ];
}

I don't think this should be in the next.config.js, perhaps you should remove this and set up the redirects in your Vercel project.

Changing logo no luck

Hello,

I have been trying to make this file here https://s3.us-east-1.wasabisys.com/staticsnnj/conference/2023/MutualCON%20Logo%20%20(250%20%C3%97%2049%20px).svg the logo for the script but cannot seem to be able to this is what I have so far.

/**

  • Copyright 2023 SNNJ.
  • Licensed under the Apache License, Version 2.0 (the "License");
  • you may not use this file except in compliance with the License.
  • You may obtain a copy of the License at
  •  http://www.apache.org/licenses/LICENSE-2.0
    
  • Unless required by applicable law or agreed to in writing, software
  • distributed under the License is distributed on an "AS IS" BASIS,
  • WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  • See the License for the specific language governing permissions and
  • limitations under the License.
    */
    export default function IconLogo({
    backgroundColor = 'transparent',
    foregroundColor = 'var(--accents-1)',
    ...props
    }) {
    return (
    <svg
    width="100%"
    height="100%"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}

);
}

Can anyone help me in why it is generating this way: https://go.snnj.org/JMh0Ij

Error: Failed to launch the browser process! /tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

I'm running into and issue with the image rendering: "ERROR Error: Failed to launch the browser process!
/tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md"

This answer on SO suggest to use node v 14, but not sure if that's the correct resolution. Any ideas?

image

Originally posted by @thorwebdev in #88 (comment)

Speakers Cannot Be Created/Slug cannot Be Changed

Hi!

First, I got to say the template is just so good for event managers and developers to spin up something quickly for an event, which is very helpful! but I am facing an error in DatoCMS. The issue lies in the speaker section, as I cannot create a new speaker. As in, I can create a speaker but when I click on the speaker, it shows up as a 404 error "Page Not Found". Please check this video

I am not sure what's causing it, but I can't seem to change existing slugs either. Your help would be wonderful!

@leerob @Deep-Codes

With Warm Regards,
Solomon Shalom Lijo

OAuth CSRF Check

I was looking through the code and couldn't find where the CSRF check was being done in the OAuth flow. Should there be a check?

Failed to fetch API

By logging in at http://localhost:3000/stage/m

Whether to stage "a" "m" or any other, it throws me the following error.

`adapter Not a browser. vnull
[
{
message: "Field 'isLive' doesn't exist on type 'StageRecord'",
locations: [ [Object] ],
path: [ 'query', 'allStages', 'isLive' ],
extensions: {
code: 'undefinedField',
typeName: 'StageRecord',
fieldName: 'isLive'
}
},
{
message: "Field 'roomId' doesn't exist on type 'StageRecord'",
locations: [ [Object] ],
path: [ 'query', 'allStages', 'roomId' ],
extensions: {
code: 'undefinedField',
typeName: 'StageRecord',
fieldName: 'roomId'
}
}
]
error - lib/cms-providers/dato.ts (38:10) @ fetchCmsAPI
Error: Failed to fetch API
36 | // eslint-disable-next-line no-console
37 | console.error(json.errors);

38 | throw new Error('Failed to fetch API');
| ^
39 | }
40 |
41 | return json.data;`

Do you think they can help me? I think the problem is in DATOcms

Is there another site where the Next team put source for alter conferences?

I'd love to see techniques the Next team uses for their upcoming conference web sites. Like the new Caurosol showing speakers on the home page. That would make it easier for me to build my own next apps, as it's more real world then the examples folder. I also assume it has an extensive /api routing folder and that would be great to see how it's used well in production.

Installation with Prismic "Invalid theme provided"

I've been trying to install this with Prismic and I've been getting an "Invalid theme provided" error. I've tried to adjust the theme url but wasn't very successful.

prismic theme --theme-url https://github.com/vercel/virtual-event-starter-kit/tree/prismic --conf lib/cms-providers/prismic/README.md --custom-types lib/cms-providers/prismic/custom_types --documents lib/cms-providers/prismic/documents

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.