Storybook day website

Join us for an online event about the future of UI development with Storybook. See what’s new in 7.0, meet world-class frontend devs, and check out the leading projects in the community.

Built With

This project was bootstrapped using the virtual event starter kit.

• Framework: Next.js
  • Storybook design system
  • Storybook components-marketing
  • TypeScript
• CMS: Storyblok
• Video (Pre-recorded): YouTube
• Deployment: Netlify
• Authentication: GitHub OAuth
• Database: Supabase

Running Locally

Set local environment variables:

cp .env.local.example .env.local

Grab the values for only the following variables from your Netlify console or CLI (netlify env:list):

• NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID
• GITHUB_OAUTH_CLIENT_SECRET
• SUPABASE_URL
• SUPABASE_SERVICE_ROLE_SECRET
• STORYBLOK_PREVIEW_TOKEN

Then install the package and run the development server:

yarn install
yarn dev

Open http://localhost:3000 to see the landing page.

## Running Storybook

This project uses Storybook 7 which requires Node 16+. However, the API server requires Node 14. To run Storybook locally, disable engine check:

yarn config set ignore-engines true

Prefix

This website is served from the /day path. The prefix is set using the NEXT_PUBLIC_BASE_PATH environment variable. All static assets and API endpoints must include that prefix. You can automate that using the withPrefix utility function.

import { withPrefix } from '@lib/with-prefix';

export default function StageContainer({ stage, allStages }: Props) {
  const response = useSWR(withPrefix('/api/stages'), {
    initialData: allStages,
    refreshInterval: 5000
  });

  // ...
}

CMS

This project uses Storyblok to manage all content. You can find the content models in the Storyblok space.

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.

Running Authentication Locally

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