Expert guide for the Fight Flow fitness video streaming platform. Handles React/TypeScript development, Matrix-themed UI, video library features, and Firebase integration for this workout streaming web app.
Expert guide for developing and maintaining Fight Flow Web, a fitness video streaming platform with a distinctive Matrix-themed interface.
This skill provides comprehensive knowledge of the Fight Flow Web platform architecture, design system, and development patterns. It guides you through working with the React/TypeScript codebase, implementing Matrix-themed UI components, managing video content, and integrating Firebase services.
Fight Flow Web is a fitness video streaming platform that serves as the web companion to iOS and tvOS apps. Built with React 19, TypeScript, and Firebase, it features a distinctive Matrix-themed design system with on-demand workout videos.
When working with Fight Flow Web, first familiarize yourself with the structure:
```
fight_flow_web/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Route-level page components
│ ├── styles/ # Matrix theme CSS
│ ├── types/ # TypeScript definitions
│ └── App.tsx # Main routing
├── public/ # Static assets
└── package.json # Dependencies
```
**Key files to check:**
All UI must follow the Matrix theme guidelines:
**Color Palette:**
**Difficulty Colors:**
**Typography:**
**CSS Classes:**
**Effects:**
When adding components:
1. Create TypeScript file with `.tsx` extension
2. Import Matrix theme: `import '../styles/matrix-theme.css'`
3. Define TypeScript interface for props
4. Use semantic HTML
5. Apply Matrix CSS classes
6. Ensure mobile responsiveness (< 768px breakpoint)
**Example:**
```tsx
import React from 'react';
import '../styles/matrix-theme.css';
interface WorkoutCardProps {
title: string;
difficulty: string;
}
const WorkoutCard: React.FC<WorkoutCardProps> = ({ title, difficulty }) => {
return (
<div className="matrix-card">
<h3>{title}</h3>
<span className="difficulty-badge">{difficulty}</span>
</div>
);
};
export default WorkoutCard;
```
Use the Video interface from `src/types/Video.ts`:
```typescript
interface Video {
id: string;
title: string;
description: string;
thumbnailURL: string;
videoURL: string;
duration?: number;
category: VideoCategory;
difficulty: VideoDifficulty;
instructor?: string;
tags: string[];
equipment?: string[];
isFeatured: boolean;
createdAt?: Date;
}
```
**Categories:** Technique, Flow, Retreat, Beginner, Intermediate, Advanced, Mindfulness, Strength, Flexibility
**Difficulties:** Beginner, Intermediate, Advanced
**Filtering videos:**
**Video player:**
When implementing Firebase:
1. Install Firebase: `npm install firebase`
2. Create Firebase config file
3. Initialize Firestore for video data
4. Implement Firebase Authentication
5. Add user-specific features (favorites, playlists)
**Firestore Schema (Planned):**
**Commands:**
**Before committing:**
When creating new routes:
1. Create page component in `src/pages/`
2. Add route to `App.tsx` with React Router
3. Add navigation link to `Header.tsx`
4. Apply Matrix theme styling
5. Test navigation flow
Ensure mobile optimization:
Before considering work complete:
1. Check browser console for errors
2. Verify Matrix CSS classes are applied
3. Test on desktop and mobile viewports
4. Ensure TypeScript types are correct
5. Check React Router navigation paths
These share video library structure and branding but have platform-specific implementations.
**Implemented:**
**Pending:**
When asked to implement pending features, plan Firebase integration first before building dependent features.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/fight-flow-web-platform-guide/raw