Kick Interactive Prototype

Preview the app here: Kick Interactive Prototype

Project Overview

This project is an interactive prototype created to demonstrate community-driven features inspired by popular streaming platforms. It’s built with Vue 3, TypeScript, and Vite. The goal is to showcase engagement features that could enhance the community experience for platforms like Kick.com.

Key Features

Hypetrain Simulation:

• Users can simulate “donations” with predefined amounts.
• Reaches different hypetrain levels based on total donations, triggering animations and smiley expressions to represent engagement milestones.

Chat Interaction:

• Automatically generates chat messages with various sentiments, including the use of emotes commonly found on streaming platforms.
• Chat speed and sentiment can be adjusted to simulate different levels of community excitement.

Tech Stack

• Vue 3: Core framework.
• TypeScript: Type safety and tooling.
• Pinia: State management.
• Tailwind CSS: Styling and responsive layout.
• GitHub Actions: Automates build and deployment to GitHub Pages.

How to Preview

You can preview the live prototype here.

Installation & Setup

To run locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/roadrunner21/ts-kick-interactive-prototype.git
   cd ts-kick-interactive-prototype

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Build for production:

   npm run build