Virtual Event Starter Kit – Vercel
Tags: javascript, react, typescript, tutorial
Published: 2020-12-21 02:23:00

I attended [Next.js Conf 2020 ](https://nextjs.org/2020/conf)and was impressed by the high-quality content and virtual conference setup. It was streamed all around the world and provided an opportunity to share the best practices, end-user stories, and strategies for frontend developers and their organizations. All this required a certain conference platform AND instead of purchasing a solution, "success depended on collaboration".

## Next.js and Vercel

Frontend development pioneer Vercel this week announced and introduced the [**Virtual Event Starter Kit**](https://vercel.com/virtual-event-starter-kit) used to run Next.js Conf 2020, with 80,000 registrants and 40,000 live attendees. 

**Virtual Event Starter Kit** is a product of collaboration between marketers and developers using [Next.js](https://nextjs.org/) and [Vercel](https://vercel.com/).





![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jphvev3tp7sd1wzo4qy3.png)
# Launch your event and scale to any size



You can clone, deploy, and fully customize as you like for your online event. Basically, it 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pzuqv37v6kzmmstov095.png)

## Built With
Framework: [Next.js](https://nextjs.org/)
[CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support)
[TypeScript](https://nextjs.org/docs/basic-features/typescript)
CMS: [DatoCMS](https://www.datocms.com/)
Videos: YouTube
Deployment: [Vercel](https://vercel.com/dashboard)
Authentication: [GitHub OAuth](https://docs.github.com/en/free-pro-team@latest/developers/apps/authorizing-oauth-apps)
Database: [Redis](https://redis.io/)

#Run Locally
First, set local environment variables. A read-only DatoCMS access token is included and you can use in .env.local.example.
```cp .env.local.example .env.local```
The next step is to install packages and run the development server:
```
yarn install
yarn dev
```

Open http://localhost:3000 with your browser to see the result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tsn4umsuh63uobvuuhv7.png)


# STEP 1: Clone and Deploy

[Click here](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvirtual-event-starter-kit&project-name=virtual-event-starter-kit&repository-name=virtual-event-starter-kit&demo-title=Virtual%20Event%20Starter%20Kit&demo-description=Jumpstart%20your%20virtual%20event%20and%20scale%20to%20any%20size%20with%20Next.js%20and%20Vercel.&demo-url=https%3A%2F%2Fdemo.vercel.events%2F&demo-image=https%3A%2F%2Fdemo.vercel.events%2Fdeploy.png&integration-ids=oac_I1h8Dm9Mf30VNb3xQ0hebYvS&external-id=%7B%22manifest%22%3A%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fvercel%2Fvirtual-event-starter-kit%2Fmain%2Fdatocms.json%22%7D) to clone and deploy this template on Vercel:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7o9ju1ohdvxp5bfpt6fl.png)

You’ll be asked to install the [DatoCMS](https://www.datocms.com/) integration that lets you sign up or log in to DatoCMS and create a new DatoCMS project based on the data, for example, speakers, stages, etc.

DatoCMS is a cloud-based headless CMS designed to work with static websites, mobile apps, and server-side applications of any kind.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5r44komvowi2wrasc34e.png)


As simple as that first virtual conference or event has been deployed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t8cwibqssgecqlv577ls.png)

# STEP 2: Customize for your needs
Use defaults or choose your own database, authentication, and headless CMS.

### CMS
You can modify the code to use a different content management system, check here `lib/cms-api.ts` for details.

### Constants
`lib/constants.ts` contains a list of variables you should customize.

### Adding Discord Chat

If you'd like to add similar functionality to your event, you can use the API route to fetch messages after creating a Discord bot. More info and documentation can be found [here](https://github.com/vercel/virtual-event-starter-kit)

### Authentication 

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 the database. 

This is a very cool feature 😎: Generate a unique ticket image with your GitHub Profile, and ticket URL that can be shared on Twitter, LinkedIn, or Download. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lp45yl6wwrmf637e3vjn.png)

# Conclusion

Virtual events and platforms may be the norm post-pandemic. It’s evident that the coronavirus pandemic has changed what normal looks like for us all, and the events and conference industry is no different. To learn more about Virtual Event Starter Kit – Vercel and check the documentation [click here](https://github.com/vercel/virtual-event-starter-kit). 

📣This week Vercel [announced](https://vercel.com/blog/series-b-40m-to-build-the-next-web) an additional $40 million in series B funding to be used "to help everyone build the next web". 

🚀Let's see what's next amazing thing coming!

To connect with me please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile). 

Thank you so much for reading!