Skip to content

Latest commit

 

History

History
71 lines (48 loc) · 3.47 KB

README.md

File metadata and controls

71 lines (48 loc) · 3.47 KB
Raw

Twitch Analytics SPA favicon-32x32

Demo: Netlify (Try 'tarik'. Open console to see fetched/cached data usage. Delete 'vuex' localStorage key to delete cache.)

Minimalistic SPA project written in Vue 3 + TailwindCSS using the Twitch API. I finished this project in a week without any experience in Vue 3 or TailwindCSS.

Story: I wanted to learn Vue + TailwindCSS and production concepts like skeleton components, caching in a store, and just make a nice-looking application along with my interest in Twitch.

Technical Features

  • Caching all Twitch API data fetched using Vuex (Vue state management library), and vuex-persist to leverage localStorage to persist this data
  • Cached data expires in 15 minutes and is refreshed accordingly
  • Skeleton Loading components with animation to show while data is being loaded in
  • Debouncing of search bar input
  • Formatting of numbers to human-friendly format (2 hours ago, 250k views, etc)
  • Hover states and clickable links for everything

Features

  • Home Page: Component to search Twitch users

  • Profile Page: Component to show analytics about Twitch user, such as username, profile picture, partner checkmark, follower count

    • Key Metrics (avg. video views, peak video views, avg. stream duration, total followers) for the past week, month, year
    • About Me (twitch broadcaster status like partner, whether channel is mature, language, last online, recent games streamed, tags
    • Top Recent Clips (10 most viewed clips in the past 2 months)
    • Recent VODs (10 recent vods)

Screens

Profile Page:

image image

image image image

Home Page:

image image

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install
  • You need a Twitch App with suitable permisssions.
  • Make a .env file in the same directory as .env_template with the same values.
  • Fill in VITE_APP_TWITCH_APP_CLIENT_ID and VITE_APP_TWITCH_APP_ACCESS_TOKEN with your Twitch Client ID and Access Token
  • To get Access Token with Client ID and Client Secret, follow this guide: Twitch Credentials Flow

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build