Video Platform

• 模仿 Youtube 網站影音平台的作品，支援 RWD
• Dome Page
• Storybook Page
• Design WireFrame

Tech Stack

• Nuxt.js v2
• Tailwind CSS v2
• Storybook
• Youtube Data API (Document)
• Analysis Tool - GA tag, Hotjar, Sentry
• Deploy on Netlify
• Chromatic visual testing, Chromatic Storybook

Start Development

create a '.env' files for environment variable, default content:

NUXT_ENV_PUBLIC_PATH = /
NUXT_ENV_YOUTUBE_KEY =
NUXT_ENV_GOOGLE_ANALYTICS_ID =
NUXT_ENV_HOTJAR_ID =

SENTRY_DSN =
SENTRY_DISABLED = false

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

# storybook
$ npm run storybook
$ npm run build-storybook

Next step

• research Vercel, then use server side render for this project.
• hidden header-bar when trigger window scroll event